Serve three.js?

问题:

I'm trying to serve the example found here over a [Node] http server with socket.io.

The example runs just fine.

The code below...

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(8086);

function handler (req, res) {
  fs.readFile(__dirname + '/spinnycube.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading spinnycube.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

...is what I'm using to serve the page, index.html. I've chosen port 8086 because it is unused; it makes no difference between this and any other port number.

The example runs fine by itself, and any index.html served this way runs great, except when I add in three.js code and try to serve the example (as index.html). Everything gets served and operates normally except the 3D scene.

What is it about serving three.js code this way that makes it break down? Why is it that everything works except that?

Any help is greatly appreciated. Thank you.

Note: Even though this question is similar, the answer does say anything about why WebGL (via three.js) will not render when being served as explained above.

回答1:

I tried to serve the example page. You have to change some links in the page for it to work. Like change

<script src="../build/three.min.js"></script>

to

<script src="http://threejs.org/build/three.min.js"></script>

And

loadTexture( 'textures/cube/skybox/px.jpg' ), // right
...
loadTexture( 'textures/cube/skybox/nz.jpg' )  // front

to

loadTexture( 'http://threejs.org/examples/textures/cube/skybox/px.jpg' ), // right
...
loadTexture( 'http://threejs.org/examples/textures/cube/skybox/nz.jpg' )  // front

The page loads perfectly and three.js code also works. I don't understand how socket.io comes into picture. So maybe, it is causing problems.