I've been trying out Three.js today and I've had trouble getting my Mesh to change according using mesh.rotation.x += 10; for example.
The code below renders a triangle and the camera moves around onMouseMove but inside the render() function, it fails to scale or rotate the Mesh obj.
Appreciate the pointers.
<body>
<div id="container" style="border: #0f0 solid;">
</div>
<script type="text/javascript">
var mouseX = 0, mouseY = 0;
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2;
// get the DOM element to attach to
var container = document.getElementById("container");
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 50, 1e7 );
var scene = new THREE.Scene();
var obj;
var geom = new THREE.Geometry();
var stats;
init();
animate();
function init(){
// the camera starts at 0,0,0 so pull it back
camera.position.z = 400;
// start the renderer
// attach the render-supplied DOM element
container.appendChild(renderer.domElement);
// create a new mesh with triangle geometry
// create the sphere's material
var material = new THREE.MeshLambertMaterial(
{
color: 0x00FF00
});
var v1 = new THREE.Vector3(50,0,0);
var v2 = new THREE.Vector3(50,100,0);
var v3 = new THREE.Vector3(0, 50, 0);
geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));
geom.faces.push(new THREE.Face3(0,1,2));
geom.computeFaceNormals();
obj = new THREE.Mesh(geom, material);
obj.doubleSided = true;
obj.rotation.x = 0.1;
// add the obj to the scene
scene.addObject(obj);
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 600;
//pointLight.lookAt(obj);
// add to the scene
scene.add(pointLight);
ambientLight = new THREE.AmbientLight( 0xbbbbbb );
scene.add(ambientLight);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
// draw!
renderer.render(scene, camera);
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function onDocumentMouseMove(event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.lookAt( scene.position );
var time = Date.now() * 0.0015;
for ( var i = 0; i < scene.objects.length; i ++ ) {
scene.objects[ i ].rotation.y = time * ( i % 2 ? 1 : -1 );
}
obj.rotation.x += 20;
renderer.clear();
renderer.render( scene, camera );
}
</script>
</body>
