Question

我在 Three.js 方面遇到问题，无法加载纹理并应用于网格多维数据集。在本地，我知道有一些问题，比如在带有wamp（localhost）的apache服务器上运行html文件。

但是当我使用 Node.js 和socket.io时，如何修复它？首先，要加载three.js，我必须将脚本src的web地址而不是本地“three.js”：

http://threejs.org/build/three.min.js

它有效但纹理怎么样？

纹理的本地或互联网地址都无效......

 //var mapUrl = "mercury.jpg"; 
    var mapUrl = "http://threejs.org/examples/textures/cube/skybox/px.jpg"; 
    var map = THREE.ImageUtils.loadTexture(mapUrl); // its not working with both

如果我将代码放在运行Node.js（如Cloud9）的 Web服务器上，如何修复它？（与Node.js本地问题相同）。

感谢您的关注。

这是我的完整代码。

服务器

var http    =   require('http');
var fs      =   require('fs');

// Creation du serveur
var app = http.createServer(function (req, res) {
    // On lit notre fichier app.html
    fs.readFile('gl.html', 'utf-8', function(error, content) {
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.end(content);
    });

  });

var io = require("socket.io");
io = io.listen(app);

io.sockets.on('connection', function (socket) {

  socket.on('send', function () {
    socket.broadcast.emit('rec');

  }); // send

});  // connection


app.listen(8080);

客户端（gl.html）

<!DOCTYPE html>
<html>
<head>
<title>Welcome to WebGL</title>
</head>
<body onLoad="onLoad();" style="">
<h1>Webgl</h1>
<div id="container" style="width:95%; height:80%; position:absolute;"></div>


<script type="text/javascript" src="http://threejs.org/build/three.min.js"></script>
<!--<script type="text/javascript" src="Three.js"></script> not working-->
<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script>
    var socket = io.connect();

    var renderer = null, 
        scene = null, 
        camera = null,
        cube = null,
        animating = false;

    function onLoad()
    {
        // Grab our container div
        var container = document.getElementById("container");

        // Create the Three.js renderer, add it to our div
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setSize(container.offsetWidth, container.offsetHeight);
        container.appendChild( renderer.domElement );

        // Create a new Three.js scene
        scene = new THREE.Scene();

        // Put in a camera
        camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 );
        camera.position.set( 0, 0, 3 );

        // Create a directional light to show off the object
        var light = new THREE.DirectionalLight( 0xffffff, 1.5);
        light.position.set(0, 0, 1);
        scene.add( light );






        // Create a shaded, texture-mapped cube and add it to the scene
        // First, create the texture map

   //   var mapUrl = "mercury.jpg";
  var mapUrl = "http://threejs.org/examples/textures/cube/skybox/px.jpg";
        var map = THREE.ImageUtils.loadTexture(mapUrl); // not working with both !!!






        // Now, create a Phong material to show shading; pass in the map
        var material = new THREE.MeshPhongMaterial({ map: map });

        // Create the cube geometry
        var geometry = new THREE.CubeGeometry(1, 1, 1);

        // And put the geometry and material together into a mesh
        cube = new THREE.Mesh(geometry, material);

        // Turn it toward the scene, or we won't see the cube shape!

       // cube.rotation.x = Math.PI / 5;
        cube.rotation.x = 0.5;
        //cube.rotation.y = Math.PI / 5;

        // Add the cube to our scene
        scene.add( cube );

        // Add a mouse up handler to toggle the animation
        addMouseHandler();

        // Run our render loop
        run();


    }

    function run()
    {
        // Render the scene
        renderer.render( scene, camera );

        // Spin the cube for next frame
        if (animating)
        {
            cube.rotation.y -= 0.01;
            //cube.rotation.x += 0.05;
        }

        // Ask for another frame
        //requestAnimationFrame(run);
    setTimeout(run, 1000/60);

    }

    function addMouseHandler()
    {
        var dom = renderer.domElement;

        dom.addEventListener( 'mouseup', onMouseUp, false);
    }

    function onMouseUp  (event)
    {
        event.preventDefault();

        animating = !animating;

        socket.emit('send'); 

    }

    socket.on('rec', function () {

      animating = !animating;

  });

    </script>
    </body>
</html>

Answer 1

事实上，我只需使用快递，将所有文件放在公开文件夹中，并命名客户 index.html 。

现在它有效！如何关闭我的问题？

以下是服务器的简单代码：

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8080);

Answer 2

您在使用CORS时遇到了麻烦。 CORS声明纹理需要从同一个基本URL传递或需要在服务器端进行特殊处理。使用代理可以轻松修复此问题。如果您已经在使用服务器，那么配置它来处理代理请求应该不会太难。

在服务器上使用Node.js的Three.js - 如何加载TEXTURE？

2 个答案: