Hello guys i got problem with node.js
I got my server in node.js
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(8086);
function handler (req, res) {
fs.readFile('./cube.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);
});
});
My cube html:
<!DOCTYPE html>
<html>
<head>
<title>WebGL/Three.js Step Tutorial</title>
<style>
body {
margin: 0px;
background-color: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="cube.js"></script>
</body>
</html>
and cube.js:
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 20, 10);
// var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('box.jpg') } );
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.rotation.x += .03;
mesh.rotation.y += .03;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
And it doesn't work ;/ If I change patch in node.js from fs.readFile('./cube.html', to (__dirname + './cube.html', then it throws Error loading spinnycube.htm.
Can someone explain me why it works that ?
Of course I include my lib in the same folder if I open cube.html. Using my browser it works perfectly but when I try start server id doesn't show the 3D.
EDIT.
When I change my HTML like this it works:
<!DOCTYPE html>
<html>
<head>
<title>Stronka sie odpala</title>
<style>
body {
margin: 0px;
background-color: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<script src="http://threejs.org/build/three.min.js"></script>
<script>
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 20, 10);
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
// var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('box.jpg') } );
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.rotation.x += .03;
mesh.rotation.y += .03;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
</script>
</body>
</html>
But why when I include <script> with patch it doesn't work?
Another question is when I add to node.js simple HTML site with hyperlink the next site will not appear. Any conclusion?