Невозможно загрузить путь к файлу для файлов с Node.js Server и 3. js - PullRequest
Новая
       41

Невозможно загрузить путь к файлу для файлов с Node.js Server и 3. js

0 голосов
/ 04 августа 2020

У меня проблемы с загрузкой 3D-моделей из папки на моем компьютере с использованием тестового сервера localhost node.js с тремя. js библиотеками.

app. js: (Я запускаю его через командную строку в каталоге проекта, используя: node app.js command) 

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');
});

Соответствующая часть индекса. 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 и 3. js на моем простом тесте сервера?

Ответы [ 2 ]

2 голосов
/ 04 августа 2020

Прямо сейчас ваш веб-сервер не обслуживает каталог models. Однако вы можете обслужить его, попросив express stati c -ly обслуживать каталог models/ следующим образом: 

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

Подробнее: https://expressjs.com/en/starter/static-files.html

1 голос
/ 04 августа 2020

Что вы можете сделать, так это использовать express.js. Express. js имеет модуль для обслуживания c активов (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 изменять не нужно.

...