Javascript 无法加载Node.js Server和Three.js的文件（三维模型）的文件路径_Javascript_Html_Express_Three.js

Javascript 无法加载Node.js Server和Three.js的文件（三维模型）的文件路径

javascript html express three.js

Javascript 无法加载Node.js Server和Three.js的文件（三维模型）的文件路径,javascript,html,express,three.js,Javascript,Html,Express,Three.js,使用localhost node.js测试服务器和three.js库从计算机上的文件夹加载三维模型时遇到困难 app.js：（我使用：node app.jscommand通过项目目录中的命令行运行它） index.html的相关部分： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Inde

使用localhost node.js测试服务器和three.js库从计算机上的文件夹加载三维模型时遇到困难

app.js：（我使用：

node app.js

command通过项目目录中的命令行运行它）

index.html的相关部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Index.html title</title>

</head>

<body>
    
<script src="/socket.io/socket.io.js"></script> 
<script src="//threejs.org/build/three.js"></script> 
<script src="//threejs.org/examples/js/loaders/AMFLoader.js"></script>
<script src="//threejs.org/examples/js/controls/OrbitControls.js"></script>

<script>
    
    var socket = io();
    
    var camera, scene, renderer;

    init();

    function init() {
        scene = new THREE.Scene();
        scene.add( new THREE.AmbientLight( 0x999999 ) );
        camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );
        camera.up.set( 0, 0, 1 );
        camera.position.set( 0, -9, 6 );
        camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );
        scene.add( camera );
        var grid = new THREE.GridHelper( 25, 1.0, 0xffffff, 0x555555 );
        grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
        scene.add( grid );
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setClearColor( 0x999999 );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        
        /* everything up till here works */

        var loader = new THREE.AMFLoader(); 
        loader.load('/models/rook.amf', function ( amfobject ) { //'./models/rook.amf'

            scene.add( amfobject );
            render();

        } );

        /* ^^^ this is the part not working */

        var controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render );
        controls.target.set( 0, 1.2, 2 );
        controls.update();
        window.addEventListener( 'resize', onWindowResize, false );

    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        render();
    }
    function render() {    
        renderer.render( scene, camera );
    }
</script>
</body>
</html>

如何在我的简单服务器测试中正确加载Node和three.js文件？

您需要将

models

文件夹的内容作为静态文件提供。例如：

app.use('/models', express.static('models'))

大多数流行的3D格式扩展（.glb、.gltf、.fbx、.dae、.amf…）都不是标准格式，浏览器在操作这些文件时会特别小心，试图保护用户以防止危险行为

因此，您需要配置web服务器引擎以接受这些扩展，否则在下载它们时会收到不同的HTTP错误。amf甚至不在该列表中，因此应用程序/octet流
是所有其他情况的默认值。未知文件类型应使用此类型。
如果从ASP.Net应用程序使用IIS服务器，请在web.config文件的
节点中添加以下xml行：

...

如果您使用的是nginx服务器，请在

http

对象中的nginx.conf文件中添加以下行：

http {
    include /etc/nginx/mime.types;
    types {
        model/mtl mtl;
        model/obj obj;
        model/gltf+json gltf;
        model/gltf-binary glb;
        application/octet-stream fbx;
        application/octet-stream amf;
    }
    ...
}

如果您使用的是Apache服务器，请在mime.types文件中添加以下行：

对于任何其他web服务器，您都可以轻松找到如何设置MIME类型配置

编辑：对于节点，请查看您的文件

server.js

不包括对这些MIME类型的任何限制，大多数流行的

server.js

脚本包括对非标准MIME类型的限制

EDIT2：我得到了它，因为我怀疑它与AMF的MIME类型有关。我已将完整的解决方案发布在
但需要改变的重要事情如下
首先，更改你的
app.js
以添加MIME类型

const express=require（'express'）；常量app=express（）； const path=require（'path'）； const router=express.router（）； router.get（'/'，函数（req，res）{ res.sendFile（path.join（uu dirname+'/index.html'）； //__dirname：它将解析为您的项目文件夹。 }); app.use（'/models'，express.static（'models'）//添加这个！ app.use（'/express'，express.static（'express'）//添加这个！ define（{'application/octet stream'：['amf']}） //添加路由器应用程序使用（“/”，路由器）； app.listen（process.env.port | | 3000）； console.log（“在端口3000处运行”）；
第二，由于Three.js（4月23日）的最新变化，AMF loader的使用需要jszip模块。无需在本地下载，您可以像其他js文件一样通过url使用它。在我的项目中，index.html位于/express文件夹中，因此我到amf模型的路径是
。/models/rock.amf

Index.html标题摄像机、场景、渲染器； init（）函数init（）{ 场景=新的三个。场景（）；添加（新的三个环境光（0x99999））；摄像头=新的三个透视摄像头（35，window.innerWidth/window.innerHeight，1500）；摄像机设置（0,0,1）；摄像机位置设置（0，-9,6）；添加（新的三点光源（0xffffff，0.8））；场景。添加（摄影机）； var grid=new THREE.GridHelper（25,1.0,0xffffff,0x555555）；网格旋转轴（新的三个向量3（1，0，0），90*（Math.PI/180））；场景.添加（网格）； renderer=new THREE.WebGLRenderer（{antialas:true}）； renderer.setClearColor（0x99999）； renderer.setPixelRatio（window.devicePixelRatio）； renderer.setSize（window.innerWidth、window.innerHeight）； document.body.appendChild（renderer.doElement）； /*现在它工作了*/ var loader=new THREE.AMFLoader（）； loader.load（'../models/rook.amf'，function（amfobject）{/'./models/rook.amf' 场景.添加（amfobject）； render（）； }); /*^^^^这是不起作用的零件*/ var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；控件。addEventListener（'change'，render）；控制目标设定（0,1.2,2）；控件更新（）； addEventListener（'resize'，onWindowResize，false）； } 函数onWindowResize（）{ camera.aspect=window.innerWidth/window.innerHeight； camera.updateProjectMatrix（）； renderer.setSize（window.innerWidth、window.innerHeight）； render（）； } 函数render（）{ 渲染器。渲染（场景、摄影机）； }
你明白了。。。
尝试从问题中的代码重新创建这些步骤。你也会成功的。也许在你的真实代码中还有一些问题没有解决。然后你应该用这个信息更新它

我已经复制了你的
app.js
和
index.html

我已经从中加载了
rook.amf
，并将其放置在
/models
中。我想你也是这么做的

我已经添加了
app.use（）
，正如其他人已经正确建议的那样。
const express=require（'express'）） const app=express（） const http=require（'http'）。createServer（应用程序） //const io=require（'socket.io'）（http）//不相关 //const THREE=require（'THREE'）//不相关 app.use（'/models'，express.static（'models'）//添加这个！ app.get（'/'，函数（req，re app.use('/models', express.static('models')) http { include /etc/nginx/mime.types; types { model/mtl mtl; model/obj obj; model/gltf+json gltf; model/gltf-binary glb; application/octet-stream fbx; application/octet-stream amf; } ... } model/mtl mtl model/obj obj model/gltf+json gltf model/gltf-binary glb application/octet-stream fbx application/octet-stream amf THREE.AMFLoader: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.