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 @@
+
+
+
@@ -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 @@
+
+
+
@@ -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 );