无法使用 Node.js 服务器和 Three.js 加载文件的文件路径答案

【问题标题】：Cannot load file path for files with Node.js Server and Three.js无法使用 Node.js 服务器和 Three.js 加载文件的文件路径
【发布时间】：2020-11-24 01:58:09
【问题描述】：

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

app.js：（我通过命令行在项目目录中使用：node app.js 命令运行它）

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var THREE = require('three');

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
  console.log('a user connected');
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

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>

我的项目目录：

错误：

GET http://localhost:3000/models/rook.amf 404 (Not Found)

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

【问题讨论】：

标签： javascript html node.js three.js

【解决方案1】：

现在，您的 Web 服务器没有为 models 目录提供服务。但是，您可以通过要求 express 静态地为 models/ 目录提供服务，如下所示：

app.use(express.static('models'));

【讨论】：

感谢您的回复。我收到错误app.use(express.static('models')); ^ ReferenceError: express is not defined。有什么想法吗？
在顶部添加一行：var express = require('express')
我做到了，但仍然得到原始问题的错误，GET http://localhost:3000/models/rook.amf 404 (Not Found)（是的，该文件肯定存在于模型中，哈哈）

【解决方案2】：

您可以使用express.js。 Express.js 有一个用于提供静态资产的模块 (https://github.com/expressjs/serve-static)。

这是一个使用该模块的示例：

var express = require('express');
var THREE = require('three');


var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.use(express.static(__dirname + 'models')); //Express static file module


app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

app.listen(3000);

这个网站有关于这个模块的文档：https://expressjs.com/en/starter/static-files.html

您的 html 文件不必更改。

【讨论】：

提问的人已经在用快递了...
@JDS 我通过添加__dirname更新了我的答案。立即尝试