首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Examples: Removed some not so useful examples

Mr.doob 4 年之前
父节点
db6ee2547a
当前提交
ce4b420da0
共有 36 个文件被更改，包括 26 次插入 和 2340 次删除
分列视图 显示文件统计
  1. 1 2
      docs/api/en/extras/core/Font.html
  2. 1 2
      docs/api/en/lights/DirectionalLight.html
  3. 0 2
      docs/api/en/loaders/CubeTextureLoader.html
  4. 1 2
      docs/api/zh/extras/core/Font.html
  5. 1 2
      docs/api/zh/lights/DirectionalLight.html
  6. 0 2
      docs/api/zh/loaders/CubeTextureLoader.html
  7. 0 1
      docs/examples/en/renderers/CSS3DRenderer.html
  8. 0 1
      docs/examples/zh/renderers/CSS3DRenderer.html
  9. 0 172
      examples/css3d_panorama.html
  10. 0 125
      examples/css3d_panorama_deviceorientation.html
  11. 0 12
      examples/files.json
  12. 二进制
      examples/screenshots/css3d_panorama.jpg
  13. 二进制
      examples/screenshots/css3d_panorama_deviceorientation.jpg
  14. 二进制
      examples/screenshots/webgl_geometry_hierarchy.jpg
  15. 二进制
      examples/screenshots/webgl_geometry_hierarchy2.jpg
  16. 二进制
      examples/screenshots/webgl_geometry_minecraft_ao.jpg
  17. 二进制
      examples/screenshots/webgl_geometry_normals.jpg
  18. 二进制
      examples/screenshots/webgl_geometry_terrain.jpg
  19. 二进制
      examples/screenshots/webgl_geometry_terrain_fog.jpg
  20. 二进制
      examples/screenshots/webgl_materials_cubemap_balls_reflection.jpg
  21. 二进制
      examples/screenshots/webgl_materials_cubemap_balls_refraction.jpg
  22. 二进制
      examples/screenshots/webgl_materials_grass.jpg
  23. 二进制
      examples/screenshots/webgl_sandbox.jpg
  24. 二进制
      examples/screenshots/webgl_shaders_vector.jpg
  25. 0 4
      examples/tags.json
  26. 0 136
      examples/webgl_geometry_hierarchy.html
  27. 0 195
      examples/webgl_geometry_hierarchy2.html
  28. 0 356
      examples/webgl_geometry_minecraft_ao.html
  29. 0 163
      examples/webgl_geometry_normals.html
  30. 22 14
      examples/webgl_geometry_terrain.html
  31. 0 225
      examples/webgl_geometry_terrain_fog.html
  32. 0 135
      examples/webgl_materials_cubemap_balls_reflection.html
  33. 0 136
      examples/webgl_materials_cubemap_balls_refraction.html
  34. 0 132
      examples/webgl_materials_grass.html
  35. 0 194
      examples/webgl_sandbox.html
  36. 0 327
      examples/webgl_shaders_vector.html

+ 1 - 2
docs/api/en/extras/core/Font.html
查看文件 

@@ -18,8 +18,7 @@
 
 		<h2>Examples</h2>
 
 
 		<p>
 
-		[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
 
-		[example:webgl_shaders_vector vector / text ]<br/>
 
+		[example:webgl_geometry_text_shapes geometry / text / shapes ]
 
 		</p>
 
 
 		<h2>Constructor</h2>

+ 1 - 2
docs/api/en/lights/DirectionalLight.html
查看文件 

@@ -50,8 +50,7 @@
 
 			[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
 
 			[example:webgl_effects_stereo effects / stereo ]<br />
 
 			[example:webgl_geometry_extrude_splines geometry / extrude / splines ]<br />
 
-			[example:webgl_materials_bumpmap materials / bumpmap ]<br />
 
-			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection ]
 
+			[example:webgl_materials_bumpmap materials / bumpmap ]
 
 		</p>
 
 
 		<h2>Constructor</h2>

+ 0 - 2
docs/api/en/loaders/CubeTextureLoader.html
查看文件 

@@ -36,8 +36,6 @@ scene.background = new THREE.CubeTextureLoader()
 
 
 		<p>
 
 			[example:webgl_materials_cubemap materials / cubemap]<br />
 
-			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
 
-			[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
 
 			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
 
 			[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
 
 		</p>

+ 1 - 2
docs/api/zh/extras/core/Font.html
查看文件 

@@ -19,8 +19,7 @@
 
 		<h2>例子</h2>
 
 
 		<p>
 
-		[example:webgl_geometry_text_shapes geometry / text / shapes ]<br/>
 
-		[example:webgl_shaders_vector vector / text ]<br/>
 
+		[example:webgl_geometry_text_shapes geometry / text / shapes ]
 
 		</p>
 
 
 		<h2>构造函数</h2>

+ 1 - 2
docs/api/zh/lights/DirectionalLight.html
查看文件 

@@ -46,8 +46,7 @@
 
 			[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
 
 			[example:webgl_effects_stereo effects / stereo ]<br />
 
 			[example:webgl_geometry_extrude_splines geometry / extrude / splines ]<br />
 
-			[example:webgl_materials_bumpmap materials / bumpmap ]<br />
 
-			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection ]
 
+			[example:webgl_materials_bumpmap materials / bumpmap ]
 
 		</p>
 
 
 		<h2>构造器</h2>

+ 0 - 2
docs/api/zh/loaders/CubeTextureLoader.html
查看文件 

@@ -36,8 +36,6 @@ scene.background = new THREE.CubeTextureLoader()
 
 
 		<p>
 
 			[example:webgl_materials_cubemap materials / cubemap]<br />
 
-			[example:webgl_materials_cubemap_balls_reflection materials / cubemap / balls / reflection]<br />
 
-			[example:webgl_materials_cubemap_balls_refraction materials / cubemap / balls / refraction]<br />
 
 			[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
 
 			[example:webgl_materials_cubemap_refraction materials / cubemap / refraction]
 
 		</p>

+ 0 - 1
docs/examples/en/renderers/CSS3DRenderer.html
查看文件 

@@ -27,7 +27,6 @@
 
 		<p>
 
 			[example:css3d_molecules molecules]<br />
 
 			[example:css3d_orthographic orthographic camera]<br />
 
-			[example:css3d_panorama panorama]<br />
 
 			[example:css3d_periodictable periodictable]<br />
 
 			[example:css3d_sprites sprites]<br />
 
 		</p>

+ 0 - 1
docs/examples/zh/renderers/CSS3DRenderer.html
查看文件 

@@ -28,7 +28,6 @@
 
 		<p>
 
 			[example:css3d_molecules molecules]<br />
 
 			[example:css3d_orthographic orthographic camera]<br />
 
-			[example:css3d_panorama panorama]<br />
 
 			[example:css3d_periodictable periodictable]<br />
 
 			[example:css3d_sprites sprites]<br />
 
 		</p>

+ 0 - 172
examples/css3d_panorama.html
查看文件 

@@ -1,172 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-	<head>
 
-		<title>three.js css3d - panorama</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama demo. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-
 
-			let camera, scene, renderer;
 
-			const target = new THREE.Vector3();
 
-
 
-			let lon = 90, lat = 0;
 
-			let phi = 0, theta = 0;
 
-
 
-			let pointerX, pointerY;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				const sides = [
 
-					{
 
-						url: 'textures/cube/Bridge2/posx.jpg',
 
-						position: [ - 512, 0, 0 ],
 
-						rotation: [ 0, Math.PI / 2, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negx.jpg',
 
-						position: [ 512, 0, 0 ],
 
-						rotation: [ 0, - Math.PI / 2, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/posy.jpg',
 
-						position: [ 0, 512, 0 ],
 
-						rotation: [ Math.PI / 2, 0, Math.PI ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negy.jpg',
 
-						position: [ 0, - 512, 0 ],
 
-						rotation: [ - Math.PI / 2, 0, Math.PI ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/posz.jpg',
 
-						position: [ 0, 0, 512 ],
 
-						rotation: [ 0, Math.PI, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negz.jpg',
 
-						position: [ 0, 0, - 512 ],
 
-						rotation: [ 0, 0, 0 ]
 
-					}
 
-				];
 
-
 
-				for ( let i = 0; i < sides.length; i ++ ) {
 
-
 
-					const side = sides[ i ];
 
-
 
-					const element = document.createElement( 'img' );
 
-					element.draggable = false;
 
-					element.width = 1026; // 2 pixels extra to close the gap.
 
-					element.src = side.url;
 
-
 
-					const object = new CSS3DObject( element );
 
-					object.position.fromArray( side.position );
 
-					object.rotation.fromArray( side.rotation );
 
-					scene.add( object );
 
-
 
-				}
 
-
 
-				renderer = new CSS3DRenderer();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				document.body.style.touchAction = 'none';
 
-				document.body.addEventListener( 'pointerdown', onPointerDown );
 
-
 
-				document.addEventListener( 'wheel', onDocumentMouseWheel );
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onPointerDown( event ) {
 
-
 
-				if ( event.isPrimary === false ) return;
 
-
 
-				pointerX = event.clientX;
 
-				pointerY = event.clientY;
 
-
 
-				document.addEventListener( 'pointermove', onPointerMove );
 
-				document.addEventListener( 'pointerup', onPointerUp );
 
-
 
-			}
 
-
 
-			function onPointerMove( event ) {
 
-
 
-				if ( event.isPrimary === false ) return;
 
-
 
-				lon -= ( event.clientX - pointerX ) * 0.1;
 
-				lat += ( event.clientY - pointerY ) * 0.1;
 
-
 
-				pointerX = event.clientX;
 
-				pointerY = event.clientY;
 
-
 
-			}
 
-
 
-			function onPointerUp() {
 
-
 
-				if ( event.isPrimary === false ) return;
 
-
 
-				document.removeEventListener( 'pointermove', onPointerMove );
 
-				document.removeEventListener( 'pointerup', onPointerUp );
 
-
 
-			}
 
-
 
-			function onDocumentMouseWheel( event ) {
 
-
 
-				const fov = camera.fov + event.deltaY * 0.05;
 
-
 
-				camera.fov = THREE.MathUtils.clamp( fov, 10, 75 );
 
-
 
-				camera.updateProjectionMatrix();
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				lon += 0.1;
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.MathUtils.degToRad( 90 - lat );
 
-				theta = THREE.MathUtils.degToRad( lon );
 
-
 
-				target.x = Math.sin( phi ) * Math.cos( theta );
 
-				target.y = Math.cos( phi );
 
-				target.z = Math.sin( phi ) * Math.sin( theta );
 
-
 
-				camera.lookAt( target );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 125
examples/css3d_panorama_deviceorientation.html
查看文件 

@@ -1,125 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-	<head>
 
-		<title>three.js css3d - panorama - device orientation</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-		<div id="overlay">
 
-			<button id="startButton">Start Demo</button>
 
-		</div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 
-			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
-
 
-			let camera, scene, renderer;
 
-			let controls;
 
-
 
-			const startButton = document.getElementById( 'startButton' );
 
-			startButton.addEventListener( 'click', function () {
 
-
 
-				init();
 
-				animate();
 
-
 
-			} );
 
-
 
-			function init() {
 
-
 
-				const overlay = document.getElementById( 'overlay' );
 
-				overlay.remove();
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
-
 
-				controls = new DeviceOrientationControls( camera );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				const sides = [
 
-					{
 
-						url: 'textures/cube/Bridge2/posx.jpg',
 
-						position: [ - 512, 0, 0 ],
 
-						rotation: [ 0, Math.PI / 2, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negx.jpg',
 
-						position: [ 512, 0, 0 ],
 
-						rotation: [ 0, - Math.PI / 2, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/posy.jpg',
 
-						position: [ 0, 512, 0 ],
 
-						rotation: [ Math.PI / 2, 0, Math.PI ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negy.jpg',
 
-						position: [ 0, - 512, 0 ],
 
-						rotation: [ - Math.PI / 2, 0, Math.PI ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/posz.jpg',
 
-						position: [ 0, 0, 512 ],
 
-						rotation: [ 0, Math.PI, 0 ]
 
-					},
 
-					{
 
-						url: 'textures/cube/Bridge2/negz.jpg',
 
-						position: [ 0, 0, - 512 ],
 
-						rotation: [ 0, 0, 0 ]
 
-					}
 
-				];
 
-
 
-				const cube = new THREE.Object3D();
 
-				scene.add( cube );
 
-
 
-				for ( let i = 0; i < sides.length; i ++ ) {
 
-
 
-					const side = sides[ i ];
 
-
 
-					const element = document.createElement( 'img' );
 
-					element.width = 1026; // 2 pixels extra to close the gap.
 
-					element.src = side.url;
 
-
 
-					const object = new CSS3DObject( element );
 
-					object.position.fromArray( side.position );
 
-					object.rotation.fromArray( side.rotation );
 
-					cube.add( object );
 
-
 
-				}
 
-
 
-				renderer = new CSS3DRenderer();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				controls.update();
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 12
examples/files.json
查看文件 

@@ -32,17 +32,12 @@
 
 		"webgl_geometry_extrude_shapes",
 
 		"webgl_geometry_extrude_shapes2",
 
 		"webgl_geometry_extrude_splines",
 
-		"webgl_geometry_hierarchy",
 
-		"webgl_geometry_hierarchy2",
 
 		"webgl_geometry_minecraft",
 
-		"webgl_geometry_minecraft_ao",
 
-		"webgl_geometry_normals",
 
 		"webgl_geometry_nurbs",
 
 		"webgl_geometry_shapes",
 
 		"webgl_geometry_spline_editor",
 
 		"webgl_geometry_teapot",
 
 		"webgl_geometry_terrain",
 
-		"webgl_geometry_terrain_fog",
 
 		"webgl_geometry_terrain_raycast",
 
 		"webgl_geometry_text",
 
 		"webgl_geometry_text_shapes",
 
@@ -140,8 +135,6 @@
 
 		"webgl_materials_car",
 
 		"webgl_materials_channels",
 
 		"webgl_materials_cubemap",
 
-		"webgl_materials_cubemap_balls_reflection",
 
-		"webgl_materials_cubemap_balls_refraction",
 
 		"webgl_materials_cubemap_dynamic",
 
 		"webgl_materials_cubemap_refraction",
 
 		"webgl_materials_cubemap_mipmaps",
 
@@ -151,7 +144,6 @@
 
 		"webgl_materials_envmaps_exr",
 
 		"webgl_materials_envmaps_hdr",
 
 		"webgl_materials_envmaps_parallax",
 
-		"webgl_materials_grass",
 
 		"webgl_materials_lightmap",
 
 		"webgl_materials_matcap",
 
 		"webgl_materials_normalmap",
 
@@ -211,7 +203,6 @@
 
 		"webgl_read_float_buffer",
 
 		"webgl_refraction",
 
 		"webgl_rtt",
 
-		"webgl_sandbox",
 
 		"webgl_shader",
 
 		"webgl_shader_lava",
 
 		"webgl_shader2",
 
@@ -219,7 +210,6 @@
 
 		"webgl_shaders_ocean2",
 
 		"webgl_shaders_sky",
 
 		"webgl_shaders_tonemapping",
 
-		"webgl_shaders_vector",
 
 		"webgl_shading_physical",
 
 		"webgl_shadow_contact",
 
 		"webgl_shadowmap",
 
@@ -394,8 +384,6 @@
 
 	"css3d": [
 
 		"css3d_molecules",
 
 		"css3d_orthographic",
 
-		"css3d_panorama",
 
-		"css3d_panorama_deviceorientation",
 
 		"css3d_periodictable",
 
 		"css3d_sandbox",
 
 		"css3d_sprites",

二进制
examples/screenshots/css3d_panorama.jpg
查看文件


二进制
examples/screenshots/css3d_panorama_deviceorientation.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_hierarchy.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_hierarchy2.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_minecraft_ao.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_normals.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_terrain.jpg
查看文件


二进制
examples/screenshots/webgl_geometry_terrain_fog.jpg
查看文件


二进制
examples/screenshots/webgl_materials_cubemap_balls_reflection.jpg
查看文件


二进制
examples/screenshots/webgl_materials_cubemap_balls_refraction.jpg
查看文件


二进制
examples/screenshots/webgl_materials_grass.jpg
查看文件


二进制
examples/screenshots/webgl_sandbox.jpg
查看文件


二进制
examples/screenshots/webgl_shaders_vector.jpg
查看文件


+ 0 - 4
examples/tags.json
查看文件 

@@ -8,9 +8,6 @@
 
 	"webgl_depth_texture": [ "renderTarget" ],
 
 	"webgl_framebuffer_texture": [ "renderTarget" ],
 
 	"webgl_geometry_colors_lookuptable": [ "vertex" ],
 
-	"webgl_geometry_hierarchy": [ "group" ],
 
-	"webgl_geometry_hierarchy2": [ "scene graph" ],
 
-	"webgl_geometry_minecraft_ao": [ "ambient occlusion" ],
 
 	"webgl_geometry_nurbs": [ "curve", "surface" ],
 
 	"webgl_geometry_spline_editor": [ "curve" ],
 
 	"webgl_geometry_text": [ "font" ],
 
@@ -67,7 +64,6 @@
 
 	"webgl_shaders_ocean2": [ "water" ],
 
 	"webgl_shaders_sky": [ "sun" ],
 
 	"webgl_shaders_tonemapping": [ "hrd" ],
 
-	"webgl_shaders_vector": [ "font" ],
 
 	"webgl_shading_physical": [ "pbr" ],
 
 	"webgl_shadow_contact": [ "onBeforeCompile", "soft" ],
 
 	"webgl_shadowmap_viewer": [ "directional", "spot" ],

+ 0 - 136
examples/webgl_geometry_hierarchy.html
查看文件 

@@ -1,136 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - geometry hierarchy</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			let camera, scene, renderer, stats, group;
 
-
 
-			let mouseX = 0, mouseY = 0;
 
-
 
-			let windowHalfX = window.innerWidth / 2;
 
-			let windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-				scene.fog = new THREE.Fog( 0xffffff, 1, 10000 );
 
-
 
-				const geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				const material = new THREE.MeshNormalMaterial();
 
-
 
-				group = new THREE.Group();
 
-
 
-				for ( let i = 0; i < 1000; i ++ ) {
 
-
 
-					const mesh = new THREE.Mesh( geometry, material );
 
-					mesh.position.x = Math.random() * 2000 - 1000;
 
-					mesh.position.y = Math.random() * 2000 - 1000;
 
-					mesh.position.z = Math.random() * 2000 - 1000;
 
-
 
-					mesh.rotation.x = Math.random() * 2 * Math.PI;
 
-					mesh.rotation.y = Math.random() * 2 * Math.PI;
 
-
 
-					mesh.matrixAutoUpdate = false;
 
-					mesh.updateMatrix();
 
-
 
-					group.add( mesh );
 
-
 
-				}
 
-
 
-				scene.add( group );
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX ) * 10;
 
-				mouseY = ( event.clientY - windowHalfY ) * 10;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				const time = Date.now() * 0.001;
 
-
 
-				const rx = Math.sin( time * 0.7 ) * 0.5,
 
-					ry = Math.sin( time * 0.3 ) * 0.5,
 
-					rz = Math.sin( time * 0.2 ) * 0.5;
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				group.rotation.x = rx;
 
-				group.rotation.y = ry;
 
-				group.rotation.z = rz;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 195
examples/webgl_geometry_hierarchy2.html
查看文件 

@@ -1,195 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - geometry hierarchy 2</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			let camera, scene, renderer, stats, root;
 
-
 
-			let mouseX = 0, mouseY = 0;
 
-
 
-			let windowHalfX = window.innerWidth / 2;
 
-			let windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				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 );
 
-
 
-				const geometry = new THREE.BoxGeometry( 100, 100, 100 );
 
-				const material = new THREE.MeshNormalMaterial();
 
-
 
-				root = new THREE.Mesh( geometry, material );
 
-				root.position.x = 1000;
 
-				scene.add( root );
 
-
 
-				const amount = 200;
 
-				let object, parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.x = 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.x = - 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.y = - 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.y = 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.z = - 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				parent = root;
 
-
 
-				for ( let i = 0; i < amount; i ++ ) {
 
-
 
-					object = new THREE.Mesh( geometry, material );
 
-					object.position.z = 100;
 
-
 
-					parent.add( object );
 
-					parent = object;
 
-
 
-				}
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX ) * 10;
 
-				mouseY = ( event.clientY - windowHalfY ) * 10;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				const time = Date.now() * 0.001 + 10000;
 
-
 
-				const rx = Math.sin( time * 0.7 ) * 0.2;
 
-				const ry = Math.sin( time * 0.3 ) * 0.1;
 
-				const rz = Math.sin( time * 0.2 ) * 0.1;
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				root.traverse( function ( object ) {
 
-
 
-					object.rotation.x = rx;
 
-					object.rotation.y = ry;
 
-					object.rotation.z = rz;
 
-
 
-				} );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 356
examples/webgl_geometry_minecraft_ao.html
查看文件 

@@ -1,356 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - geometry - minecraft - ao</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-		<style>
 
-			body {
 
-				background-color: #fff;
 
-				color: #61443e;
 
-			}
 
-			a {
 
-				color: #a06851;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - <a href="http://www.minecraft.net/" target="_blank" rel="noopener">minecraft</a> demo [ambient occlusion]. featuring <a href="http://painterlypack.net/" target="_blank" rel="noopener">painterly pack</a><br />(left click: forward, right click: backward)
 
-		</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
-			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-			import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';
 
-
 
-			let container, stats;
 
-
 
-			let camera, controls, scene, renderer;
 
-
 
-			const worldWidth = 200, worldDepth = 200;
 
-			const worldHalfWidth = worldWidth / 2;
 
-			const worldHalfDepth = worldDepth / 2;
 
-			const data = generateHeight( worldWidth, worldDepth );
 
-
 
-			const clock = new THREE.Clock();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 20000 );
 
-				camera.position.y = getY( worldHalfWidth, worldHalfDepth ) * 100 + 100;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-				scene.fog = new THREE.FogExp2( 0xffffff, 0.00015 );
 
-
 
-				// sides
 
-
 
-				const light = new THREE.Color( 0xffffff );
 
-				const shadow = new THREE.Color( 0x505050 );
 
-
 
-				const matrix = new THREE.Matrix4();
 
-
 
-				const pxGeometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				pxGeometry.setAttribute( 'color', pxGeometry.attributes.position.clone() );
 
-				pxGeometry.attributes.color.copyColorsArray( [ light, shadow, light, shadow, shadow, light ] );
 
-				pxGeometry.attributes.uv.array[ 1 ] = 0.5;
 
-				pxGeometry.attributes.uv.array[ 5 ] = 0.5;
 
-				pxGeometry.attributes.uv.array[ 11 ] = 0.5;
 
-				pxGeometry.rotateY( Math.PI / 2 );
 
-				pxGeometry.translate( 50, 0, 0 );
 
-
 
-				const nxGeometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				nxGeometry.setAttribute( 'color', nxGeometry.attributes.position.clone() );
 
-				nxGeometry.attributes.color.copyColorsArray( [ light, shadow, light, shadow, shadow, light ] );
 
-				nxGeometry.attributes.uv.array[ 1 ] = 0.5;
 
-				nxGeometry.attributes.uv.array[ 5 ] = 0.5;
 
-				nxGeometry.attributes.uv.array[ 11 ] = 0.5;
 
-				nxGeometry.rotateY( - Math.PI / 2 );
 
-				nxGeometry.translate( - 50, 0, 0 );
 
-
 
-				const pyGeometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				pyGeometry.setAttribute( 'color', pyGeometry.attributes.position.clone() );
 
-				pyGeometry.attributes.color.copyColorsArray( [ light, light, light, light, light, light ] );
 
-				pyGeometry.attributes.uv.array[ 3 ] = 0.5;
 
-				pyGeometry.attributes.uv.array[ 7 ] = 0.5;
 
-				pyGeometry.attributes.uv.array[ 9 ] = 0.5;
 
-				pyGeometry.rotateX( - Math.PI / 2 );
 
-				pyGeometry.translate( 0, 50, 0 );
 
-
 
-				const py2Geometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				py2Geometry.setAttribute( 'color', py2Geometry.attributes.position.clone() );
 
-				py2Geometry.attributes.color.copyColorsArray( [ light, light, light, light, light, light ] );
 
-				py2Geometry.attributes.uv.array[ 3 ] = 0.5;
 
-				py2Geometry.attributes.uv.array[ 7 ] = 0.5;
 
-				py2Geometry.attributes.uv.array[ 9 ] = 0.5;
 
-				py2Geometry.rotateX( - Math.PI / 2 );
 
-				py2Geometry.rotateY( Math.PI / 2 );
 
-				py2Geometry.translate( 0, 50, 0 );
 
-
 
-				const pzGeometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				pzGeometry.setAttribute( 'color', pzGeometry.attributes.position.clone() );
 
-				pzGeometry.attributes.color.copyColorsArray( [ light, shadow, light, shadow, shadow, light ] );
 
-				pzGeometry.attributes.uv.array[ 1 ] = 0.5;
 
-				pzGeometry.attributes.uv.array[ 5 ] = 0.5;
 
-				pzGeometry.attributes.uv.array[ 11 ] = 0.5;
 
-				pzGeometry.translate( 0, 0, 50 );
 
-
 
-				const nzGeometry = new THREE.PlaneGeometry( 100, 100 ).toNonIndexed();
 
-				nzGeometry.setAttribute( 'color', nzGeometry.attributes.position.clone() );
 
-				nzGeometry.attributes.color.copyColorsArray( [ light, shadow, light, shadow, shadow, light ] );
 
-				nzGeometry.attributes.uv.array[ 1 ] = 0.5;
 
-				nzGeometry.attributes.uv.array[ 5 ] = 0.5;
 
-				nzGeometry.attributes.uv.array[ 11 ] = 0.5;
 
-				nzGeometry.rotateY( Math.PI );
 
-				nzGeometry.translate( 0, 0, - 50 );
 
-
 
-				//
 
-
 
-				const geometries = [];
 
-
 
-				for ( let z = 0; z < worldDepth; z ++ ) {
 
-
 
-					for ( let x = 0; x < worldWidth; x ++ ) {
 
-
 
-						const h = getY( x, z );
 
-
 
-						matrix.makeTranslation(
 
-							x * 100 - worldHalfWidth * 100,
 
-							h * 100,
 
-							z * 100 - worldHalfDepth * 100
 
-						);
 
-
 
-						const px = getY( x + 1, z );
 
-						const nx = getY( x - 1, z );
 
-						const pz = getY( x, z + 1 );
 
-						const nz = getY( x, z - 1 );
 
-
 
-						const pxpz = getY( x + 1, z + 1 );
 
-						const nxpz = getY( x - 1, z + 1 );
 
-						const pxnz = getY( x + 1, z - 1 );
 
-						const nxnz = getY( x - 1, z - 1 );
 
-
 
-						const a = nx > h || nz > h || nxnz > h ? 0 : 1;
 
-						const b = nx > h || pz > h || nxpz > h ? 0 : 1;
 
-						const c = px > h || pz > h || pxpz > h ? 0 : 1;
 
-						const d = px > h || nz > h || pxnz > h ? 0 : 1;
 
-
 
-						if ( a + c > b + d ) {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = b === 0 ? shadow : light;
 
-							colors[ 1 ] = c === 0 ? shadow : light;
 
-							colors[ 2 ] = a === 0 ? shadow : light;
 
-							colors[ 3 ] = c === 0 ? shadow : light;
 
-							colors[ 4 ] = d === 0 ? shadow : light;
 
-							colors[ 5 ] = a === 0 ? shadow : light;
 
-
 
-							py2Geometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( py2Geometry.clone().applyMatrix4( matrix ) );
 
-
 
-						} else {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = a === 0 ? shadow : light;
 
-							colors[ 1 ] = b === 0 ? shadow : light;
 
-							colors[ 2 ] = d === 0 ? shadow : light;
 
-							colors[ 3 ] = b === 0 ? shadow : light;
 
-							colors[ 4 ] = c === 0 ? shadow : light;
 
-							colors[ 5 ] = d === 0 ? shadow : light;
 
-
 
-							pyGeometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( pyGeometry.clone().applyMatrix4( matrix ) );
 
-
 
-						}
 
-
 
-						if ( ( px != h && px != h + 1 ) || x == 0 ) {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = pxpz > px && x > 0 ? shadow : light;
 
-							colors[ 1 ] = shadow;
 
-							colors[ 2 ] = pxnz > px && x > 0 ? shadow : light;
 
-							colors[ 3 ] = shadow;
 
-							colors[ 4 ] = shadow;
 
-							colors[ 5 ] = pxnz > px && x > 0 ? shadow : light;
 
-
 
-							pxGeometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( pxGeometry.clone().applyMatrix4( matrix ) );
 
-
 
-						}
 
-
 
-						if ( ( nx != h && nx != h + 1 ) || x == worldWidth - 1 ) {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = nxnz > nx && x < worldWidth - 1 ? shadow : light;
 
-							colors[ 1 ] = shadow;
 
-							colors[ 2 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
-							colors[ 3 ] = shadow;
 
-							colors[ 4 ] = shadow;
 
-							colors[ 5 ] = nxpz > nx && x < worldWidth - 1 ? shadow : light;
 
-
 
-							nxGeometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( nxGeometry.clone().applyMatrix4( matrix ) );
 
-
 
-						}
 
-
 
-						if ( ( pz != h && pz != h + 1 ) || z == worldDepth - 1 ) {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = nxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-							colors[ 1 ] = shadow;
 
-							colors[ 2 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-							colors[ 3 ] = shadow;
 
-							colors[ 4 ] = shadow;
 
-							colors[ 5 ] = pxpz > pz && z < worldDepth - 1 ? shadow : light;
 
-
 
-							pzGeometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( pzGeometry.clone().applyMatrix4( matrix ) );
 
-
 
-						}
 
-
 
-						if ( ( nz != h && nz != h + 1 ) || z == 0 ) {
 
-
 
-							const colors = [];
 
-
 
-							colors[ 0 ] = pxnz > nz && z > 0 ? shadow : light;
 
-							colors[ 1 ] = shadow;
 
-							colors[ 2 ] = nxnz > nz && z > 0 ? shadow : light;
 
-							colors[ 3 ] = shadow;
 
-							colors[ 4 ] = shadow;
 
-							colors[ 5 ] = nxnz > nz && z > 0 ? shadow : light;
 
-
 
-							nzGeometry.attributes.color.copyColorsArray( colors );
 
-							geometries.push( nzGeometry.clone().applyMatrix4( matrix ) );
 
-
 
-						}
 
-
 
-					}
 
-
 
-				}
 
-
 
-				const geometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
 
-				geometry.computeBoundingSphere();
 
-
 
-				const texture = new THREE.TextureLoader().load( 'textures/minecraft/atlas.png' );
 
-				texture.magFilter = THREE.NearestFilter;
 
-
 
-				const mesh = new THREE.Mesh(
 
-					geometry,
 
-					new THREE.MeshLambertMaterial( { map: texture, vertexColors: true, side: THREE.DoubleSide } )
 
-				);
 
-				scene.add( mesh );
 
-
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc );
 
-				scene.add( ambientLight );
 
-
 
-				const directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
 
-				directionalLight.position.set( 1, 1, 0.5 ).normalize();
 
-				scene.add( directionalLight );
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				controls = new FirstPersonControls( camera, renderer.domElement );
 
-
 
-				controls.movementSpeed = 1000;
 
-				controls.lookSpeed = 0.125;
 
-				controls.lookVertical = true;
 
-				controls.constrainVertical = true;
 
-				controls.verticalMin = 1.1;
 
-				controls.verticalMax = 2.2;
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				controls.handleResize();
 
-
 
-			}
 
-
 
-			function generateHeight( width, height ) {
 
-
 
-				const data = [], perlin = new ImprovedNoise(),
 
-					size = width * height, z = Math.random() * 100;
 
-
 
-				let quality = 2;
 
-
 
-				for ( let j = 0; j < 4; j ++ ) {
 
-
 
-					if ( j == 0 ) for ( let i = 0; i < size; i ++ ) data[ i ] = 0;
 
-
 
-					for ( let i = 0; i < size; i ++ ) {
 
-
 
-						const x = i % width, y = ( i / width ) | 0;
 
-						data[ i ] += perlin.noise( x / quality, y / quality, z ) * quality;
 
-
 
-					}
 
-
 
-					quality *= 4;
 
-
 
-				}
 
-
 
-				return data;
 
-
 
-			}
 
-
 
-			function getY( x, z ) {
 
-
 
-				return ( data[ x + z * worldWidth ] * 0.2 ) | 0;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				controls.update( clock.getDelta() );
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 163
examples/webgl_geometry_normals.html
查看文件 

@@ -1,163 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - geometry - normals</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - geometry - normals</a>
 
-		</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-			import { GUI } from './jsm/libs/dat.gui.module.js';
 
-
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import { VertexNormalsHelper } from './jsm/helpers/VertexNormalsHelper.js';
 
-
 
-			let container, stats, gui;
 
-			let camera, scene, renderer;
 
-			let mesh, geometry;
 
-
 
-			const geometries = [
 
-				new THREE.BoxGeometry( 200, 200, 200, 2, 2, 2 ),
 
-				new THREE.CircleGeometry( 200, 32 ),
 
-				new THREE.CylinderGeometry( 75, 75, 200, 8, 8 ),
 
-				new THREE.IcosahedronGeometry( 100, 1 ),
 
-				new THREE.OctahedronGeometry( 200, 0 ),
 
-				new THREE.PlaneGeometry( 200, 200, 4, 4 ),
 
-				new THREE.RingGeometry( 32, 64, 16 ),
 
-				new THREE.SphereGeometry( 100, 12, 12 ),
 
-				new THREE.TorusGeometry( 64, 16, 12, 12 ),
 
-				new THREE.TorusKnotGeometry( 64, 16 )
 
-			];
 
-
 
-			const options = {
 
-				Geometry: 0
 
-			};
 
-
 
-			const material = new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } );
 
-
 
-			init();
 
-			animate();
 
-
 
-			function addMesh() {
 
-
 
-				if ( mesh !== undefined ) {
 
-
 
-					scene.remove( mesh );
 
-					geometry.dispose();
 
-
 
-				}
 
-
 
-				geometry = geometries[ options.Geometry ];
 
-
 
-				// scale geometry to a uniform size
 
-
 
-				geometry.computeBoundingSphere();
 
-
 
-				const scaleFactor = 160 / geometry.boundingSphere.radius;
 
-				geometry.scale( scaleFactor, scaleFactor, scaleFactor );
 
-
 
-				mesh = new THREE.Mesh( geometry, material );
 
-				scene.add( mesh );
 
-
 
-				const vertexNormalsHelper = new VertexNormalsHelper( mesh, 10 );
 
-				mesh.add( vertexNormalsHelper );
 
-
 
-			}
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				addMesh();
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				const geometries = {
 
-					BoxGeometry: 0,
 
-					CircleGeometry: 1,
 
-					CylinderGeometry: 2,
 
-					IcosahedronGeometry: 3,
 
-					OctahedronGeometry: 4,
 
-					PlaneGeometry: 5,
 
-					RingGeometry: 6,
 
-					SphereGeometry: 7,
 
-					TorusGeometry: 8,
 
-					TorusKnotGeometry: 9
 
-				};
 
-
 
-				gui = new GUI( { width: 350 } );
 
-				gui.add( options, 'Geometry', geometries ).onChange( function () {
 
-
 
-					addMesh();
 
-
 
-				} );
 
-
 
-				//
 
-
 
-				const controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.enableZoom = false;
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 22 - 14
examples/webgl_geometry_terrain.html
查看文件 

@@ -1,13 +1,13 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js webgl - geometry - terrain</title>
 
+		<title>three.js webgl - geometry - terrain + fog</title>
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<link type="text/css" rel="stylesheet" href="main.css">
 
 		<style>
 
 			body {
 
-				background-color: #bfd1e5;
 
+				background-color: #efd1b5;
 
 				color: #61443e;
 
 			}
 
 			a {
 
@@ -18,7 +18,7 @@
 
 	<body>
 
 
 		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain demo<br />(left click: forward, right click: backward)</div>
 
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
 
 
 		<script type="module">
 
 
@@ -30,14 +30,10 @@
 
 			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
 
 			let container, stats;
 
-
 
 			let camera, controls, scene, renderer;
 
-
 
 			let mesh, texture;
 
 
-			const worldWidth = 256, worldDepth = 256,
 
-				worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
 
-
 
+			const worldWidth = 256, worldDepth = 256;
 
 			const clock = new THREE.Clock();
 
 
 			init();
 
@@ -47,14 +43,16 @@
 
 
 				container = document.getElementById( 'container' );
 
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
 
 				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xbfd1e5 );
 
+				scene.background = new THREE.Color( 0xefd1b5 );
 
+				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
 
 				const data = generateHeight( worldWidth, worldDepth );
 
 
-				camera.position.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] * 10 + 500;
 
+				camera.position.set( 100, 800, - 800 );
 
+				camera.lookAt( - 100, 810, - 800 );
 
 
 				const geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 
 				geometry.rotateX( - Math.PI / 2 );
 
@@ -80,12 +78,13 @@
 
 				container.appendChild( renderer.domElement );
 
 
 				controls = new FirstPersonControls( camera, renderer.domElement );
 
-				controls.movementSpeed = 1000;
 
+				controls.movementSpeed = 150;
 
 				controls.lookSpeed = 0.1;
 
 
 				stats = new Stats();
 
 				container.appendChild( stats.dom );
 
 
+
 
 				//
 
 
 				window.addEventListener( 'resize', onWindowResize );
 
@@ -105,8 +104,16 @@
 
 
 			function generateHeight( width, height ) {
 
 
-				const size = width * height, data = new Uint8Array( size ),
 
-					perlin = new ImprovedNoise(), z = Math.random() * 100;
 
+				let seed = Math.PI / 4;
 
+				window.Math.random = function () {
 
+
 
+					const x = Math.sin( seed ++ ) * 10000;
 
+					return x - Math.floor( x );
 
+
 
+				};
 
+
 
+				const size = width * height, data = new Uint8Array( size );
 
+				const perlin = new ImprovedNoise(), z = Math.random() * 100;
 
 
 				let quality = 1;
 
 
@@ -204,6 +211,7 @@
 
 
 			}
 
 
+
 
 			function render() {
 
 
 				controls.update( clock.getDelta() );

+ 0 - 225
examples/webgl_geometry_terrain_fog.html
查看文件 

@@ -1,225 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - geometry - terrain + fog</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-		<style>
 
-			body {
 
-				background-color: #efd1b5;
 
-				color: #61443e;
 
-			}
 
-			a {
 
-				color: #a06851;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl terrain + fog demo <br />(left click: forward, right click: backward)</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
 
-			import { ImprovedNoise } from './jsm/math/ImprovedNoise.js';
 
-
 
-			let container, stats;
 
-			let camera, controls, scene, renderer;
 
-			let mesh, texture;
 
-
 
-			const worldWidth = 256, worldDepth = 256;
 
-			const clock = new THREE.Clock();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xefd1b5 );
 
-				scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 );
 
-
 
-				const data = generateHeight( worldWidth, worldDepth );
 
-
 
-				camera.position.set( 100, 800, - 800 );
 
-				camera.lookAt( - 100, 810, - 800 );
 
-
 
-				const geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
 
-				geometry.rotateX( - Math.PI / 2 );
 
-
 
-				const vertices = geometry.attributes.position.array;
 
-
 
-				for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
 
-
 
-					vertices[ j + 1 ] = data[ i ] * 10;
 
-
 
-				}
 
-
 
-				texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) );
 
-				texture.wrapS = THREE.ClampToEdgeWrapping;
 
-				texture.wrapT = THREE.ClampToEdgeWrapping;
 
-
 
-				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 
-				scene.add( mesh );
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				controls = new FirstPersonControls( camera, renderer.domElement );
 
-				controls.movementSpeed = 150;
 
-				controls.lookSpeed = 0.1;
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				controls.handleResize();
 
-
 
-			}
 
-
 
-			function generateHeight( width, height ) {
 
-
 
-				let seed = Math.PI / 4;
 
-				window.Math.random = function () {
 
-
 
-					const x = Math.sin( seed ++ ) * 10000;
 
-					return x - Math.floor( x );
 
-
 
-				};
 
-
 
-				const size = width * height, data = new Uint8Array( size );
 
-				const perlin = new ImprovedNoise(), z = Math.random() * 100;
 
-
 
-				let quality = 1;
 
-
 
-				for ( let j = 0; j < 4; j ++ ) {
 
-
 
-					for ( let i = 0; i < size; i ++ ) {
 
-
 
-						const x = i % width, y = ~ ~ ( i / width );
 
-						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
 
-
 
-					}
 
-
 
-					quality *= 5;
 
-
 
-				}
 
-
 
-				return data;
 
-
 
-			}
 
-
 
-			function generateTexture( data, width, height ) {
 
-
 
-				let context, image, imageData, shade;
 
-
 
-				const vector3 = new THREE.Vector3( 0, 0, 0 );
 
-
 
-				const sun = new THREE.Vector3( 1, 1, 1 );
 
-				sun.normalize();
 
-
 
-				const canvas = document.createElement( 'canvas' );
 
-				canvas.width = width;
 
-				canvas.height = height;
 
-
 
-				context = canvas.getContext( '2d' );
 
-				context.fillStyle = '#000';
 
-				context.fillRect( 0, 0, width, height );
 
-
 
-				image = context.getImageData( 0, 0, canvas.width, canvas.height );
 
-				imageData = image.data;
 
-
 
-				for ( let i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
-
 
-					vector3.x = data[ j - 2 ] - data[ j + 2 ];
 
-					vector3.y = 2;
 
-					vector3.z = data[ j - width * 2 ] - data[ j + width * 2 ];
 
-					vector3.normalize();
 
-
 
-					shade = vector3.dot( sun );
 
-
 
-					imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
 
-					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 
-					imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
 
-
 
-				}
 
-
 
-				context.putImageData( image, 0, 0 );
 
-
 
-				// Scaled 4x
 
-
 
-				const canvasScaled = document.createElement( 'canvas' );
 
-				canvasScaled.width = width * 4;
 
-				canvasScaled.height = height * 4;
 
-
 
-				context = canvasScaled.getContext( '2d' );
 
-				context.scale( 4, 4 );
 
-				context.drawImage( canvas, 0, 0 );
 
-
 
-				image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
 
-				imageData = image.data;
 
-
 
-				for ( let i = 0, l = imageData.length; i < l; i += 4 ) {
 
-
 
-					const v = ~ ~ ( Math.random() * 5 );
 
-
 
-					imageData[ i ] += v;
 
-					imageData[ i + 1 ] += v;
 
-					imageData[ i + 2 ] += v;
 
-
 
-				}
 
-
 
-				context.putImageData( image, 0, 0 );
 
-
 
-				return canvasScaled;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-
 
-			function render() {
 
-
 
-				controls.update( clock.getDelta() );
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 135
examples/webgl_materials_cubemap_balls_reflection.html
查看文件 

@@ -1,135 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - materials - cube reflection [balls]</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl cube reflection demo.<br/>
 
-			skybox by <a href="http://ict.debevec.org/~debevec/" target="_blank" rel="noopener">Paul Debevec</a>
 
-		</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			let container;
 
-
 
-			let camera, scene, renderer;
 
-
 
-			const spheres = [];
 
-
 
-			let mouseX = 0;
 
-			let mouseY = 0;
 
-
 
-			let windowHalfX = window.innerWidth / 2;
 
-			let windowHalfY = window.innerHeight / 2;
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				camera.position.z = 3200;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.CubeTextureLoader()
 
-					.setPath( 'textures/cube/pisa/' )
 
-					.load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
 
-
 
-				const geometry = new THREE.SphereGeometry( 100, 32, 16 );
 
-				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background } );
 
-
 
-				for ( let i = 0; i < 500; i ++ ) {
 
-
 
-					const mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.x = Math.random() * 10000 - 5000;
 
-					mesh.position.y = Math.random() * 10000 - 5000;
 
-					mesh.position.z = Math.random() * 10000 - 5000;
 
-
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
 
-
 
-					scene.add( mesh );
 
-
 
-					spheres.push( mesh );
 
-
 
-				}
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX ) * 10;
 
-				mouseY = ( event.clientY - windowHalfY ) * 10;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				const timer = 0.0001 * Date.now();
 
-
 
-				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
 
-
 
-					const sphere = spheres[ i ];
 
-
 
-					sphere.position.x = 5000 * Math.cos( timer + i );
 
-					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );
 
-
 
-				}
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 136
examples/webgl_materials_cubemap_balls_refraction.html
查看文件 

@@ -1,136 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - materials - cube refraction [balls]</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-	<body>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl cube refraction demo.<br/>
 
-			skybox by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>
 
-		</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			let container;
 
-
 
-			let camera, scene, renderer;
 
-
 
-			const spheres = [];
 
-
 
-			let mouseX = 0, mouseY = 0;
 
-
 
-			let windowHalfX = window.innerWidth / 2;
 
-			let windowHalfY = window.innerHeight / 2;
 
-
 
-			document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
 
-				camera.position.z = 3200;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.CubeTextureLoader()
 
-					.setPath( 'textures/cube/Park3Med/' )
 
-					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
 
-
 
-				const geometry = new THREE.SphereGeometry( 100, 32, 16 );
 
-
 
-				const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: scene.background, refractionRatio: 0.95 } );
 
-				material.envMap.mapping = THREE.CubeRefractionMapping;
 
-
 
-				for ( let i = 0; i < 500; i ++ ) {
 
-
 
-					const mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.x = Math.random() * 10000 - 5000;
 
-					mesh.position.y = Math.random() * 10000 - 5000;
 
-					mesh.position.z = Math.random() * 10000 - 5000;
 
-
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
 
-
 
-					scene.add( mesh );
 
-
 
-					spheres.push( mesh );
 
-
 
-				}
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX ) * 10;
 
-				mouseY = ( event.clientY - windowHalfY ) * 10;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				const timer = 0.0001 * Date.now();
 
-
 
-				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
 
-
 
-					const sphere = spheres[ i ];
 
-
 
-					sphere.position.x = 5000 * Math.cos( timer + i );
 
-					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );
 
-
 
-				}
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 132
examples/webgl_materials_grass.html
查看文件 

@@ -1,132 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - materials - grass</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-
 
-	<body>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			let camera, scene, renderer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, 75, 100 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x003300 );
 
-
 
-				const geometry = new THREE.PlaneGeometry( 100, 100 );
 
-
 
-				const texture = new THREE.CanvasTexture( generateTexture() );
 
-
 
-				for ( let i = 0; i < 15; i ++ ) {
 
-
 
-					const material = new THREE.MeshBasicMaterial( {
 
-						color: new THREE.Color().setHSL( 0.3, 0.75, ( i / 15 ) * 0.4 + 0.1 ),
 
-						map: texture,
 
-						depthTest: false,
 
-						depthWrite: false,
 
-						transparent: true
 
-					} );
 
-
 
-					const mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.y = i * 0.25;
 
-					mesh.rotation.x = - Math.PI / 2;
 
-
 
-					scene.add( mesh );
 
-
 
-				}
 
-
 
-				scene.children.reverse();
 
-
 
-				renderer = new THREE.WebGLRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function generateTexture() {
 
-
 
-				const canvas = document.createElement( 'canvas' );
 
-				canvas.width = 512;
 
-				canvas.height = 512;
 
-
 
-				const context = canvas.getContext( '2d' );
 
-
 
-				for ( let i = 0; i < 20000; i ++ ) {
 
-
 
-					context.fillStyle = 'hsl(0,0%,' + ( Math.random() * 50 + 50 ) + '%)';
 
-					context.beginPath();
 
-					context.arc( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() + 0.15, 0, Math.PI * 2, true );
 
-					context.fill();
 
-
 
-				}
 
-
 
-				context.globalAlpha = 0.075;
 
-				context.globalCompositeOperation = 'lighter';
 
-
 
-				return canvas;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				const time = Date.now() / 6000;
 
-
 
-				camera.position.x = 80 * Math.cos( time );
 
-				camera.position.z = 80 * Math.sin( time );
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				for ( let i = 0, l = scene.children.length; i < l; i ++ ) {
 
-
 
-					const mesh = scene.children[ i ];
 
-					mesh.position.x = Math.sin( time * 4 ) * i * i * 0.005;
 
-					mesh.position.z = Math.cos( time * 6 ) * i * i * 0.005;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 194
examples/webgl_sandbox.html
查看文件 

@@ -1,194 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js - webgl sandbox</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-	</head>
 
-
 
-	<body>
 
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - sandbox</div>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { BasicShader } from './jsm/shaders/BasicShader.js';
 
-
 
-			const statsEnabled = true;
 
-
 
-			let container, stats;
 
-
 
-			let camera, scene, renderer;
 
-
 
-			let mouseX = 0, mouseY = 0;
 
-
 
-			let windowHalfX = window.innerWidth / 2;
 
-			let windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
 
-				camera.position.z = 3200;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.fog = new THREE.Fog( 0x000000, 1, 20000 );
 
-
 
-				const light = new THREE.PointLight( 0xffffff );
 
-				scene.add( light );
 
-
 
-				const shader = BasicShader;
 
-				const uniforms = shader.uniforms;
 
-				const vertexShader = shader.vertexShader;
 
-				const fragmentShader = shader.fragmentShader;
 
-
 
-				const texture1 = new THREE.CanvasTexture( generateTexture( 0, 0.5, 1 ), THREE.UVMapping );
 
-				const texture2 = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
 
-
 
-				const materials = [
 
-
 
-					new THREE.MeshNormalMaterial(),
 
-					new THREE.MeshDepthMaterial(),
 
-					new THREE.MeshBasicMaterial( { color: 0x0066ff, blending: THREE.AdditiveBlending, transparent: true, depthWrite: false } ),
 
-					new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ),
 
-					new THREE.MeshBasicMaterial( { map: texture1, fog: false } ),
 
-					new THREE.MeshBasicMaterial( { map: texture2 } ),
 
-					new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, transparent: true } ),
 
-					new THREE.MeshLambertMaterial( { map: texture2 } ),
 
-					new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
 
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30, flatShading: true } ),
 
-					new THREE.MeshPhongMaterial( { color: 0xdddddd, specular: 0x009900, shininess: 30 } )
 
-
 
-				];
 
-
 
-				const geometry = new THREE.SphereGeometry( 50, 32, 16 );
 
-
 
-				for ( let i = 0; i < 5000; i ++ ) {
 
-
 
-					// random order
 
-					//let index = Math.floor( Math.random() * materials.length );
 
-
 
-					// sort by material / geometry
 
-					const index = Math.floor( ( i / 5000 ) * materials.length );
 
-
 
-					const material = materials[ index ];
 
-
 
-					const mesh = new THREE.Mesh( geometry, material );
 
-
 
-					mesh.position.x = Math.random() * 10000 - 5000;
 
-					mesh.position.y = Math.random() * 10000 - 5000;
 
-					mesh.position.z = Math.random() * 10000 - 5000;
 
-
 
-					//mesh.rotation.x = Math.random() * 360 * ( Math.PI / 180 );
 
-					mesh.rotation.y = Math.random() * 2 * Math.PI;
 
-
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
 
-
 
-					scene.add( mesh );
 
-
 
-				}
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				if ( statsEnabled ) {
 
-
 
-					stats = new Stats();
 
-					container.appendChild( stats.dom );
 
-
 
-				}
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-				windowHalfY = window.innerHeight / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function generateTexture( r, g, b ) {
 
-
 
-				const canvas = document.createElement( 'canvas' );
 
-				canvas.width = 256;
 
-				canvas.height = 256;
 
-
 
-				const context = canvas.getContext( '2d' );
 
-				const image = context.getImageData( 0, 0, 256, 256 );
 
-
 
-				let x = 0, y = 0, p;
 
-
 
-				for ( let i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
 
-
 
-					x = j % 256;
 
-					y = x == 0 ? y + 1 : y;
 
-					p = Math.floor( x ^ y );
 
-
 
-					image.data[ i ] = ~ ~ p * r;
 
-					image.data[ i + 1 ] = ~ ~ p * g;
 
-					image.data[ i + 2 ] = ~ ~ p * b;
 
-					image.data[ i + 3 ] = 255;
 
-
 
-				}
 
-
 
-				context.putImageData( image, 0, 0 );
 
-
 
-				return canvas;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = ( event.clientX - windowHalfX ) * 10;
 
-				mouseY = ( event.clientY - windowHalfY ) * 10;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				if ( statsEnabled ) stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 327
examples/webgl_shaders_vector.html
查看文件 

@@ -1,327 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js webgl - vector - text</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link type="text/css" rel="stylesheet" href="main.css">
 
-		<style>
 
-			body {
 
-				background-color: #f0f0f0;
 
-				color: #444;
 
-			}
 
-			a {
 
-				color: #08f;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<div id="info">
 
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Resolution-Independent Vector Fonts. <a href="https://github.com/mrdoob/three.js/issues/4746">info</a>.
 
-		</div>
 
-
 
-		<script type="x-shader/x-fragment" id="fs">
 
-
 
-			varying vec2 vUv;
 
-			varying float flip;
 
-			uniform vec3 color;
 
-
 
-			float inCurve(vec2 uv) {
 
-				return uv.x * uv.x - uv.y;
 
-			}
 
-
 
-			float delta = 0.1;
 
-
 
-			void main() {
 
-				float x = inCurve(vUv);
 
-
 
-				if (x * flip > 0.) discard;
 
-				gl_FragColor = vec4(color, 1.);
 
-			}
 
-
 
-		</script>
 
-
 
-		<script type="x-shader/x-vertex" id="vs">
 
-
 
-			varying vec2 vUv;
 
-			attribute float invert;
 
-			varying float flip;
 
-
 
-			void main() {
 
-
 
-				vUv = uv;
 
-				flip = invert;
 
-				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
-				gl_Position = projectionMatrix * mvPosition;
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-		<script type="module">
 
-
 
-			import * as THREE from '../build/three.module.js';
 
-
 
-			import Stats from './jsm/libs/stats.module.js';
 
-
 
-			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-
 
-			let stats;
 
-
 
-			let camera, scene, renderer, controls;
 
-
 
-			let group;
 
-
 
-			const loader = new THREE.FontLoader();
 
-			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-
 
-				init( font );
 
-				animate();
 
-
 
-			} );
 
-
 
-			function init( font ) {
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 50, 100, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				const theText = '&'; // i % & j b 8
 
-
 
-				group = new THREE.Group();
 
-				scene.add( group );
 
-
 
-				const textMaterial = new THREE.MeshBasicMaterial( {
 
-					color: new THREE.Color( 0, 0, 1 ),
 
-					side: THREE.DoubleSide,
 
-					wireframe: true
 
-				} );
 
-
 
-				const textShapes = font.generateShapes( theText, 180 );
 
-
 
-				let geometry = new THREE.ShapeGeometry( textShapes );
 
-
 
-				let text = new THREE.Mesh( geometry, textMaterial );
 
-				text.position.x = - 200;
 
-				group.add( text );
 
-
 
-				//
 
-
 
-				let vA = new THREE.Vector2();
 
-				let vB = new THREE.Vector2();
 
-
 
-				function processShape( path ) {
 
-
 
-					const pts = []; // bigger area (convex hull)
 
-					const pts2 = []; // smaller area (full solid shapes)
 
-					const beziers = []; // quad bezier points
 
-					const invert = [];
 
-					let z;
 
-
 
-					let wind;
 
-
 
-					pts.push( path[ 0 ].getPoint( 0, new THREE.Vector2() ) );
 
-					pts2.push( path[ 0 ].getPoint( 0, new THREE.Vector2() ) );
 
-
 
-					for ( let i = 0; i < path.length; i ++ ) {
 
-
 
-						const curve = path[ i ];
 
-						if ( curve instanceof THREE.LineCurve ) {
 
-
 
-							pts.push( curve.v2 );
 
-							pts2.push( curve.v2 );
 
-
 
-						} else if ( curve instanceof THREE.QuadraticBezierCurve ) {
 
-
 
-							vA = vA.subVectors( curve.v1, curve.v0 );
 
-							vB = vB.subVectors( curve.v2, curve.v1 );
 
-							z = vA.x * vB.y - vA.y * vB.x; // z component of cross Production
 
-							wind = z < 0; // clockwise/anticlock wind
 
-
 
-							if ( wind ) {
 
-
 
-								pts.push( curve.v1 );
 
-								pts.push( curve.v2 );
 
-								pts2.push( curve.v2 );
 
-
 
-							} else {
 
-
 
-								pts.push( curve.v2 );
 
-								pts2.push( curve.v1 );
 
-								pts2.push( curve.v2 );
 
-
 
-							}
 
-
 
-							const flip = wind ? 1 : - 1;
 
-							// if (reverse) flip *= -1;
 
-
 
-							invert.push( flip, flip, flip );
 
-							beziers.push( curve.v0, curve.v1, curve.v2 );
 
-
 
-						}
 
-
 
-					}
 
-
 
-					return {
 
-						pts: pts,
 
-						pts2: pts2,
 
-						beziers: beziers,
 
-						invert: invert
 
-					};
 
-
 
-				}
 
-
 
-				let pts, pts2;
 
-				let subshape;
 
-				let convexhullShape;
 
-				let solidShape;
 
-				const convexhullShapeGroup = [];
 
-				const solidShapeGroup = [];
 
-
 
-				let beziers = [], invert = [];
 
-				let process;
 
-				let hole;
 
-
 
-				for ( let s = 0; s < textShapes.length; s ++ ) {
 
-
 
-					subshape = textShapes[ s ];
 
-					process = processShape( subshape.curves );
 
-
 
-					pts = process.pts;
 
-					pts2 = process.pts2;
 
-					beziers = beziers.concat( process.beziers );
 
-					invert = invert.concat( process.invert );
 
-
 
-					convexhullShape = new THREE.Shape( pts );
 
-					solidShape = new THREE.Shape( pts2 );
 
-
 
-					convexhullShapeGroup.push( convexhullShape );
 
-					solidShapeGroup.push( solidShape );
 
-
 
-					for ( let i = 0; i < subshape.holes.length; i ++ ) {
 
-
 
-						hole = subshape.holes[ i ];
 
-
 
-						process = processShape( hole.curves );
 
-
 
-						pts = process.pts;
 
-						pts2 = process.pts2;
 
-						beziers = beziers.concat( process.beziers );
 
-						invert = invert.concat( process.invert );
 
-
 
-						convexhullShape.holes.push( new THREE.Shape( pts ) );
 
-						solidShape.holes.push( new THREE.Shape( pts2 ) );
 
-
 
-					}
 
-
 
-				} // end of subshape
 
-
 
-				const bezierGeometry = new THREE.BufferGeometry();
 
-				const vertices = [];
 
-				const uvs = [];
 
-
 
-				for ( let i = 0; i < beziers.length; i ++ ) {
 
-
 
-					const p = beziers[ i ];
 
-					vertices.push( p.x, p.y, 0 );
 
-
 
-				}
 
-
 
-				for ( let i = 0; i < beziers.length; i += 3 ) {
 
-
 
-					uvs.push( 0, 0, 0.5, 0, 1, 1 );
 
-
 
-				}
 
-
 
-				bezierGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
 
-				bezierGeometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
 
-				bezierGeometry.setAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
 
-
 
-				geometry = new THREE.ShapeGeometry( convexhullShapeGroup );
 
-
 
-				text = new THREE.Mesh( geometry, textMaterial );
 
-				text.position.x = 200;
 
-				group.add( text );
 
-
 
-				geometry = new THREE.ShapeGeometry( solidShapeGroup );
 
-
 
-				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( 1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
 
-				text.position.x = 200;
 
-				group.add( text );
 
-
 
-				//
 
-
 
-				const newMaterial = new THREE.ShaderMaterial( {
 
-					uniforms: {
 
-						color: { value: new THREE.Color( 0.45 * 0xffffff ) }
 
-					},
 
-					vertexShader: document.getElementById( 'vs' ).textContent,
 
-					fragmentShader: document.getElementById( 'fs' ).textContent,
 
-					side: THREE.DoubleSide
 
-				} );
 
-
 
-				text = new THREE.Mesh( bezierGeometry, newMaterial );
 
-				text.rotation.y = Math.PI * 2;
 
-
 
-				group.add( text );
 
-
 
-				//
 
-
 
-
 
-				geometry = new THREE.ShapeGeometry( solidShapeGroup );
 
-
 
-				text = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
 
-				text.rotation.y = Math.PI * 2;
 
-
 
-				group.add( text );
 
-
 
-				//
 
-
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				controls = new OrbitControls( camera, renderer.domElement );
 
-				controls.target.set( 50, 100, 0 );
 
-				controls.update();
 
-
 
-				stats = new Stats();
 
-				document.body.appendChild( stats.dom );
 
-
 
-				window.addEventListener( 'resize', onWindowResize );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>