Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #13852 from Mugen87/dev4

Examples: Clean up
Mr.doob 7 years ago
parent
fb46a77f8e 55cf41803e
commit
c02ab3543f
9 changed files with 96 additions and 107 deletions
Split View Show Diff Stats
  1. 1 1
      examples/webgl_geometry_cube.html
  2. 24 30
      examples/webgl_geometry_dynamic.html
  3. 17 17
      examples/webgl_geometry_hierarchy.html
  4. 16 15
      examples/webgl_geometry_hierarchy2.html
  5. 21 30
      examples/webgl_geometry_normals.html
  6. 3 3
      examples/webgl_lights_physical.html
  7. 8 7
      examples/webgl_lights_pointlights.html
  8. 3 2
      examples/webgl_lights_spotlight.html
  9. 3 2
      examples/webgl_lights_spotlights.html

+ 1 - 1
examples/webgl_geometry_cube.html
View File 

@@ -39,7 +39,7 @@
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );

+ 24 - 30
examples/webgl_geometry_dynamic.html
View File 

@@ -37,7 +37,6 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>
 
 
 		<script src="../build/three.js"></script>
 
@@ -49,34 +48,25 @@
 
 
 		<script>
 
 
-			if ( ! Detector.webgl ) {
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-				Detector.addGetWebGLMessage();
 
-				document.getElementById( 'container' ).innerHTML = "";
 
+			var camera, controls, scene, renderer, stats;
 
 
-			}
 
-
 
-			var container, stats;
 
-
 
-			var camera, controls, scene, renderer;
 
-
 
-			var mesh, texture, geometry, material;
 
+			var mesh, texture, geometry, material, clock;
 
 
 			var worldWidth = 128, worldDepth = 128,
 
 			worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
 
-			var clock = new THREE.Clock();
 
-
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				container = document.getElementById( 'container' );
 
-
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
 				camera.position.y = 200;
 
 
+				clock = new THREE.Clock();
 
+
 
 				controls = new THREE.FirstPersonControls( camera );
 
 
 				controls.movementSpeed = 500;
 
@@ -86,16 +76,20 @@
 
 				scene.background = new THREE.Color( 0xaaccff );
 
 				scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );
 
 
-				geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 
+				geometry = new THREE.PlaneBufferGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
 
 				geometry.rotateX( - Math.PI / 2 );
 
 
-				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
+				var position = geometry.attributes.position;
 
+				position.dynamic = true;
 
+
 
+				for ( var i = 0; i < position.count; i ++ ) {
 
 
-					geometry.vertices[ i ].y = 35 * Math.sin( i / 2 );
 
+					var y = 35 * Math.sin( i / 2 );
 
+					position.setY( i, y );
 
 
 				}
 
 
-				var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
 
+				var texture = new THREE.TextureLoader().load( 'textures/water.jpg' );
 
 				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
 				texture.repeat.set( 5, 5 );
 
 
@@ -104,16 +98,13 @@
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				container.innerHTML = "";
 
-
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				//
 
 
@@ -145,16 +136,19 @@
 
 
 			function render() {
 
 
-				var delta = clock.getDelta(),
 
-					time = clock.getElapsedTime() * 10;
 
+				var delta = clock.getDelta();
 
+				var time = clock.getElapsedTime() * 10;
 
+
 
+				var position = geometry.attributes.position;
 
 
-				for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
 
+				for ( var i = 0; i < position.count; i ++ ) {
 
 
-					geometry.vertices[ i ].y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
 
+					var y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );
 
+					position.setY( i, y );
 
 
 				}
 
 
-				mesh.geometry.verticesNeedUpdate = true;
 
+				position.needsUpdate = true;
 
 
 				controls.update( delta );
 
 				renderer.render( scene, camera );

+ 17 - 17
examples/webgl_geometry_hierarchy.html
View File 

@@ -21,9 +21,7 @@
 
 
 		<script>
 
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
+			var camera, scene, renderer, stats;
 
 
 			var geometry, group;
 
 
@@ -32,16 +30,11 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
 				camera.position.z = 500;
 
 
@@ -49,7 +42,7 @@
 
 				scene.background = new THREE.Color( 0xffffff );
 
 				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
 
 
-				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
+				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
 				var material = new THREE.MeshNormalMaterial();
 
 
 				group = new THREE.Group();
 
@@ -73,18 +66,25 @@
 
 
 				scene.add( group );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
 
-				container.appendChild( renderer.domElement );
 
+				//
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
-			//
 
+				//
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
+				//
 
 
-			window.addEventListener( 'resize', onWindowResize, false );
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
 
 			}
 
 
@@ -100,7 +100,7 @@
 
 
 			}
 
 
-			function onDocumentMouseMove(event) {
 
+			function onDocumentMouseMove( event ) {
 
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 
 				mouseY = ( event.clientY - windowHalfY ) * 10;
 
@@ -126,8 +126,8 @@
 
 					ry = Math.sin( time * 0.3 ) * 0.5,
 
 					rz = Math.sin( time * 0.2 ) * 0.5;
 
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				camera.lookAt( scene.position );

+ 16 - 15
examples/webgl_geometry_hierarchy2.html
View File 

@@ -21,9 +21,7 @@
 
 
 		<script>
 
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
+			var camera, scene, renderer, stats;
 
 
 			var geometry, root;
 
 
@@ -32,23 +30,18 @@
 
 			var windowHalfX = window.innerWidth / 2;
 
 			var windowHalfY = window.innerHeight / 2;
 
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 15000 );
 
 				camera.position.z = 500;
 
 
 				scene = new THREE.Scene();
 
 				scene.background = new THREE.Color( 0xffffff );
 
 
-				var geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
+				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
 				var material = new THREE.MeshNormalMaterial();
 
 
 				root = new THREE.Mesh( geometry, material );
 
@@ -127,13 +120,21 @@
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				//
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
+
 
+				//
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 
 				//
 
 
@@ -153,7 +154,7 @@
 
 
 			}
 
 
-			function onDocumentMouseMove(event) {
 
+			function onDocumentMouseMove( event ) {
 
 
 				mouseX = ( event.clientX - windowHalfX ) * 10;
 
 				mouseY = ( event.clientY - windowHalfY ) * 10;
 
@@ -179,8 +180,8 @@
 
 				var ry = Math.sin( time * 0.3 ) * 0.1;
 
 				var rz = Math.sin( time * 0.2 ) * 0.1;
 
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
 
 				camera.lookAt( scene.position );

+ 21 - 30
examples/webgl_geometry_normals.html
View File 

@@ -33,10 +33,6 @@
 
 		<div id="container"></div>
 
 		<div id="info">
 
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
 
-			<p>
 
-				<span>Yellow Arrows: Face Normals</span><br>
 
-				<span>Red Arrows: Vertex Normals</span>
 
-			</p>
 
 		</div>
 
 
 		<script src="../build/three.js"></script>
 
@@ -51,18 +47,16 @@
 
 			var mesh, geometry;
 
 
 			var geometries = [
 
-
 
-				{ type: 'BoxGeometry', geometry: new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ) },
 
-				{ type: 'CircleGeometry', geometry: new THREE.CircleGeometry( 200, 32 ) },
 
-				{ type: 'CylinderGeometry', geometry: new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ) } ,
 
-				{ type: 'IcosahedronGeometry', geometry: new THREE.IcosahedronGeometry( 100, 1 ) },
 
-				{ type: 'OctahedronGeometry', geometry: new THREE.OctahedronGeometry( 200, 0 ) },
 
-				{ type: 'PlaneGeometry', geometry: new THREE.PlaneGeometry( 200, 200, 4, 4 ) },
 
-				{ type: 'RingGeometry', geometry: new THREE.RingGeometry( 32, 64, 16 ) },
 
-				{ type: 'SphereGeometry', geometry: new THREE.SphereGeometry( 100, 12, 12 ) },
 
-				{ type: 'TorusGeometry', geometry: new THREE.TorusGeometry( 64, 16, 12, 12 ) },
 
-				{ type: 'TorusKnotGeometry', geometry: new THREE.TorusKnotGeometry( 64, 16 ) }
 
-
 
+				new THREE.BoxBufferGeometry( 200, 200, 200, 2, 2, 2 ),
 
+				new THREE.CircleBufferGeometry( 200, 32 ),
 
+				new THREE.CylinderBufferGeometry( 75, 75, 200, 8, 8 ),
 
+				new THREE.IcosahedronBufferGeometry( 100, 1 ),
 
+				new THREE.OctahedronBufferGeometry( 200, 0 ),
 
+				new THREE.PlaneBufferGeometry( 200, 200, 4, 4 ),
 
+				new THREE.RingBufferGeometry( 32, 64, 16 ),
 
+				new THREE.SphereBufferGeometry( 100, 12, 12 ),
 
+				new THREE.TorusBufferGeometry( 64, 16, 12, 12 ),
 
+				new THREE.TorusKnotBufferGeometry( 64, 16 )
 
 			];
 
 
 			var options = {
 
@@ -83,7 +77,7 @@
 
 
 				}
 
 
-				geometry = geometries[ options.Geometry ].geometry;
 
+				geometry = geometries[ options.Geometry ];
 
 
 				// scale geometry to a uniform size
 
 
@@ -95,9 +89,6 @@
 
 				mesh = new THREE.Mesh( geometry, material );
 
 				scene.add( mesh );
 
 
-				var faceNormalsHelper = new THREE.FaceNormalsHelper( mesh, 10 );
 
-				mesh.add( faceNormalsHelper );
 
-
 
 				var vertexNormalsHelper = new THREE.VertexNormalsHelper( mesh, 10 );
 
 				mesh.add( vertexNormalsHelper );
 
 
@@ -129,16 +120,16 @@
 
 				//
 
 
 				var geometries = {
 
-					BoxGeometry: 0,
 
-					CircleGeometry: 1,
 
-					CylinderGeometry: 2,
 
-					IcosahedronGeometry: 3,
 
-					OctahedronGeometry: 4,
 
-					PlaneGeometry: 5,
 
-					RingGeometry: 6,
 
-					SphereGeometry: 7,
 
-					TorusGeometry: 8,
 
-					TorusKnotGeometry: 9
 
+					BoxBufferGeometry: 0,
 
+					CircleBufferGeometry: 1,
 
+					CylinderBufferGeometry: 2,
 
+					IcosahedronBufferGeometry: 3,
 
+					OctahedronBufferGeometry: 4,
 
+					PlaneBufferGeometry: 5,
 
+					RingBufferGeometry: 6,
 
+					SphereBufferGeometry: 7,
 
+					TorusBufferGeometry: 8,
 
+					TorusKnotBufferGeometry: 9
 
 				};
 
 
 				gui = new dat.GUI( { width: 350 } );

+ 3 - 3
examples/webgl_lights_physical.html
View File 

@@ -111,7 +111,7 @@
 
 
 				scene = new THREE.Scene();
 
 
-				var bulbGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
 
+				var bulbGeometry = new THREE.SphereBufferGeometry( 0.02, 16, 8 );
 
 				bulbLight = new THREE.PointLight( 0xffee88, 1, 100, 2 );
 
 
 				bulbMat = new THREE.MeshStandardMaterial( {
 
@@ -204,14 +204,14 @@
 
 				floorMesh.rotation.x = -Math.PI / 2.0;
 
 				scene.add( floorMesh );
 
 
-				var ballGeometry = new THREE.SphereGeometry( 0.5, 32, 32 );
 
+				var ballGeometry = new THREE.SphereBufferGeometry( 0.5, 32, 32 );
 
 				var ballMesh = new THREE.Mesh( ballGeometry, ballMat );
 
 				ballMesh.position.set( 1, 0.5, 1 );
 
 				ballMesh.rotation.y = Math.PI;
 
 				ballMesh.castShadow = true;
 
 				scene.add( ballMesh );
 
 
-				var boxGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
 
+				var boxGeometry = new THREE.BoxBufferGeometry( 0.5, 0.5, 0.5 );
 
 				var boxMesh = new THREE.Mesh( boxGeometry, cubeMat );
 
 				boxMesh.position.set( -0.5, 0.25, -1 );
 
 				boxMesh.castShadow = true;

+ 8 - 7
examples/webgl_lights_pointlights.html
View File 

@@ -54,15 +54,13 @@
 
 
 			function init() {
 
 
-				var container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.z = 100;
 
 
 				scene = new THREE.Scene();
 
 
 				//model
 
+
 
 				var loader = new THREE.OBJLoader();
 
 				loader.load( 'models/obj/walt/WaltHead.obj', function ( obj ) {
 
 
@@ -73,9 +71,10 @@
 
 
 				} );
 
 
-				var sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
 
+				var sphere = new THREE.SphereBufferGeometry( 0.5, 16, 8 );
 
 
 				//lights
 
+
 
 				light1 = new THREE.PointLight( 0xff0040, 2, 50 );
 
 				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
 
 				scene.add( light1 );
 
@@ -93,14 +92,16 @@
 
 				scene.add( light4 );
 
 
 				//renderer
 
-				renderer = new THREE.WebGLRenderer();
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				//stats
 
+
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 3 - 2
examples/webgl_lights_spotlight.html
View File 

@@ -104,16 +104,17 @@
 
 
 				var material = new THREE.MeshPhongMaterial( { color: 0x808080, dithering: true } );
 
 
-				var geometry = new THREE.BoxGeometry( 2000, 1, 2000 );
 
+				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000 );
 
 
 				var mesh = new THREE.Mesh( geometry, material );
 
 				mesh.position.set( 0, - 1, 0 );
 
+				mesh.rotation.x = - Math.PI * 0.5;
 
 				mesh.receiveShadow = true;
 
 				scene.add( mesh );
 
 
 				var material = new THREE.MeshPhongMaterial( { color: 0x4080ff, dithering: true } );
 
 
-				var geometry = new THREE.BoxGeometry( 3, 1, 2 );
 
+				var geometry = new THREE.BoxBufferGeometry( 3, 1, 2 );
 
 
 				var mesh = new THREE.Mesh( geometry, material );
 
 				mesh.position.set( 40, 2, 0 );

+ 3 - 2
examples/webgl_lights_spotlights.html
View File 

@@ -61,10 +61,11 @@
 
 			var matFloor = new THREE.MeshPhongMaterial();
 
 			var matBox = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
 
 
-			var geoFloor = new THREE.BoxGeometry( 2000, 1, 2000 );
 
-			var geoBox = new THREE.BoxGeometry( 3, 1, 2 );
 
+			var geoFloor = new THREE.PlaneBufferGeometry( 2000, 2000 );
 
+			var geoBox = new THREE.BoxBufferGeometry( 3, 1, 2 );
 
 
 			var mshFloor = new THREE.Mesh( geoFloor, matFloor );
 
+			mshFloor.rotation.x = - Math.PI * 0.5;
 
 			var mshBox = new THREE.Mesh( geoBox, matBox );
 
 
 			var ambient = new THREE.AmbientLight( 0x111111 );