Simplified geometry2_sandbox example.

examples/canvas_geometry2_sandbox.html

@@ -30,15 +30,6 @@
 
 			var cube, plane;
 
-			var targetRotation = 0;
-			var targetRotationOnMouseDown = 0;
-
-			var mouseX = 0;
-			var mouseXOnMouseDown = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
 			init();
 			animate();
 
@@ -53,45 +44,70 @@
 
 				scene = new THREE.Scene();
 
-				// Cube
+				// Plane
 
-				console.time( 'box' );
+				console.time( 'PlaneGeometry' );
 
-				var geometry = new THREE.BoxGeometry2( 200, 200, 200, 20, 20, 20 );
+				var geometry = new THREE.PlaneGeometry( 200, 200, 10, 10 );
 
-				console.timeEnd( 'box' );
+				console.timeEnd( 'PlaneGeometry' );
 
-				/*
-				for ( var i = 0; i < geometry.faces.length; i += 2 ) {
+				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
-					var hex = Math.random() * 0xffffff;
-					geometry.faces[ i ].color.setHex( hex );
-					geometry.faces[ i + 1 ].color.setHex( hex );
+				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
 
-				}
-				*/
+				plane = new THREE.Mesh( geometry, material );
+				plane.position.x = - 200;
+				scene.add( plane );
 
-				var material = new THREE.MeshBasicMaterial( { /*vertexColors: THREE.FaceColors,*/ overdraw: 0.5, wireframe: true } );
+				// Cube
+
+				console.time( 'BoxGeometry' );
+
+				var geometry = new THREE.BoxGeometry( 200, 200, 200, 10, 10, 10 );
+
+				console.timeEnd( 'BoxGeometry' );
+
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
 
 				cube = new THREE.Mesh( geometry, material );
 				cube.position.y = 150;
-				scene.add( cube );
+				plane.add( cube );
+
+				//
 
 				// Plane
 
-				console.time( 'plane' );
+				console.time( 'PlaneGeometry2' );
 
-				var geometry = new THREE.PlaneGeometry2( 200, 200, 20, 20 );
+				var geometry = new THREE.PlaneGeometry2( 200, 200, 10, 10 );
 
-				console.timeEnd( 'plane' );
+				console.timeEnd( 'PlaneGeometry2' );
 
 				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
-				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, overdraw: 0.5, wireframe: true } );
+				var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
 
 				plane = new THREE.Mesh( geometry, material );
+				plane.position.x = 200;
 				scene.add( plane );
 
+				// Cube
+
+				console.time( 'BoxGeometry2' );
+
+				var geometry = new THREE.BoxGeometry2( 200, 200, 200, 10, 10, 10 );
+
+				console.timeEnd( 'BoxGeometry2' );
+
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
+
+				cube = new THREE.Mesh( geometry, material );
+				cube.position.y = 150;
+				plane.add( cube );
+
+				//
+
 				renderer = new THREE.CanvasRenderer();
 				renderer.setClearColor( 0xf0f0f0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -103,10 +119,6 @@
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -115,9 +127,6 @@
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -127,71 +136,6 @@
 
 			//
 
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
-
-				mouseXOnMouseDown = event.clientX - windowHalfX;
-				targetRotationOnMouseDown = targetRotation;
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = event.clientX - windowHalfX;
-
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-
-			}
-
-			function onDocumentMouseOut( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-
-			}
-
-			function onDocumentTouchStart( event ) {
-
-				if ( event.touches.length === 1 ) {
-
-					event.preventDefault();
-
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotationOnMouseDown = targetRotation;
-
-				}
-
-			}
-
-			function onDocumentTouchMove( event ) {
-
-				if ( event.touches.length === 1 ) {
-
-					event.preventDefault();
-
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
-
-				}
-
-			}
-
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -203,7 +147,13 @@
 
 			function render() {
 
-				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
+				for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
+
+					var object = scene.children[ i ];
+					object.rotation.y = Date.now() * 0.001;
+
+				}
+
 				renderer.render( scene, camera );
 
 			}