Node.js Отправить файл 3D-модели клиенту для рендеринга (Three. js) - PullRequest
Новая
       32

Node.js Отправить файл 3D-модели клиенту для рендеринга (Three. js)

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

Это должно быть просто, но объединение частей кажется сложной задачей. У меня очень простой локальный сервер node.js, а в клиенте index.html я использую три. js для загрузки и рендеринга файла 3D-модели (AMF в этом примере, почти точно следуя руководству).

Однако я не могу получить файл для отправки клиенту по запросу в моем app.js. Соответствующий код ниже:

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>
    alert("asdf");
    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 );
        // Z is up for objects intended to be 3D printed.
        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 );

        /* PROBLEM AREA BELOW: */

        var loader = new THREE.AMFLoader(); 
        loader.load('/rook.amf', function ( amfobject ) { 
            scene.add( amfobject );
            render();
        } );

        /* When I use res.sendFile, I get an error 'file not found' on client side */
        /* When I use res.write(), I get no result and don't see anything, but no error. */

        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 );
        alert("end of init") 
    }
    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>

Вот мой app.js: 

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


var publicPath = path.resolve(__dirname);
console.log("publicPath: "+String(publicPath))
console.log("__dirname: "+String(__dirname))
app.use(express.static('/'));

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

app.get('/rook.amf', function(req, res) {
    console.log('test1 ::  '+String(__dirname + '\\rook.amf'))
    res.write(__dirname + '\\rook.amf'); // I've tried both res.sendFile (error), and res.write (no 3D model loaded, but no error)
});


io.on('connection', (socket) => {
  console.log('a user connected');
});

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

И да, я трипнул-чекнул эту ладью. amf там, где он есть. Для справки, когда я пытаюсь вызвать res.sendFile с теми же аргументами, я получаю:

THREE.AMFLoader: Error loading AMF - no AMF document found.

В основном мне нужен способ отправить файлы 3D-модели этому клиенту, чтобы они могли его отобразить. в браузере на стороне клиента код, который я напишу позже.

...