三。js和节点。服务器上的js -如何加载纹理?

I have a trouble with Three.js for loading a texture and applying to a mesh cube. In local, I know there are some issues like running the html file on a apache server with wamp (localhost).

我有三个问题。用于加载纹理并应用于网格立方体。在本地，我知道有一些问题，比如使用wamp (localhost)在apache服务器上运行html文件。

But when I use Node.js and socket.io, how to fix it ? First, to load three.js, I have to put the web adress of the script src instead of a local "three.js" :

但是当我使用Node时。js和套接字。io，怎么修理?首先,加载三人。js，我必须将脚本src的web地址替换为本地的“3”。js”:

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

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

It works but how about the texture ?

它起作用了，但是质地如何?

Neither a local or an internet adress for the texture is working...

无论是本地的还是网络上的贴图都不管用……

 //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

And if I put my code on a web server running with Node.js like Cloud9, how to fix it ? (same problem as in local with Node.js).

如果我把代码放在一个运行节点的web服务器上。像Cloud9这样的js，如何修复?(与Node.js在本地出现的问题相同)。

Thank you for your attention.

谢谢大家的关注。

Here is my complete code.

这是我的完整代码。

Server

服务器

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

Client (gl.html)

客户端(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>

2 个解决方案

#1

In fact i just had to use express, place all the files in the folder public and name client index.html.

实际上，我只需要使用express，将所有文件放在文件夹public和name client index.html中。

Now it works ! How can close my question ?

现在它工作!如何结束我的问题?

Here is the simple code of the server :

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

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

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

app.listen(8080);

#2

You are running into trouble with CORS. CORS state that textures need to be comming from the same base url or needs special handling on server side. This is easily fixable with a proxy. If you are already using a server thaen it shouldn't be too hard to configure it to handle proxy requests.

你遇到了麻烦。CORS表示，纹理需要从相同的基本url开始，或者需要在服务器端进行特殊处理。这很容易用代理解决。如果您已经使用了服务器，那么配置它来处理代理请求应该不会太困难。

#1