diff --git a/examples/webgl_geometries.html b/examples/webgl_geometries.html index 180d9832aac90c2a870e1cd54c23cebca3c81007..8d1bdccb6f60f2ac8178106764394eb0b6f13550 100644 --- a/examples/webgl_geometries.html +++ b/examples/webgl_geometries.html @@ -6,15 +6,33 @@ +
+
three.js webgl - geometries
+ @@ -24,17 +42,14 @@ if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); - var container, stats; - - var camera, scene, renderer; + var camera, scene, renderer, stats; init(); animate(); function init() { - container = document.createElement( 'div' ); - document.body.appendChild( container ); + var container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.y = 400; @@ -43,60 +58,61 @@ var light, object; - scene.add( new THREE.AmbientLight( 0x404040 ) ); + var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); + scene.add( ambientLight ); - light = new THREE.DirectionalLight( 0xffffff ); - light.position.set( 0, 1, 0 ); - scene.add( light ); + var pointLight = new THREE.PointLight( 0xffffff, 0.8 ); + camera.add( pointLight ); + scene.add( camera ); var map = new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg' ); map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; - var material = new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } ); + var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } ); // object = new THREE.Mesh( new THREE.SphereGeometry( 75, 20, 10 ), material ); - object.position.set( -400, 0, 200 ); + object.position.set( - 300, 0, 200 ); scene.add( object ); object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 1 ), material ); - object.position.set( -200, 0, 200 ); + object.position.set( - 100, 0, 200 ); scene.add( object ); object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 2 ), material ); - object.position.set( 0, 0, 200 ); + object.position.set( 100, 0, 200 ); scene.add( object ); object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material ); - object.position.set( 200, 0, 200 ); + object.position.set( 300, 0, 200 ); scene.add( object ); // object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 4, 4 ), material ); - object.position.set( -400, 0, 0 ); + object.position.set( - 300, 0, 0 ); scene.add( object ); object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ), material ); - object.position.set( -200, 0, 0 ); + object.position.set( - 100, 0, 0 ); scene.add( object ); object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material ); - object.position.set( 0, 0, 0 ); + object.position.set( 100, 0, 0 ); scene.add( object ); object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 20, 5, 0, Math.PI * 2 ), material ); - object.position.set( 200, 0, 0 ); + object.position.set( 300, 0, 0 ); scene.add( object ); + // + object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material ); - object.position.set( 400, 0, 0 ); + object.position.set( - 300, 0, - 200 ); scene.add( object ); - // - var points = []; for ( var i = 0; i < 50; i ++ ) { @@ -106,23 +122,15 @@ } object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material ); - object.position.set( -400, 0, -200 ); + object.position.set( - 100, 0, - 200 ); scene.add( object ); object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material ); - object.position.set( -200, 0, -200 ); + object.position.set( 100, 0, - 200 ); scene.add( object ); object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material ); - object.position.set( 0, 0, -200 ); - scene.add( object ); - - object = new THREE.AxesHelper( 50 ); - object.position.set( 200, 0, -200 ); - scene.add( object ); - - object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 ); - object.position.set( 400, 0, -200 ); + object.position.set( 300, 0, - 200 ); scene.add( object ); // @@ -171,14 +179,16 @@ camera.lookAt( scene.position ); - for ( var i = 0, l = scene.children.length; i < l; i ++ ) { + scene.traverse( function( object ) { - var object = scene.children[ i ]; + if ( object.isMesh === true ) { - object.rotation.x = timer * 5; - object.rotation.y = timer * 2.5; + object.rotation.x = timer * 5; + object.rotation.y = timer * 2.5; - } + } + + } ); renderer.render( scene, camera ); diff --git a/examples/webgl_geometries_parametric.html b/examples/webgl_geometries_parametric.html index 3bee5decba0f63bf0897c6b0c95e45223a94c215..2f58c1793ef66bab84b45de35d2d30c1e68724be 100644 --- a/examples/webgl_geometries_parametric.html +++ b/examples/webgl_geometries_parametric.html @@ -6,15 +6,33 @@ +
+
three.js webgl - parametric geometries
+ @@ -34,8 +52,7 @@ function init() { - var container = document.createElement( 'div' ); - document.body.appendChild( container ); + var container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); camera.position.y = 400; @@ -44,11 +61,12 @@ // - scene.add( new THREE.AmbientLight( 0x404040 ) ); + var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 ); + scene.add( ambientLight ); - var light = new THREE.DirectionalLight( 0xffffff ); - light.position.set( 0, 0, 1 ); - scene.add( light ); + var pointLight = new THREE.PointLight( 0xffffff, 0.8 ); + camera.add( pointLight ); + scene.add( camera ); // @@ -56,28 +74,26 @@ map.wrapS = map.wrapT = THREE.RepeatWrapping; map.anisotropy = 16; - var materials = [ - new THREE.MeshLambertMaterial( { map: map, side: THREE.DoubleSide } ), - new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1, side: THREE.DoubleSide } ) - ]; + var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } ); // var geometry, object; geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.plane( 100, 100 ), 10, 10 ); - object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); + geometry.center(); + object = new THREE.Mesh( geometry, material ); object.position.set( - 200, 0, 200 ); scene.add( object ); geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, 20, 20 ); - object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); + object = new THREE.Mesh( geometry, material ); object.position.set( 0, 0, 200 ); object.scale.multiplyScalar( 5 ); scene.add( object ); geometry = new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.mobius, 20, 20 ); - object = THREE.SceneUtils.createMultiMaterialObject( geometry, materials ); + object = new THREE.Mesh( geometry, material ); object.position.set( 200, 0, 200 ); object.scale.multiplyScalar( 30 ); scene.add( object ); @@ -90,23 +106,18 @@ var sphere = new THREE.ParametricGeometries.SphereGeometry( 50, 20, 10 ); var tube = new THREE.ParametricGeometries.TubeGeometry( GrannyKnot, 100, 3, 8, true, false ); - object = THREE.SceneUtils.createMultiMaterialObject( torus, materials ); + object = new THREE.Mesh( torus, material ); object.position.set( - 200, 0, - 200 ); scene.add( object ); - object = THREE.SceneUtils.createMultiMaterialObject( sphere, materials ); + object = new THREE.Mesh( sphere, material ); object.position.set( 0, 0, - 200 ); scene.add( object ); - object = THREE.SceneUtils.createMultiMaterialObject( tube, materials ); + object = new THREE.Mesh( tube, material ); object.position.set( 200, 0, - 200 ); object.scale.multiplyScalar( 2 ); scene.add( object ); - - // - - object = new THREE.AxesHelper( 50 ); - scene.add( object ); // @@ -149,14 +160,16 @@ camera.lookAt( scene.position ); - for ( var i = 0, l = scene.children.length; i < l; i ++ ) { + scene.traverse( function( object ) { + + if ( object.isMesh === true ) { - var object = scene.children[ i ]; + object.rotation.x = timer * 5; + object.rotation.y = timer * 2.5; - object.rotation.x = timer * 5; - object.rotation.y = timer * 2.5; + } - } + } ); renderer.render( scene, camera );