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

Remove CanvasRenderer

WestLangley 6 年之前
父节点
07b24f7f03
当前提交
fe8d66b636
共有 49 个文件被更改，包括 7 次插入 和 7847 次删除
合并视图 显示文件统计
  1. 0 1
      docs/api/en/cameras/OrthographicCamera.html
  2. 0 2
      docs/api/en/cameras/PerspectiveCamera.html
  3. 3 3
      docs/api/en/deprecated/DeprecatedList.html
  4. 0 4
      docs/api/en/lights/AmbientLight.html
  5. 0 1
      docs/api/en/lights/DirectionalLight.html
  6. 0 1
      docs/api/en/lights/PointLight.html
  7. 0 1
      docs/api/en/materials/LineDashedMaterial.html
  8. 0 61
      docs/examples/SpriteCanvasMaterial.html
  9. 0 174
      docs/examples/renderers/CanvasRenderer.html
  10. 0 4
      docs/list.js
  11. 0 1
      docs/manual/en/introduction/Creating-text.html
  12. 0 140
      examples/canvas_ascii_effect.html
  13. 0 153
      examples/canvas_camera_orthographic.html
  14. 0 483
      examples/canvas_geometry_birds.html
  15. 0 209
      examples/canvas_geometry_cube.html
  16. 0 176
      examples/canvas_geometry_earth.html
  17. 0 136
      examples/canvas_geometry_hierarchy.html
  18. 0 245
      examples/canvas_geometry_nurbs.html
  19. 0 237
      examples/canvas_geometry_panorama.html
  20. 0 248
      examples/canvas_geometry_panorama_fisheye.html
  21. 0 409
      examples/canvas_geometry_shapes.html
  22. 0 218
      examples/canvas_geometry_terrain.html
  23. 0 229
      examples/canvas_geometry_text.html
  24. 0 199
      examples/canvas_interactive_cubes.html
  25. 0 186
      examples/canvas_interactive_cubes_tween.html
  26. 0 206
      examples/canvas_interactive_sprites.html
  27. 0 202
      examples/canvas_interactive_voxelpainter.html
  28. 0 155
      examples/canvas_lights_pointlights.html
  29. 0 171
      examples/canvas_lines.html
  30. 0 246
      examples/canvas_lines_colors.html
  31. 0 157
      examples/canvas_lines_dashed.html
  32. 0 190
      examples/canvas_lines_sphere.html
  33. 0 189
      examples/canvas_materials.html
  34. 0 115
      examples/canvas_materials_normal.html
  35. 0 113
      examples/canvas_materials_reflection.html
  36. 0 224
      examples/canvas_materials_video.html
  37. 0 152
      examples/canvas_morphtargets_horse.html
  38. 0 152
      examples/canvas_particles_floor.html
  39. 0 169
      examples/canvas_particles_random.html
  40. 0 203
      examples/canvas_particles_sprites.html
  41. 0 191
      examples/canvas_particles_waves.html
  42. 0 131
      examples/canvas_performance.html
  43. 0 136
      examples/canvas_sandbox.html
  44. 0 34
      examples/files.js
  45. 0 1153
      examples/js/renderers/CanvasRenderer.js
  46. 1 11
      examples/misc_lights_test.html
  47. 1 9
      examples/misc_ubiquity_test.html
  48. 1 10
      examples/misc_ubiquity_test2.html
  49. 1 7
      src/Three.Legacy.js

+ 0 - 1
docs/api/en/cameras/OrthographicCamera.html
查看文件 

@@ -24,7 +24,6 @@
 
 
 
 		<h2>Example</h2>
 
 		<h2>Example</h2>
 
 
 
-		<p>[example:canvas_camera_orthographic camera / orthographic ]</p>
 
 		<p>[example:webgl_camera camera ]</p>
 
 		<p>[example:webgl_camera camera ]</p>
 
 		<p>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</p>
 
 		<p>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</p>
 
 		<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>
 
 		<p>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</p>

+ 0 - 2
docs/api/en/cameras/PerspectiveCamera.html
查看文件 

@@ -22,8 +22,6 @@
 
 
 
 		<h2>Example</h2>
 
 		<h2>Example</h2>
 
 
 
-		<p>[example:canvas_geometry_birds geometry / birds ]</p>
 
-		<p>[example:canvas_geometry_cube geometry / cube ]</p>
 
 		<p>[example:webgl_animation_skinning_blending animation / skinning / blending ]</p>
 
 		<p>[example:webgl_animation_skinning_blending animation / skinning / blending ]</p>
 
 		<p>[example:webgl_animation_skinning_morph animation / skinning / blending ]</p>
 
 		<p>[example:webgl_animation_skinning_morph animation / skinning / blending ]</p>
 
 		<p>[example:webgl_effects_stereo effects / stereo ]</p>
 
 		<p>[example:webgl_effects_stereo effects / stereo ]</p>

+ 3 - 3
docs/api/en/deprecated/DeprecatedList.html
查看文件 

@@ -501,11 +501,11 @@
 
 
 
 
 
 
 
-		<h2>Renderer</h2>
 
+		<h2>Renderers</h2>
 
 
 
-		<h3>[page:Projector]</h3>
 
+		<h3>[page:CanvasRenderer]</h3>
 
 		<p>
 
 		<p>
 
-			CanvasRenderer has been moved to [link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js /examples/js/renderers/CanvasRenderer.js].
 
+			CanvasRenderer has been removed.
 
 		</p>
 
 		</p>
 
 
 
 		<h3>[page:Projector]</h3>
 
 		<h3>[page:Projector]</h3>

+ 0 - 4
docs/api/en/lights/AmbientLight.html
查看文件 

@@ -21,10 +21,6 @@
 
 
 
 		<h2>Example</h2>
 
 		<h2>Example</h2>
 
 		<p>
 
 		<p>
 
-			[example:canvas_camera_orthographic camera / orthographic ]<br />
 
-		  [example:canvas_interactive_voxelpainter interactive / voxelpainter ]<br />
 
-		  [example:canvas_materials materials ]<br />
 
-		  [example:canvas_sandbox sandbox ]<br />
 
 		  [example:webgl_animation_cloth animation / cloth ]<br />
 
 		  [example:webgl_animation_cloth animation / cloth ]<br />
 
 		  [example:webgl_animation_skinning_blending animation / skinning / blending ]
 
 		  [example:webgl_animation_skinning_blending animation / skinning / blending ]
 
 		</p>
 
 		</p>

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

@@ -40,7 +40,6 @@
 
 
 
 		<h2>Example</h2>
 
 		<h2>Example</h2>
 
 		<p>
 
 		<p>
 
-			[example:canvas_morphtargets_horse morphtargets / horse ]<br />
 
 			[example:misc_controls_fly controls / fly ]<br />
 
 			[example:misc_controls_fly controls / fly ]<br />
 
 			[example:misc_lights_test lights / test ]<br />
 
 			[example:misc_lights_test lights / test ]<br />
 
 			[example:webvr_cubes cubes ]<br />
 
 			[example:webvr_cubes cubes ]<br />

+ 0 - 1
docs/api/en/lights/PointLight.html
查看文件 

@@ -23,7 +23,6 @@
 
 		<h2>Example</h2>
 
 		<h2>Example</h2>
 
 
 
 		<p>
 
 		<p>
 
-			[example:canvas_lights_pointlights lights / pointlights ]<br />
 
 			[example:webgl_lights_pointlights lights / pointlights ]<br />
 
 			[example:webgl_lights_pointlights lights / pointlights ]<br />
 
 			[example:webgl_lights_pointlights2 lights / pointlights2 ]<br />
 
 			[example:webgl_lights_pointlights2 lights / pointlights2 ]<br />
 
 			[example:webgldeferred_animation animation ]<br />
 
 			[example:webgldeferred_animation animation ]<br />

+ 0 - 1
docs/api/en/materials/LineDashedMaterial.html
查看文件 

@@ -18,7 +18,6 @@
 
 
 
 		<p>
 
 		<p>
 
 			[example:webgl_lines_dashed WebGL / lines / dashed]<br />
 
 			[example:webgl_lines_dashed WebGL / lines / dashed]<br />
 
-			[example:canvas_lines_dashed Canvas / lines /dashed]
 
 		</p>
 
 		</p>
 
 
 
 		<code>
 
 		<code>

+ 0 - 61
docs/examples/SpriteCanvasMaterial.html
查看文件 

@@ -1,61 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<meta charset="utf-8" />
 
-		<base href="../" />
 
-		<script src="list.js"></script>
 
-		<script src="page.js"></script>
 
-		<link type="text/css" rel="stylesheet" href="page.css" />
 
-	</head>
 
-	<body>
 
-		[page:Material] &rarr;
 
-
 
-		<h1>[name]</h1>
 
-
 
-		<p class="desc">Create a material that can draw custom sprites using a 2d canvas.</p>
 
-
 
-
 
-		<h2>Constructor</h2>
 
-
 
-
 
-		<h3>[name]( [param:Object parameters] )</h3>
 
-		<p>
 
-		parameters is an object that can be used to set up the default properties
 
-		</p>
 
-		<p>
 
-		rotation - the rotation of the sprite<br/>
 
-		color - the color of the sprite<br/>
 
-		program - the program used to draw the sprite
 
-		</p>
 
-
 
-
 
-		<h2>Properties</h2>
 
-
 
-		<h3>[property:Radians rotation]</h3>
 
-		<p>
 
-		The rotation of the sprite in radians. Default is 0.
 
-		</p>
 
-
 
-		<h3>[property:Color color]</h3>
 
-		<p>
 
-		The color of the sprite. The material will set up the color for the context before calling the material's program.
 
-		</p>
 
-
 
-		<h2>Methods</h2>
 
-
 
-
 
-
 
-		<h3>[method:null program]([param:CanvasRenderingContext2D context], [param:Color color])</h3>
 
-		<p>
 
-		context -- The canvas context <br />
 
-		color -- The color of the sprite
 
-		</p>
 
-		<p>
 
-			Define a program that will use the context to draw the sprite.
 
-		</p>
 
-
 
-		<h2>Source</h2>
 
-
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/renderers/CanvasRenderer.js examples/js/renderers/CanvasRenderer.js]
 
-	</body>
 
-</html>

+ 0 - 174
docs/examples/renderers/CanvasRenderer.html
查看文件 

@@ -1,174 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<meta charset="utf-8" />
 
-		<base href="../../" />
 
-		<script src="list.js"></script>
 
-		<script src="page.js"></script>
 
-		<link type="text/css" rel="stylesheet" href="page.css" />
 
-	</head>
 
-	<body>
 
-		<h1>[name]</h1>
 
-
 
-		<p class="desc">
 
-			The Canvas renderer displays your beautifully crafted scenes <em>not</em> using WebGL,
 
-			but draws it using the (slower) <a href="http://drafts.htmlwg.org/2dcontext/html5_canvas_CR/Overview.html">Canvas 2D Context</a>
 
-			API.<br /><br />
 
-
 
-			<b>
 
-			NOTE: The Canvas renderer has been deprecated and is no longer part of the three.js core.
 
-			</b>
 
-			If you still need to use it you can find it here: [link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js].<br /><br />
 
-
 
-			This renderer can be a nice fallback from [page:WebGLRenderer] for simple scenes:
 
-
 
-			<code>
 
-			function webglAvailable() {
 
-				try {
 
-					var canvas = document.createElement( 'canvas' );
 
-					return !!( window.WebGLRenderingContext && (
 
-						canvas.getContext( 'webgl' ) ||
 
-						canvas.getContext( 'experimental-webgl' ) )
 
-					);
 
-				} catch ( e ) {
 
-					return false;
 
-				}
 
-			}
 
-
 
-			if ( webglAvailable() ) {
 
-				renderer = new THREE.WebGLRenderer();
 
-			} else {
 
-				renderer = new THREE.CanvasRenderer();
 
-			}
 
-			</code>
 
-
 
-			Note: both WebGLRenderer and CanvasRenderer are embedded in the web page using an HTML5 &lt;canvas&gt; tag.
 
-			The "Canvas" in CanvasRenderer means it uses Canvas 2D instead of WebGL.<br /><br />
 
-
 
-			Don't confuse either CanvasRenderer with the SoftwareRenderer example, which simulates a screen buffer in a Javascript array.
 
-		</p>
 
-
 
-		<h2>Constructor</h2>
 
-
 
-
 
-		<h3>[name]([param:object parameters])</h3>
 
-		<p>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</p>
 
-
 
-		<p>
 
-		[page:DOMElement canvas] - A [link:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas canvas]
 
-		where the renderer draws its output.
 
-		This corresponds to the [page:CanvasRenderer.domElement domElement] property below.
 
-		If not passed in here, a new canvas element will be created.<br />
 
-
 
-		[page:Boolean alpha] - whether the canvas contains an alpha (transparency) buffer or not.
 
-	  Default is *false*.
 
-		</p>
 
-
 
-
 
-		<h2>Properties</h2>
 
-
 
-    <h3>[property:Object info]</h3>
 
-
 
-		<p>
 
-			An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:
 
-			<ul>
 
-				<li>render:
 
-					<ul>
 
-						<li>vertices</li>
 
-						<li>faces</li>
 
-					</ul>
 
-				</li>
 
-			</ul>
 
-		</p>
 
-
 
-    <h3>[property:DOMElement domElement]</h3>
 
-
 
-		<p>
 
-			A [page:Canvas] where the renderer draws its output.<br />
 
-			This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.
 
-		</p>
 
-
 
-		<h3>[property:Boolean autoClear]</h3>
 
-		<p>
 
-      Defines whether the renderer should automatically clear its output before rendering.
 
-    </p>
 
-
 
-		<h3>[property:Boolean sortObjects]</h3>
 
-		<p>
 
-      Defines whether the renderer should sort objects. Default is true.<br />
 
-      Note: Sorting is used to attempt to properly render objects that have some degree of transparency.  By definition, sorting objects may not work in all cases.  Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.
 
-    </p>
 
-
 
-		<h3>[property:boolean sortElements]</h3>
 
-		<p>
 
-			Defines whether the renderer should sort the face of each object. Default is true.
 
-		</p>
 
-
 
-
 
-		<h2>Methods</h2>
 
-
 
-		<h3>[method:null render]([param:Scene scene], [param:Camera camera])</h3>
 
-		<p>
 
-			scene -- The scene to render. <br />
 
-			camera -- the camera to view the scene.
 
-		</p>
 
-		<p>
 
-        Render a scene using a camera.
 
-		</p>
 
-
 
-		<h3>[method:null clear]()</h3>
 
-		<p>
 
-			Tells the renderer to clear its color drawing buffer with the clearcolor.
 
-		</p>
 
-
 
-		<h3>[method:null setClearColor]([param:Color color], [param:number alpha])</h3>
 
-		<p>
 
-			color -- The color to clear the canvas with. <br />
 
-			alpha -- The alpha channel to clear the canvas with.
 
-		</p>
 
-		<p>
 
-			This set the clearColor and the clearAlpha.
 
-		</p>
 
-
 
-
 
-		<h3>[method:null setSize]([param:Number width], [param:Number height])</h3>
 
-		<p>
 
-			width -- The width of the drawing canvas. <br />
 
-			height -- The height of the drawing canvas.
 
-		</p>
 
-		<p>
 
-			This set the size of the drawing canvas and if updateStyle is set, then the css of the canvas is updated too.
 
-		</p>
 
-
 
-		<h3>[method:null setClearColorHex]([param:number hex], [param:number alpha])</h3>
 
-		<p>
 
-			hex -- The the hexadecimal value of the color to clear the canvas with. <br />
 
-	    alpha -- The alpha channel to clear the canvas with.
 
-		</p>
 
-		<p>
 
-			This set the clearColor and the clearAlpha.
 
-		</p>
 
-
 
-		<h3>[method:number getClearColorHex]()</h3>
 
-		<p>
 
-			Returns the [page:number hex] color.
 
-		</p>
 
-
 
-		<h3>[method:number getClearAlpha]()</h3>
 
-		<p>
 
-			Returns the alpha value.
 
-		</p>
 
-
 
-		<h2>Empty Methods to Maintain Compatibility with [page:WebglRenderer]</h2>
 
-		<p>
 
-			[method:null clearColor]()<br/>
 
-			[method:null clearDepth]()<br/>
 
-			[method:null clearStencil]()<br/>
 
-			[method:number getMaxAnisotropy]() - returns 1 <br/>
 
-		</p>
 
-
 
-		<h2>Source</h2>
 
-
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/[path].js examples/js/[path].js]
 
-	</body>
 
-</html>

+ 0 - 4
docs/list.js
查看文件 

@@ -383,7 +383,6 @@ var list = {
 
 
 
 			"Plugins": {
 
 			"Plugins": {
 
 				"LookupTable": "examples/Lut",
 
 				"LookupTable": "examples/Lut",
 
-				"SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
 
 			},
 
 			},
 
 
 
 			"QuickHull": {
 
 			"QuickHull": {
 
@@ -395,7 +394,6 @@ var list = {
 
 			},
 
 			},
 
 
 
 			"Renderers": {
 
 			"Renderers": {
 
-				"CanvasRenderer": "examples/renderers/CanvasRenderer",
 
 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
 
 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
 
 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
 
 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
 
 				"SVGRenderer": "examples/renderers/SVGRenderer"
 
 				"SVGRenderer": "examples/renderers/SVGRenderer"
 
@@ -807,7 +805,6 @@ var list = {
 
 
 
 			"Plugins": {
 
 			"Plugins": {
 
 				"LookupTable": "examples/Lut",
 
 				"LookupTable": "examples/Lut",
 
-				"SpriteCanvasMaterial": "examples/SpriteCanvasMaterial"
 
 			},
 
 			},
 
 
 
 			"QuickHull": {
 
 			"QuickHull": {
 
@@ -819,7 +816,6 @@ var list = {
 
 			},
 
 			},
 
 
 
 			"Renderers": {
 
 			"Renderers": {
 
-				"CanvasRenderer": "examples/renderers/CanvasRenderer",
 
 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
 
 				"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
 
 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
 
 				"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
 
 				"SVGRenderer": "examples/renderers/SVGRenderer"
 
 				"SVGRenderer": "examples/renderers/SVGRenderer"

+ 0 - 1
docs/manual/en/introduction/Creating-text.html
查看文件 

@@ -77,7 +77,6 @@
 
 
 
 			<h3>Examples</h3>
 
 			<h3>Examples</h3>
 
 			[example:webgl_geometry_text WebGL / geometry / text]<br />
 
 			[example:webgl_geometry_text WebGL / geometry / text]<br />
 
-			[example:canvas_geometry_text canvas / geometry / text]<br />
 
 			[example:webgl_shadowmap WebGL / shadowmap]
 
 			[example:webgl_shadowmap WebGL / shadowmap]
 
 
 
 			<p>
 
 			<p>

+ 0 - 140
examples/canvas_ascii_effect.html
查看文件 

@@ -1,140 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js - ASCII Effect</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/TrackballControls.js"></script>
 
-		<script src="js/effects/AsciiEffect.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, controls, scene, renderer;
 
-			var effect;
 
-
 
-			var sphere, plane;
 
-
 
-			var start = Date.now();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var width = window.innerWidth || 2;
 
-				var height = window.innerHeight || 2;
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = 'Drag to change the view';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
 
-				camera.position.y = 150;
 
-				camera.position.z = 500;
 
-
 
-				controls = new THREE.TrackballControls( camera );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				var light = new THREE.PointLight( 0xffffff );
 
-				light.position.set( 500, 500, 500 );
 
-				scene.add( light );
 
-
 
-				var light = new THREE.PointLight( 0xffffff, 0.25 );
 
-				light.position.set( - 500, - 500, - 500 );
 
-				scene.add( light );
 
-
 
-				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshLambertMaterial() );
 
-				scene.add( sphere );
 
-
 
-				// Plane
 
-
 
-				plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
 
-				plane.position.y = - 200;
 
-				plane.rotation.x = - Math.PI / 2;
 
-				scene.add( plane );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setSize( width, height );
 
-				// container.appendChild( renderer.domElement );
 
-
 
-				effect = new THREE.AsciiEffect( renderer );
 
-				effect.setSize( width, height );
 
-				container.appendChild( effect.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				effect.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				stats.begin();
 
-				render();
 
-				stats.end();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				var timer = Date.now() - start;
 
-
 
-				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
 
-				sphere.rotation.x = timer * 0.0003;
 
-				sphere.rotation.z = timer * 0.0002;
 
-
 
-				controls.update();
 
-
 
-				effect.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 153
examples/canvas_camera_orthographic.html
查看文件 

@@ -1,153 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - camera - orthographic</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-			var frustumSize = 1000;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orthographic view';
 
-				container.appendChild( info );
 
-
 
-				var aspect = window.innerWidth / window.innerHeight;
 
-				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 2000 );
 
-				camera.position.y = 400;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				// Grid
 
-
 
-				var gridHelper = new THREE.GridHelper( 1000, 20 );
 
-				scene.add( gridHelper );
 
-
 
-				// Cubes
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
 
-
 
-				for ( var i = 0; i < 100; i ++ ) {
 
-
 
-					var cube = new THREE.Mesh( geometry, material );
 
-
 
-					cube.scale.y = Math.floor( Math.random() * 2 + 1 );
 
-
 
-					cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
 
-					cube.position.y = ( cube.scale.y * 50 ) / 2;
 
-					cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
 
-
 
-					scene.add( cube );
 
-
 
-				}
 
-
 
-				// Lights
 
-
 
-				var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
 
-				scene.add( ambientLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				var aspect = window.innerWidth / window.innerHeight;
 
-
 
-				camera.left = - frustumSize * aspect / 2;
 
-				camera.right = frustumSize * aspect / 2;
 
-				camera.top = frustumSize / 2;
 
-				camera.bottom = - frustumSize / 2;
 
-
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				stats.begin();
 
-				render();
 
-				stats.end();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				var timer = Date.now() * 0.0001;
 
-
 
-				camera.position.x = Math.cos( timer ) * 800;
 
-				camera.position.z = Math.sin( timer ) * 800;
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 483
examples/canvas_geometry_birds.html
查看文件 

@@ -1,483 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - birds</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #808080;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - birds demo</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var Bird = function () {
 
-
 
-				var scope = this;
 
-
 
-				THREE.Geometry.call( this );
 
-
 
-				v( 5, 0, 0 );
 
-				v( - 5, - 2, 1 );
 
-				v( - 5, 0, 0 );
 
-				v( - 5, - 2, - 1 );
 
-
 
-				v( 0, 2, - 6 );
 
-				v( 0, 2, 6 );
 
-				v( 2, 0, 0 );
 
-				v( - 3, 0, 0 );
 
-
 
-				f3( 0, 2, 1 );
 
-
 
-				f3( 4, 7, 6 );
 
-				f3( 5, 6, 7 );
 
-
 
-				this.computeFaceNormals();
 
-
 
-				function v( x, y, z ) {
 
-
 
-					scope.vertices.push( new THREE.Vector3( x, y, z ) );
 
-
 
-				}
 
-
 
-				function f3( a, b, c ) {
 
-
 
-					scope.faces.push( new THREE.Face3( a, b, c ) );
 
-
 
-				}
 
-
 
-			};
 
-
 
-			Bird.prototype = Object.create( THREE.Geometry.prototype );
 
-			Bird.prototype.constructor = Bird;
 
-
 
-			// Based on https://www.openprocessing.org/sketch/6910
 
-
 
-			var Boid = function () {
 
-
 
-				var vector = new THREE.Vector3(),
 
-					_acceleration, _width = 500, _height = 500, _depth = 200, _goal, _neighborhoodRadius = 100,
 
-					_maxSpeed = 4, _maxSteerForce = 0.1, _avoidWalls = false;
 
-
 
-				this.position = new THREE.Vector3();
 
-				this.velocity = new THREE.Vector3();
 
-				_acceleration = new THREE.Vector3();
 
-
 
-				this.setGoal = function ( target ) {
 
-
 
-					_goal = target;
 
-
 
-				};
 
-
 
-				this.setAvoidWalls = function ( value ) {
 
-
 
-					_avoidWalls = value;
 
-
 
-				};
 
-
 
-				this.setWorldSize = function ( width, height, depth ) {
 
-
 
-					_width = width;
 
-					_height = height;
 
-					_depth = depth;
 
-
 
-				};
 
-
 
-				this.run = function ( boids ) {
 
-
 
-					if ( _avoidWalls ) {
 
-
 
-						vector.set( - _width, this.position.y, this.position.z );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-						vector.set( _width, this.position.y, this.position.z );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-						vector.set( this.position.x, - _height, this.position.z );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-						vector.set( this.position.x, _height, this.position.z );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-						vector.set( this.position.x, this.position.y, - _depth );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-						vector.set( this.position.x, this.position.y, _depth );
 
-						vector = this.avoid( vector );
 
-						vector.multiplyScalar( 5 );
 
-						_acceleration.add( vector );
 
-
 
-					}/* else {
 
-
 
-						this.checkBounds();
 
-
 
-					}
 
-					*/
 
-
 
-					if ( Math.random() > 0.5 ) {
 
-
 
-						this.flock( boids );
 
-
 
-					}
 
-
 
-					this.move();
 
-
 
-				};
 
-
 
-				this.flock = function ( boids ) {
 
-
 
-					if ( _goal ) {
 
-
 
-						_acceleration.add( this.reach( _goal, 0.005 ) );
 
-
 
-					}
 
-
 
-					_acceleration.add( this.alignment( boids ) );
 
-					_acceleration.add( this.cohesion( boids ) );
 
-					_acceleration.add( this.separation( boids ) );
 
-
 
-				};
 
-
 
-				this.move = function () {
 
-
 
-					this.velocity.add( _acceleration );
 
-
 
-					var l = this.velocity.length();
 
-
 
-					if ( l > _maxSpeed ) {
 
-
 
-						this.velocity.divideScalar( l / _maxSpeed );
 
-
 
-					}
 
-
 
-					this.position.add( this.velocity );
 
-					_acceleration.set( 0, 0, 0 );
 
-
 
-				};
 
-
 
-				this.checkBounds = function () {
 
-
 
-					if ( this.position.x > _width ) this.position.x = - _width;
 
-					if ( this.position.x < - _width ) this.position.x = _width;
 
-					if ( this.position.y > _height ) this.position.y = - _height;
 
-					if ( this.position.y < - _height ) this.position.y = _height;
 
-					if ( this.position.z > _depth ) this.position.z = - _depth;
 
-					if ( this.position.z < - _depth ) this.position.z = _depth;
 
-
 
-				};
 
-
 
-				//
 
-
 
-				this.avoid = function ( target ) {
 
-
 
-					var steer = new THREE.Vector3();
 
-
 
-					steer.copy( this.position );
 
-					steer.sub( target );
 
-
 
-					steer.multiplyScalar( 1 / this.position.distanceToSquared( target ) );
 
-
 
-					return steer;
 
-
 
-				};
 
-
 
-				this.repulse = function ( target ) {
 
-
 
-					var distance = this.position.distanceTo( target );
 
-
 
-					if ( distance < 150 ) {
 
-
 
-						var steer = new THREE.Vector3();
 
-
 
-						steer.subVectors( this.position, target );
 
-						steer.multiplyScalar( 0.5 / distance );
 
-
 
-						_acceleration.add( steer );
 
-
 
-					}
 
-
 
-				};
 
-
 
-				this.reach = function ( target, amount ) {
 
-
 
-					var steer = new THREE.Vector3();
 
-
 
-					steer.subVectors( target, this.position );
 
-					steer.multiplyScalar( amount );
 
-
 
-					return steer;
 
-
 
-				};
 
-
 
-				this.alignment = function ( boids ) {
 
-
 
-					var count = 0;
 
-					var velSum = new THREE.Vector3();
 
-
 
-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
-
 
-						if ( Math.random() > 0.6 ) continue;
 
-
 
-						var boid = boids[ i ];
 
-						var distance = boid.position.distanceTo( this.position );
 
-
 
-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
-
 
-							velSum.add( boid.velocity );
 
-							count ++;
 
-
 
-						}
 
-
 
-					}
 
-
 
-					if ( count > 0 ) {
 
-
 
-						velSum.divideScalar( count );
 
-
 
-						var l = velSum.length();
 
-
 
-						if ( l > _maxSteerForce ) {
 
-
 
-							velSum.divideScalar( l / _maxSteerForce );
 
-
 
-						}
 
-
 
-					}
 
-
 
-					return velSum;
 
-
 
-				};
 
-
 
-				this.cohesion = function ( boids ) {
 
-
 
-					var count = 0;
 
-					var posSum = new THREE.Vector3();
 
-					var steer = new THREE.Vector3();
 
-
 
-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
-
 
-						if ( Math.random() > 0.6 ) continue;
 
-
 
-						var boid = boids[ i ];
 
-						var distance = boid.position.distanceTo( this.position );
 
-
 
-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
-
 
-							posSum.add( boid.position );
 
-							count ++;
 
-
 
-						}
 
-
 
-					}
 
-
 
-					if ( count > 0 ) {
 
-
 
-						posSum.divideScalar( count );
 
-
 
-					}
 
-
 
-					steer.subVectors( posSum, this.position );
 
-
 
-					var l = steer.length();
 
-
 
-					if ( l > _maxSteerForce ) {
 
-
 
-						steer.divideScalar( l / _maxSteerForce );
 
-
 
-					}
 
-
 
-					return steer;
 
-
 
-				};
 
-
 
-				this.separation = function ( boids ) {
 
-
 
-					var posSum = new THREE.Vector3();
 
-					var repulse = new THREE.Vector3();
 
-
 
-					for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
-
 
-						if ( Math.random() > 0.6 ) continue;
 
-
 
-						var boid = boids[ i ];
 
-						var distance = boid.position.distanceTo( this.position );
 
-
 
-						if ( distance > 0 && distance <= _neighborhoodRadius ) {
 
-
 
-							repulse.subVectors( this.position, boid.position );
 
-							repulse.normalize();
 
-							repulse.divideScalar( distance );
 
-							posSum.add( repulse );
 
-
 
-						}
 
-
 
-					}
 
-
 
-					return posSum;
 
-
 
-				};
 
-
 
-			};
 
-
 
-			var SCREEN_WIDTH = window.innerWidth,
 
-				SCREEN_HEIGHT = window.innerHeight,
 
-				SCREEN_WIDTH_HALF = SCREEN_WIDTH / 2,
 
-				SCREEN_HEIGHT_HALF = SCREEN_HEIGHT / 2;
 
-
 
-			var camera, scene, renderer, birds, bird;
 
-
 
-			var boid, boids;
 
-
 
-			var stats;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
-				camera.position.z = 450;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-
 
-				birds = [];
 
-				boids = [];
 
-
 
-				for ( var i = 0; i < 200; i ++ ) {
 
-
 
-					boid = boids[ i ] = new Boid();
 
-					boid.position.x = Math.random() * 400 - 200;
 
-					boid.position.y = Math.random() * 400 - 200;
 
-					boid.position.z = Math.random() * 400 - 200;
 
-					boid.velocity.x = Math.random() * 2 - 1;
 
-					boid.velocity.y = Math.random() * 2 - 1;
 
-					boid.velocity.z = Math.random() * 2 - 1;
 
-					boid.setAvoidWalls( true );
 
-					boid.setWorldSize( 500, 500, 400 );
 
-
 
-					bird = birds[ i ] = new THREE.Mesh( new Bird(), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
 
-					bird.phase = Math.floor( Math.random() * 62.83 );
 
-					scene.add( bird );
 
-
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				document.getElementById( 'container' ).appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );
 
-
 
-				for ( var i = 0, il = boids.length; i < il; i ++ ) {
 
-
 
-					boid = boids[ i ];
 
-
 
-					vector.z = boid.position.z;
 
-
 
-					boid.repulse( vector );
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				stats.begin();
 
-				render();
 
-				stats.end();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				for ( var i = 0, il = birds.length; i < il; i ++ ) {
 
-
 
-					boid = boids[ i ];
 
-					boid.run( boids );
 
-
 
-					bird = birds[ i ];
 
-					bird.position.copy( boids[ i ].position );
 
-
 
-					var color = bird.material.color;
 
-					color.r = color.g = color.b = ( 500 - bird.position.z ) / 1000;
 
-
 
-					bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
 
-					bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );
 
-
 
-					bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 ) ) % 62.83;
 
-					bird.geometry.vertices[ 5 ].y = bird.geometry.vertices[ 4 ].y = Math.sin( bird.phase ) * 5;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 209
examples/canvas_geometry_cube.html
查看文件 

@@ -1,209 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - cube</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var cube, plane;
 
-
 
-			var targetRotation = 0;
 
-			var targetRotationOnMouseDown = 0;
 
-
 
-			var mouseX = 0;
 
-			var mouseXOnMouseDown = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = 'Drag to spin the cube';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.y = 150;
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-
 
-				// Cube
 
-
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
-
 
-				for ( var i = 0; i < geometry.faces.length; i += 2 ) {
 
-
 
-					var hex = Math.random() * 0xffffff;
 
-					geometry.faces[ i ].color.setHex( hex );
 
-					geometry.faces[ i + 1 ].color.setHex( hex );
 
-
 
-				}
 
-
 
-				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
 
-
 
-				cube = new THREE.Mesh( geometry, material );
 
-				cube.position.y = 150;
 
-				scene.add( cube );
 
-
 
-				// Plane
 
-
 
-				var geometry = new THREE.PlaneBufferGeometry( 200, 200 );
 
-				geometry.rotateX( - Math.PI / 2 );
 
-
 
-				var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );
 
-
 
-				plane = new THREE.Mesh( geometry, material );
 
-				scene.add( plane );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
 
-				targetRotationOnMouseDown = targetRotation;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentMouseOut() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotationOnMouseDown = targetRotation;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				stats.begin();
 
-				render();
 
-				stats.end();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				plane.rotation.y = cube.rotation.y += ( targetRotation - cube.rotation.y ) * 0.05;
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 176
examples/canvas_geometry_earth.html
查看文件 

@@ -1,176 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - earth</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #808080;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-
 
-				color: #0080ff;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth demo</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-			var group;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-
 
-				group = new THREE.Group();
 
-				scene.add( group );
 
-
 
-				// earth
 
-
 
-				var loader = new THREE.TextureLoader();
 
-				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
 
-
 
-					var geometry = new THREE.SphereBufferGeometry( 200, 20, 20 );
 
-
 
-					var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-					group.add( mesh );
 
-
 
-				} );
 
-
 
-				// shadow
 
-
 
-				var canvas = document.createElement( 'canvas' );
 
-				canvas.width = 128;
 
-				canvas.height = 128;
 
-
 
-				var context = canvas.getContext( '2d' );
 
-				var gradient = context.createRadialGradient(
 
-					canvas.width / 2,
 
-					canvas.height / 2,
 
-					0,
 
-					canvas.width / 2,
 
-					canvas.height / 2,
 
-					canvas.width / 2
 
-				);
 
-				gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
 
-				gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
 
-
 
-				context.fillStyle = gradient;
 
-				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-
 
-				var texture = new THREE.CanvasTexture( canvas );
 
-
 
-				var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
-
 
-				var mesh = new THREE.Mesh( geometry, material );
 
-				mesh.position.y = - 250;
 
-				mesh.rotation.x = - Math.PI / 2;
 
-				group.add( mesh );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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 );
 
-				mouseY = ( event.clientY - windowHalfY );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-				camera.lookAt( scene.position );
 
-
 
-				group.rotation.y -= 0.005;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

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

@@ -1,136 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - 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">
 
-		<style>
 
-			body {
 
-				background:#fff;
 
-				padding:0;
 
-				margin:0;
 
-				font-weight: bold;
 
-				overflow:hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer, group;
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			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;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xffffff );
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-				var material = new THREE.MeshNormalMaterial( { overdraw: 0.5 } );
 
-
 
-				group = new THREE.Group();
 
-
 
-				for ( var i = 0; i < 200; i ++ ) {
 
-
 
-					var 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.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				camera.lookAt( scene.position );
 
-
 
-				var currentSeconds = Date.now();
 
-				group.rotation.x = Math.sin( currentSeconds * 0.0007 ) * 0.5;
 
-				group.rotation.y = Math.sin( currentSeconds * 0.0003 ) * 0.5;
 
-				group.rotation.z = Math.sin( currentSeconds * 0.0002 ) * 0.5;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 245
examples/canvas_geometry_nurbs.html
查看文件 

@@ -1,245 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - NURBS</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				text-align:center;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<canvas id="debug" style="position:absolute; left:100px"></canvas>
 
-
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - NURBS curve example</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/curves/NURBSCurve.js"></script>
 
-		<script src="js/curves/NURBSUtils.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-			var group;
 
-
 
-			var targetRotation = 0;
 
-			var targetRotationOnMouseDown = 0;
 
-
 
-			var mouseX = 0;
 
-			var mouseXOnMouseDown = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '30px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = 'Drag to spin';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, 150, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				group = new THREE.Group();
 
-				group.position.y = 50;
 
-				scene.add( group );
 
-
 
-				// NURBS curve
 
-
 
-				var nurbsControlPoints = [];
 
-				var nurbsKnots = [];
 
-				var nurbsDegree = 3;
 
-
 
-				for ( var i = 0; i <= nurbsDegree; i ++ ) {
 
-
 
-					nurbsKnots.push( 0 );
 
-
 
-				}
 
-
 
-				for ( var i = 0, j = 20; i < j; i ++ ) {
 
-
 
-					nurbsControlPoints.push(
 
-						new THREE.Vector4(
 
-							Math.random() * 400 - 200,
 
-							Math.random() * 400,
 
-							Math.random() * 400 - 200,
 
-							1 // weight of control point: higher means stronger attraction
 
-						)
 
-					);
 
-
 
-					var knot = ( i + 1 ) / ( j - nurbsDegree );
 
-					nurbsKnots.push( THREE.Math.clamp( knot, 0, 1 ) );
 
-
 
-				}
 
-
 
-				var nurbsCurve = new THREE.NURBSCurve( nurbsDegree, nurbsKnots, nurbsControlPoints );
 
-
 
-				var nurbsGeometry = new THREE.BufferGeometry();
 
-				nurbsGeometry.setFromPoints( nurbsCurve.getPoints( 200 ) );
 
-
 
-				var nurbsMaterial = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333 } );
 
-
 
-				var nurbsLine = new THREE.Line( nurbsGeometry, nurbsMaterial );
 
-				nurbsLine.position.set( 0, - 100, 0 );
 
-				group.add( nurbsLine );
 
-
 
-				var nurbsControlPointsGeometry = new THREE.BufferGeometry();
 
-				nurbsControlPointsGeometry.setFromPoints( nurbsCurve.controlPoints );
 
-
 
-				var nurbsControlPointsMaterial = new THREE.LineBasicMaterial( { linewidth: 2, color: 0x333333, opacity: 0.25 } );
 
-
 
-				var nurbsControlPointsLine = new THREE.Line( nurbsControlPointsGeometry, nurbsControlPointsMaterial );
 
-				nurbsControlPointsLine.position.copy( nurbsLine.position );
 
-
 
-				group.add( nurbsControlPointsLine );
 
-
 
-				//
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
 
-				targetRotationOnMouseDown = targetRotation;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentMouseOut() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotationOnMouseDown = targetRotation;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 237
examples/canvas_geometry_panorama.html
查看文件 

@@ -1,237 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - panorama demo</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: rgb(200,200,200);
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				font-weight: bold;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var texture_placeholder,
 
-				isUserInteracting = false,
 
-				onPointerDownPointerX = 0, onPointerDownPointerY = 0,
 
-				onPointerDownLon = 0, onPointerDownLat = 0,
 
-				lon = 90, lat = 0, phi = 0, theta = 0,
 
-				target = new THREE.Vector3();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container, mesh;
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				texture_placeholder = document.createElement( 'canvas' );
 
-				texture_placeholder.width = 128;
 
-				texture_placeholder.height = 128;
 
-
 
-				var context = texture_placeholder.getContext( '2d' );
 
-				context.fillStyle = 'rgb( 200, 200, 200 )';
 
-				context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );
 
-
 
-				var materials = [
 
-
 
-					loadTexture( 'textures/cube/skybox/px.jpg' ), // right
 
-					loadTexture( 'textures/cube/skybox/nx.jpg' ), // left
 
-					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
 
-					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
 
-					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
 
-					loadTexture( 'textures/cube/skybox/nz.jpg' ) // front
 
-
 
-				];
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 300, 300, 300, 7, 7, 7 );
 
-				geometry.scale( - 1, 1, 1 );
 
-
 
-				mesh = new THREE.Mesh( geometry, materials );
 
-				scene.add( mesh );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
-
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function loadTexture( path ) {
 
-
 
-				var texture = new THREE.Texture( texture_placeholder );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
-
 
-				var image = new Image();
 
-				image.onload = function () {
 
-
 
-					texture.image = this;
 
-					texture.needsUpdate = true;
 
-
 
-				};
 
-				image.src = path;
 
-
 
-				return material;
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				isUserInteracting = true;
 
-
 
-				onPointerDownPointerX = event.clientX;
 
-				onPointerDownPointerY = event.clientY;
 
-
 
-				onPointerDownLon = lon;
 
-				onPointerDownLat = lat;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				if ( isUserInteracting === true ) {
 
-
 
-					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 
-					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				isUserInteracting = false;
 
-
 
-			}
 
-
 
-			function onDocumentMouseWheel( event ) {
 
-
 
-				var fov = camera.fov + event.deltaY * 0.05;
 
-
 
-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
-
 
-				camera.updateProjectionMatrix();
 
-
 
-			}
 
-
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					onPointerDownPointerX = event.touches[ 0 ].pageX;
 
-					onPointerDownPointerY = event.touches[ 0 ].pageY;
 
-
 
-					onPointerDownLon = lon;
 
-					onPointerDownLat = lat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					lon = ( onPointerDownPointerX - event.touches[ 0 ].pageX ) * 0.1 + onPointerDownLon;
 
-					lat = ( event.touches[ 0 ].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				update();
 
-
 
-			}
 
-
 
-			function update() {
 
-
 
-				if ( isUserInteracting === false ) {
 
-
 
-					lon += 0.1;
 
-
 
-				}
 
-
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon );
 
-
 
-				target.x = 500 * Math.sin( phi ) * Math.cos( theta );
 
-				target.y = 500 * Math.cos( phi );
 
-				target.z = 500 * Math.sin( phi ) * Math.sin( theta );
 
-
 
-				camera.lookAt( target );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 248
examples/canvas_geometry_panorama_fisheye.html
查看文件 

@@ -1,248 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - panorama fisheye demo</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: rgb(200,200,200);
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				font-weight: bold;
 
-				text-align:center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - panorama fisheye demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>. (mousewheel: change fov)</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var texture_placeholder,
 
-				isUserInteracting = false,
 
-				onPointerDownPointerX = 0, onPointerDownPointerY = 0,
 
-				onPointerDownLon = 0, onPointerDownLat = 0,
 
-				lon = 90, lat = 0, phi = 0, theta = 0,
 
-				target = new THREE.Vector3();
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container, mesh;
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				texture_placeholder = document.createElement( 'canvas' );
 
-				texture_placeholder.width = 128;
 
-				texture_placeholder.height = 128;
 
-
 
-				var context = texture_placeholder.getContext( '2d' );
 
-				context.fillStyle = 'rgb( 200, 200, 200 )';
 
-				context.fillRect( 0, 0, texture_placeholder.width, texture_placeholder.height );
 
-
 
-				var materials = [
 
-
 
-					loadTexture( 'textures/cube/skybox/px.jpg' ), // right
 
-					loadTexture( 'textures/cube/skybox/nx.jpg' ), // left
 
-					loadTexture( 'textures/cube/skybox/py.jpg' ), // top
 
-					loadTexture( 'textures/cube/skybox/ny.jpg' ), // bottom
 
-					loadTexture( 'textures/cube/skybox/pz.jpg' ), // back
 
-					loadTexture( 'textures/cube/skybox/nz.jpg' ) // front
 
-
 
-				];
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 300, 300, 300, 7, 7, 7 );
 
-				geometry.scale( - 1, 1, 1 );
 
-
 
-				mesh = new THREE.Mesh( geometry, materials );
 
-				scene.add( mesh );
 
-
 
-				var vec = new THREE.Vector3();
 
-				var positions = mesh.geometry.attributes.position;
 
-
 
-				for ( var i = 0, l = positions.count; i < l; i ++ ) {
 
-
 
-					vec.fromBufferAttribute( positions, i );
 
-					vec.setLength( 550 );
 
-					positions.setXYZ( i, vec.x, vec.y, vec.z );
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
-
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function loadTexture( path ) {
 
-
 
-				var texture = new THREE.Texture( texture_placeholder );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
-
 
-				var image = new Image();
 
-				image.onload = function () {
 
-
 
-					texture.image = this;
 
-					texture.needsUpdate = true;
 
-
 
-				};
 
-				image.src = path;
 
-
 
-				return material;
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				isUserInteracting = true;
 
-
 
-				onPointerDownPointerX = event.clientX;
 
-				onPointerDownPointerY = event.clientY;
 
-
 
-				onPointerDownLon = lon;
 
-				onPointerDownLat = lat;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				if ( isUserInteracting === true ) {
 
-
 
-					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 
-					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				isUserInteracting = false;
 
-
 
-			}
 
-
 
-			function onDocumentMouseWheel( event ) {
 
-
 
-				var fov = camera.fov + event.deltaY * 0.05;
 
-
 
-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
-
 
-				camera.updateProjectionMatrix();
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					onPointerDownPointerX = event.touches[ 0 ].pageX;
 
-					onPointerDownPointerY = event.touches[ 0 ].pageY;
 
-
 
-					onPointerDownLon = lon;
 
-					onPointerDownLat = lat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					lon = ( onPointerDownPointerX - event.touches[ 0 ].pageX ) * 0.1 + onPointerDownLon;
 
-					lat = ( event.touches[ 0 ].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				update();
 
-
 
-			}
 
-
 
-			function update() {
 
-
 
-				if ( isUserInteracting === false ) {
 
-
 
-					lon += 0.1;
 
-
 
-				}
 
-
 
-				lat = Math.max( - 85, Math.min( 85, lat ) );
 
-				phi = THREE.Math.degToRad( 90 - lat );
 
-				theta = THREE.Math.degToRad( lon );
 
-
 
-				target.x = 500 * Math.sin( phi ) * Math.cos( theta );
 
-				target.y = 500 * Math.cos( phi );
 
-				target.z = 500 * Math.sin( phi ) * Math.sin( theta );
 
-
 
-				camera.position.copy( target ).negate();
 
-				camera.lookAt( target );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 409
examples/canvas_geometry_shapes.html
查看文件 

@@ -1,409 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - shapes</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				position: absolute;
 
-				top: 0px;
 
-				width: 100%;
 
-				padding: 5px;
 
-				text-align:center;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<canvas id="debug" style="position:absolute; left:100px"></canvas>
 
-
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - shape geometry</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer, group;
 
-
 
-			var targetRotation = 0;
 
-			var targetRotationOnMouseDown = 0;
 
-
 
-			var mouseX = 0;
 
-			var mouseXOnMouseDown = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, 150, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				group = new THREE.Group();
 
-				group.position.y = 50;
 
-				scene.add( group );
 
-
 
-				function addShape( shape, color, x, y, z, rx, ry, rz, s ) {
 
-
 
-					// flat shape
 
-
 
-					var geometry = new THREE.ShapeBufferGeometry( shape );
 
-					var material = new THREE.MeshBasicMaterial( { color: color, overdraw: 0.5 } );
 
-
 
-					var mesh = new THREE.Mesh( geometry, material );
 
-					mesh.position.set( x, y, z );
 
-					mesh.rotation.set( rx, ry, rz );
 
-					mesh.scale.set( s, s, s );
 
-					group.add( mesh );
 
-
 
-					// line
 
-
 
-					var points = shape.getPoints();
 
-					var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-
 
-					var material = new THREE.LineBasicMaterial( { linewidth: 10, color: 0x333333 } );
 
-
 
-					var line = new THREE.Line( geometry, material );
 
-					line.position.set( x, y, z );
 
-					line.rotation.set( rx, ry, rz );
 
-					line.scale.set( s, s, s );
 
-					group.add( line );
 
-
 
-				}
 
-
 
-
 
-				// California
 
-
 
-				var californiaPts = [];
 
-
 
-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
 
-				californiaPts.push( new THREE.Vector2( 450, 300 ) );
 
-				californiaPts.push( new THREE.Vector2( 392, 392 ) );
 
-				californiaPts.push( new THREE.Vector2( 266, 438 ) );
 
-				californiaPts.push( new THREE.Vector2( 190, 570 ) );
 
-				californiaPts.push( new THREE.Vector2( 190, 600 ) );
 
-				californiaPts.push( new THREE.Vector2( 160, 620 ) );
 
-				californiaPts.push( new THREE.Vector2( 160, 650 ) );
 
-				californiaPts.push( new THREE.Vector2( 180, 640 ) );
 
-				californiaPts.push( new THREE.Vector2( 165, 680 ) );
 
-				californiaPts.push( new THREE.Vector2( 150, 670 ) );
 
-				californiaPts.push( new THREE.Vector2( 90, 737 ) );
 
-				californiaPts.push( new THREE.Vector2( 80, 795 ) );
 
-				californiaPts.push( new THREE.Vector2( 50, 835 ) );
 
-				californiaPts.push( new THREE.Vector2( 64, 870 ) );
 
-				californiaPts.push( new THREE.Vector2( 60, 945 ) );
 
-				californiaPts.push( new THREE.Vector2( 300, 945 ) );
 
-				californiaPts.push( new THREE.Vector2( 300, 743 ) );
 
-				californiaPts.push( new THREE.Vector2( 600, 473 ) );
 
-				californiaPts.push( new THREE.Vector2( 626, 425 ) );
 
-				californiaPts.push( new THREE.Vector2( 600, 370 ) );
 
-				californiaPts.push( new THREE.Vector2( 610, 320 ) );
 
-
 
-				var californiaShape = new THREE.Shape( californiaPts );
 
-
 
-
 
-				// Triangle
 
-
 
-				var triangleShape = new THREE.Shape();
 
-				triangleShape.moveTo( 80, 20 );
 
-				triangleShape.lineTo( 40, 80 );
 
-				triangleShape.lineTo( 120, 80 );
 
-				triangleShape.lineTo( 80, 20 ); // close path
 
-
 
-
 
-				// Heart
 
-
 
-				var x = 0, y = 0;
 
-
 
-				var heartShape = new THREE.Shape(); // From http://blog.burlock.org/html5/130-paths
 
-
 
-				heartShape.moveTo( x + 25, y + 25 );
 
-				heartShape.bezierCurveTo( x + 25, y + 25, x + 20, y, x, y );
 
-				heartShape.bezierCurveTo( x - 30, y, x - 30, y + 35, x - 30, y + 35 );
 
-				heartShape.bezierCurveTo( x - 30, y + 55, x - 10, y + 77, x + 25, y + 95 );
 
-				heartShape.bezierCurveTo( x + 60, y + 77, x + 80, y + 55, x + 80, y + 35 );
 
-				heartShape.bezierCurveTo( x + 80, y + 35, x + 80, y, x + 50, y );
 
-				heartShape.bezierCurveTo( x + 35, y, x + 25, y + 25, x + 25, y + 25 );
 
-
 
-
 
-				// Square
 
-
 
-				var sqLength = 80;
 
-
 
-				var squareShape = new THREE.Shape();
 
-				squareShape.moveTo( 0, 0 );
 
-				squareShape.lineTo( 0, sqLength );
 
-				squareShape.lineTo( sqLength, sqLength );
 
-				squareShape.lineTo( sqLength, 0 );
 
-				squareShape.lineTo( 0, 0 );
 
-
 
-
 
-				// Rectangle
 
-
 
-				var rectLength = 120, rectWidth = 40;
 
-
 
-				var rectShape = new THREE.Shape();
 
-				rectShape.moveTo( 0, 0 );
 
-				rectShape.lineTo( 0, rectWidth );
 
-				rectShape.lineTo( rectLength, rectWidth );
 
-				rectShape.lineTo( rectLength, 0 );
 
-				rectShape.lineTo( 0, 0 );
 
-
 
-
 
-				// Rounded rectangle
 
-
 
-				var roundedRectShape = new THREE.Shape();
 
-
 
-				( function roundedRect( ctx, x, y, width, height, radius ) {
 
-
 
-					ctx.moveTo( x, y + radius );
 
-					ctx.lineTo( x, y + height - radius );
 
-					ctx.quadraticCurveTo( x, y + height, x + radius, y + height );
 
-					ctx.lineTo( x + width - radius, y + height );
 
-					ctx.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
 
-					ctx.lineTo( x + width, y + radius );
 
-					ctx.quadraticCurveTo( x + width, y, x + width - radius, y );
 
-					ctx.lineTo( x + radius, y );
 
-					ctx.quadraticCurveTo( x, y, x, y + radius );
 
-
 
-				} )( roundedRectShape, 0, 0, 50, 50, 20 );
 
-
 
-
 
-				// Circle
 
-
 
-				var circleRadius = 40;
 
-				var circleShape = new THREE.Shape();
 
-				circleShape.moveTo( 0, circleRadius );
 
-				circleShape.quadraticCurveTo( circleRadius, circleRadius, circleRadius, 0 );
 
-				circleShape.quadraticCurveTo( circleRadius, - circleRadius, 0, - circleRadius );
 
-				circleShape.quadraticCurveTo( - circleRadius, - circleRadius, - circleRadius, 0 );
 
-				circleShape.quadraticCurveTo( - circleRadius, circleRadius, 0, circleRadius );
 
-
 
-
 
-				// Fish
 
-
 
-				x = y = 0;
 
-
 
-				var fishShape = new THREE.Shape();
 
-
 
-				fishShape.moveTo( x, y );
 
-				fishShape.quadraticCurveTo( x + 50, y - 80, x + 90, y - 10 );
 
-				fishShape.quadraticCurveTo( x + 100, y - 10, x + 115, y - 40 );
 
-				fishShape.quadraticCurveTo( x + 115, y, x + 115, y + 40 );
 
-				fishShape.quadraticCurveTo( x + 100, y + 10, x + 90, y + 10 );
 
-				fishShape.quadraticCurveTo( x + 50, y + 80, x, y );
 
-
 
-
 
-				// Arc circle
 
-
 
-				var arcShape = new THREE.Shape();
 
-				arcShape.moveTo( 50, 10 );
 
-				arcShape.absarc( 10, 10, 40, 0, Math.PI * 2, false );
 
-
 
-				var holePath = new THREE.Path();
 
-				holePath.moveTo( 20, 10 );
 
-				holePath.absarc( 10, 10, 10, 0, Math.PI * 2, true );
 
-				arcShape.holes.push( holePath );
 
-
 
-
 
-				// Smiley
 
-
 
-				var smileyShape = new THREE.Shape();
 
-				smileyShape.moveTo( 80, 40 );
 
-				smileyShape.absarc( 40, 40, 40, 0, Math.PI * 2, false );
 
-
 
-				var smileyEye1Path = new THREE.Path();
 
-				smileyEye1Path.moveTo( 35, 20 );
 
-				// smileyEye1Path.absarc( 25, 20, 10, 0, Math.PI*2, true );
 
-				smileyEye1Path.absellipse( 25, 20, 10, 10, 0, Math.PI * 2, true );
 
-
 
-				smileyShape.holes.push( smileyEye1Path );
 
-
 
-				var smileyEye2Path = new THREE.Path();
 
-				smileyEye2Path.moveTo( 65, 20 );
 
-				smileyEye2Path.absarc( 55, 20, 10, 0, Math.PI * 2, true );
 
-				smileyShape.holes.push( smileyEye2Path );
 
-
 
-				var smileyMouthPath = new THREE.Path();
 
-				// ugly box mouth
 
-				// smileyMouthPath.moveTo( 20, 40 );
 
-				// smileyMouthPath.lineTo( 60, 40 );
 
-				// smileyMouthPath.lineTo( 60, 60 );
 
-				// smileyMouthPath.lineTo( 20, 60 );
 
-				// smileyMouthPath.lineTo( 20, 40 );
 
-
 
-				smileyMouthPath.moveTo( 20, 40 );
 
-				smileyMouthPath.quadraticCurveTo( 40, 60, 60, 40 );
 
-				smileyMouthPath.bezierCurveTo( 70, 45, 70, 50, 60, 60 );
 
-				smileyMouthPath.quadraticCurveTo( 40, 80, 20, 60 );
 
-				smileyMouthPath.quadraticCurveTo( 5, 50, 20, 40 );
 
-
 
-				smileyShape.holes.push( smileyMouthPath );
 
-
 
-
 
-				// Spline shape + path extrusion
 
-
 
-				var splinepts = [];
 
-				splinepts.push( new THREE.Vector2( 350, 100 ) );
 
-				splinepts.push( new THREE.Vector2( 400, 450 ) );
 
-				splinepts.push( new THREE.Vector2( - 140, 350 ) );
 
-				splinepts.push( new THREE.Vector2( 0, 0 ) );
 
-
 
-				var splineShape = new THREE.Shape( );
 
-				splineShape.moveTo( 0, 0 );
 
-				splineShape.splineThru( splinepts );
 
-
 
-
 
-				// addShape( shape, color, x, y, z, rx, ry,rz, s );
 
-
 
-				addShape( californiaShape, 0xffaa00, - 300, - 100, 0, 0, 0, 0, 0.25 );
 
-				addShape( triangleShape, 0xffee00, - 180, 0, 0, 0, 0, 0, 1 );
 
-				addShape( roundedRectShape, 0x005500, - 150, 150, 0, 0, 0, 0, 1 );
 
-				addShape( squareShape, 0x0055ff, 150, 100, 0, 0, 0, 0, 1 );
 
-				addShape( heartShape, 0xff1100, 60, 100, 0, 0, 0, Math.PI, 1 );
 
-				addShape( circleShape, 0x00ff11, 120, 250, 0, 0, 0, 0, 1 );
 
-				addShape( fishShape, 0x222222, - 60, 200, 0, 0, 0, 0, 1 );
 
-				addShape( smileyShape, 0xee00ff, - 200, 250, 0, 0, 0, Math.PI, 1 );
 
-				addShape( arcShape, 0xbb4422, 150, 0, 0, 0, 0, 0, 1 );
 
-				addShape( splineShape, 0x888888, - 50, - 100, 0, 0, 0, 0, 0.2 );
 
-
 
-				//
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.sortElements = false;
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
 
-				targetRotationOnMouseDown = targetRotation;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentMouseOut() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotationOnMouseDown = targetRotation;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 218
examples/canvas_geometry_terrain.html
查看文件 

@@ -1,218 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - terrain</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #71544e;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-
 
-				background-color: #bfd1e5;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-			}
 
-
 
-			a {
 
-
 
-				color: #b07861;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"><br /><br /><br /><br /><br />Generating...</div>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - terrain demo. <a href="canvas_geometry_terrain.html">generate another</a></div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script src="js/ImprovedNoise.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var mesh;
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xbfd1e5 );
 
-
 
-				var data = generateHeight( 1024, 1024 );
 
-				var texture = new THREE.CanvasTexture( generateTexture( data, 1024, 1024 ) );
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide, overdraw: 0.5 } );
 
-
 
-				var quality = 16, step = 1024 / quality;
 
-
 
-				var geometry = new THREE.PlaneBufferGeometry( 2000, 2000, quality - 1, quality - 1 );
 
-				geometry.rotateX( - Math.PI / 2 );
 
-
 
-				var positions = geometry.attributes.position;
 
-
 
-				for ( var i = 0, l = positions.count; i < l; i ++ ) {
 
-
 
-					var x = i % quality, y = Math.floor( i / quality );
 
-					positions.setY( i, data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128 );
 
-
 
-				}
 
-
 
-				mesh = new THREE.Mesh( geometry, material );
 
-				scene.add( mesh );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				container.innerHTML = "";
 
-
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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 generateHeight( width, height ) {
 
-
 
-				var data = new Uint8Array( width * height ), perlin = new ImprovedNoise(),
 
-					size = width * height, quality = 2, z = Math.random() * 100;
 
-
 
-				for ( var j = 0; j < 4; j ++ ) {
 
-
 
-					quality *= 4;
 
-
 
-					for ( var i = 0; i < size; i ++ ) {
 
-
 
-						var x = i % width, y = ~ ~ ( i / width );
 
-						data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * 0.5 ) * quality + 10;
 
-
 
-					}
 
-
 
-				}
 
-
 
-				return data;
 
-
 
-			}
 
-
 
-			function generateTexture( data, width, height ) {
 
-
 
-				var canvas, context, image, imageData, vector3, sun, shade;
 
-
 
-				vector3 = new THREE.Vector3( 0, 0, 0 );
 
-
 
-				sun = new THREE.Vector3( 1, 1, 1 );
 
-				sun.normalize();
 
-
 
-				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, width, height );
 
-				imageData = image.data;
 
-
 
-				for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
 
-
 
-					vector3.x = data[ j - 1 ] - data[ j + 1 ];
 
-					vector3.y = 2;
 
-					vector3.z = data[ j - width ] - data[ j + width ];
 
-					vector3.normalize();
 
-
 
-					shade = vector3.dot( sun );
 
-
 
-					imageData[ i ] = ( 96 + shade * 128 ) * ( data[ j ] * 0.007 );
 
-					imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( data[ j ] * 0.007 );
 
-					imageData[ i + 2 ] = ( shade * 96 ) * ( data[ j ] * 0.007 );
 
-
 
-				}
 
-
 
-				context.putImageData( image, 0, 0 );
 
-
 
-				return canvas;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05 + 15;
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 229
examples/canvas_geometry_text.html
查看文件 

@@ -1,229 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - geometry - text</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var group;
 
-
 
-			var targetRotation = 0;
 
-			var targetRotationOnMouseDown = 0;
 
-
 
-			var mouseX = 0;
 
-			var mouseXOnMouseDown = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-
 
-			var loader = new THREE.FontLoader();
 
-			loader.load( 'fonts/helvetiker_regular.typeface.json', function ( font ) {
 
-
 
-				init( font );
 
-				animate();
 
-
 
-			} );
 
-
 
-			function init( font ) {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = 'Simple Dynamic 3D Text Example by <a href="http://www.lab4games.net/zz85/blog">zz85</a><br>Drag to spin the text';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, 150, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				// Get text from hash
 
-
 
-				var theText = "Hello three.js! :)";
 
-
 
-				var hash = document.location.hash.substr( 1 );
 
-
 
-				if ( hash.length !== 0 ) {
 
-
 
-					theText = hash;
 
-
 
-				}
 
-
 
-				var geometry = new THREE.TextBufferGeometry( theText, {
 
-
 
-					font: font,
 
-					size: 80,
 
-					height: 20,
 
-					curveSegments: 2
 
-
 
-				} );
 
-
 
-				geometry.computeBoundingBox();
 
-
 
-				var centerOffset = - 0.5 * ( geometry.boundingBox.max.x - geometry.boundingBox.min.x );
 
-
 
-				var materials = [
 
-					new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, overdraw: 0.5 } ),
 
-					new THREE.MeshBasicMaterial( { color: 0x000000, overdraw: 0.5 } )
 
-				];
 
-
 
-				var mesh = new THREE.Mesh( geometry, materials );
 
-
 
-				mesh.position.x = centerOffset;
 
-				mesh.position.y = 100;
 
-				mesh.position.z = 0;
 
-
 
-				mesh.rotation.x = 0;
 
-				mesh.rotation.y = Math.PI * 2;
 
-
 
-				group = new THREE.Group();
 
-				group.add( mesh );
 
-
 
-				scene.add( group );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				windowHalfX = window.innerWidth / 2;
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-				mouseXOnMouseDown = event.clientX - windowHalfX;
 
-				targetRotationOnMouseDown = targetRotation;
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-
 
-				targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
 
-
 
-			}
 
-
 
-			function onDocumentMouseUp() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentMouseOut() {
 
-
 
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotationOnMouseDown = targetRotation;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 199
examples/canvas_interactive_cubes.html
查看文件 

@@ -1,199 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - interactive - cubes</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-			var particleMaterial;
 
-
 
-			var raycaster;
 
-			var mouse;
 
-
 
-			var objects = [];
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - clickable objects';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 0, 300, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-
 
-				for ( var i = 0; i < 10; i ++ ) {
 
-
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
 
-					object.position.x = Math.random() * 800 - 400;
 
-					object.position.y = Math.random() * 800 - 400;
 
-					object.position.z = Math.random() * 800 - 400;
 
-
 
-					object.scale.x = Math.random() * 2 + 1;
 
-					object.scale.y = Math.random() * 2 + 1;
 
-					object.scale.z = Math.random() * 2 + 1;
 
-
 
-					object.rotation.x = Math.random() * 2 * Math.PI;
 
-					object.rotation.y = Math.random() * 2 * Math.PI;
 
-					object.rotation.z = Math.random() * 2 * Math.PI;
 
-
 
-					scene.add( object );
 
-
 
-					objects.push( object );
 
-
 
-				}
 
-
 
-				var PI2 = Math.PI * 2;
 
-				particleMaterial = new THREE.SpriteCanvasMaterial( {
 
-
 
-					color: 0x000000,
 
-					program: function ( context ) {
 
-
 
-						context.beginPath();
 
-						context.arc( 0, 0, 0.5, 0, PI2, true );
 
-						context.fill();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				//
 
-
 
-				raycaster = new THREE.Raycaster();
 
-				mouse = new THREE.Vector2();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				event.clientX = event.touches[ 0 ].clientX;
 
-				event.clientY = event.touches[ 0 ].clientY;
 
-				onDocumentMouseDown( event );
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
 
-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
 
-
 
-				raycaster.setFromCamera( mouse, camera );
 
-
 
-				var intersects = raycaster.intersectObjects( objects );
 
-
 
-				if ( intersects.length > 0 ) {
 
-
 
-					intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
 
-
 
-					var particle = new THREE.Sprite( particleMaterial );
 
-					particle.position.copy( intersects[ 0 ].point );
 
-					particle.scale.x = particle.scale.y = 16;
 
-					scene.add( particle );
 
-
 
-				}
 
-
 
-				/*
 
-				// Parse all the faces
 
-				for ( var i in intersects ) {
 
-
 
-					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
-
 
-				}
 
-				*/
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			function render() {
 
-
 
-				theta += 0.1;
 
-
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 186
examples/canvas_interactive_cubes_tween.html
查看文件 

@@ -1,186 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - interactive - cubes tween</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/tween.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-
 
-			var raycaster;
 
-			var mouse;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - clickable objects';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.y = 300;
 
-				camera.position.z = 500;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
 
-
 
-				for ( var i = 0; i < 20; i ++ ) {
 
-
 
-					var object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, opacity: 0.5 } ) );
 
-					object.position.x = Math.random() * 800 - 400;
 
-					object.position.y = Math.random() * 800 - 400;
 
-					object.position.z = Math.random() * 800 - 400;
 
-					object.scale.x = Math.random() * 2 + 1;
 
-					object.scale.y = Math.random() * 2 + 1;
 
-					object.scale.z = Math.random() * 2 + 1;
 
-					object.rotation.x = Math.random() * 2 * Math.PI;
 
-					object.rotation.y = Math.random() * 2 * Math.PI;
 
-					object.rotation.z = Math.random() * 2 * Math.PI;
 
-					scene.add( object );
 
-
 
-				}
 
-
 
-				//
 
-
 
-				raycaster = new THREE.Raycaster();
 
-				mouse = new THREE.Vector2();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				event.clientX = event.touches[ 0 ].clientX;
 
-				event.clientY = event.touches[ 0 ].clientY;
 
-				onDocumentMouseDown( event );
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
 
-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
 
-
 
-				raycaster.setFromCamera( mouse, camera );
 
-
 
-				var intersects = raycaster.intersectObjects( scene.children );
 
-
 
-				if ( intersects.length > 0 ) {
 
-
 
-					new TWEEN.Tween( intersects[ 0 ].object.position ).to( {
 
-						x: Math.random() * 800 - 400,
 
-						y: Math.random() * 800 - 400,
 
-						z: Math.random() * 800 - 400 }, 2000 )
 
-						.easing( TWEEN.Easing.Elastic.Out ).start();
 
-
 
-					new TWEEN.Tween( intersects[ 0 ].object.rotation ).to( {
 
-						x: Math.random() * 2 * Math.PI,
 
-						y: Math.random() * 2 * Math.PI,
 
-						z: Math.random() * 2 * Math.PI }, 2000 )
 
-						.easing( TWEEN.Easing.Elastic.Out ).start();
 
-
 
-				}
 
-
 
-				/*
 
-				// Parse all the faces
 
-				for ( var i in intersects ) {
 
-
 
-					intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
 
-
 
-				}
 
-				*/
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			function render() {
 
-
 
-				TWEEN.update();
 
-
 
-				theta += 0.1;
 
-
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 206
examples/canvas_interactive_sprites.html
查看文件 

@@ -1,206 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - interactive sprites</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-
 
-			var raycaster;
 
-			var mouse;
 
-
 
-			var PI2 = Math.PI * 2;
 
-
 
-			/*
 
-			function programFill( context ) {
 
-
 
-				context.fillRect( - 0.5, - 0.5, 1, 1 );
 
-
 
-			}
 
-
 
-			function programStroke( context ) {
 
-
 
-				context.lineWidth = 0.025;
 
-				context.strokeRect( - 0.5, - 0.5, 1, 1 );
 
-
 
-			}
 
-			*/
 
-
 
-			function programFill( context ) {
 
-
 
-				context.beginPath();
 
-				context.arc( 0, 0, 0.5, 0, PI2, true );
 
-				context.fill();
 
-
 
-			}
 
-
 
-			function programStroke( context ) {
 
-
 
-				context.lineWidth = 0.025;
 
-				context.beginPath();
 
-				context.arc( 0, 0, 0.5, 0, PI2, true );
 
-				context.stroke();
 
-
 
-			}
 
-
 
-			var INTERSECTED;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - interactive sprites';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 0, 300, 500 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				for ( var i = 0; i < 100; i ++ ) {
 
-
 
-					var material = new THREE.SpriteCanvasMaterial( {
 
-						color: Math.random() * 0x808080 + 0x808080,
 
-						program: programStroke
 
-					} );
 
-
 
-					var sprite = new THREE.Sprite( material );
 
-					sprite.position.x = Math.random() * 800 - 400;
 
-					sprite.position.y = Math.random() * 800 - 400;
 
-					sprite.position.z = Math.random() * 800 - 400;
 
-					sprite.scale.setScalar( Math.random() * 20 + 20 );
 
-					scene.add( sprite );
 
-
 
-				}
 
-
 
-				//
 
-
 
-				raycaster = new THREE.Raycaster();
 
-				mouse = new THREE.Vector2();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
 
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			function render() {
 
-
 
-				// rotate camera
 
-
 
-				theta += 0.1;
 
-
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
-				camera.lookAt( scene.position );
 
-
 
-				camera.updateMatrixWorld();
 
-
 
-				// find intersections
 
-
 
-				raycaster.setFromCamera( mouse, camera );
 
-
 
-				var intersects = raycaster.intersectObjects( scene.children );
 
-
 
-				if ( intersects.length > 0 ) {
 
-
 
-					var object = intersects[ 0 ].object;
 
-
 
-					if ( INTERSECTED !== object ) {
 
-
 
-						if ( INTERSECTED ) INTERSECTED.material.program = programStroke;
 
-
 
-						INTERSECTED = object;
 
-						INTERSECTED.material.program = programFill;
 
-
 
-					}
 
-
 
-				} else if ( INTERSECTED ) {
 
-
 
-					INTERSECTED.material.program = programStroke;
 
-					INTERSECTED = null;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 202
examples/canvas_interactive_voxelpainter.html
查看文件 

@@ -1,202 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - interactive - voxel painter</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var container;
 
-			var camera, scene, renderer;
 
-			var plane;
 
-
 
-			var mouse, raycaster, isShiftDown = false;
 
-
 
-			var cubeGeometry = new THREE.BoxBufferGeometry( 50, 50, 50 );
 
-			var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00ff80, overdraw: 0.5 } );
 
-
 
-			var objects = [];
 
-
 
-			init();
 
-			render();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - voxel painter<br><strong>click</strong>: add voxel, <strong>shift + click</strong>: remove voxel, <a href="javascript:save()">save .png</a>';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 500, 800, 1300 );
 
-				camera.lookAt( 0, 0, 0 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				// Grid
 
-
 
-				var gridHelper = new THREE.GridHelper( 1000, 20 );
 
-				scene.add( gridHelper );
 
-
 
-				//
 
-
 
-				raycaster = new THREE.Raycaster();
 
-				mouse = new THREE.Vector2();
 
-
 
-				var geometry = new THREE.PlaneBufferGeometry( 1000, 1000 );
 
-				geometry.rotateX( - Math.PI / 2 );
 
-
 
-				plane = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { visible: false } ) );
 
-				scene.add( plane );
 
-
 
-				objects.push( plane );
 
-
 
-				// Lights
 
-
 
-				var ambientLight = new THREE.AmbientLight( 0x606060 );
 
-				scene.add( ambientLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( 0xffffff );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( 0x808080 );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
 
-				document.addEventListener( 'keydown', onDocumentKeyDown, false );
 
-				document.addEventListener( 'keyup', onDocumentKeyUp, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function onDocumentMouseDown( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
 
-				mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
 
-
 
-				raycaster.setFromCamera( mouse, camera );
 
-
 
-				var intersects = raycaster.intersectObjects( objects );
 
-
 
-				if ( intersects.length > 0 ) {
 
-
 
-					var intersect = intersects[ 0 ];
 
-
 
-					if ( isShiftDown ) {
 
-
 
-						if ( intersect.object != plane ) {
 
-
 
-							scene.remove( intersect.object );
 
-
 
-							objects.splice( objects.indexOf( intersect.object ), 1 );
 
-
 
-						}
 
-
 
-					} else {
 
-
 
-						var voxel = new THREE.Mesh( cubeGeometry, cubeMaterial );
 
-						voxel.position.copy( intersect.point ).add( intersect.face.normal );
 
-						voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
 
-						scene.add( voxel );
 
-
 
-						objects.push( voxel );
 
-
 
-					}
 
-
 
-					render();
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentKeyDown( event ) {
 
-
 
-				switch ( event.keyCode ) {
 
-
 
-					case 16: isShiftDown = true;
 
-						break;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentKeyUp( event ) {
 
-
 
-				switch ( event.keyCode ) {
 
-
 
-					case 16: isShiftDown = false;
 
-						break;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function save() {
 
-
 
-				window.open( renderer.domElement.toDataURL( 'image/png' ), 'mywindow' );
 
-				return false;
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 155
examples/canvas_lights_pointlights.html
查看文件 

@@ -1,155 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - point light</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ff0080;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - point lights demo.<br />
 
-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer,
 
-				light1, light2, light3,
 
-				loader, mesh;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, - 6, 100 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				scene.add( new THREE.AmbientLight( 0x00020 ) );
 
-
 
-				light1 = new THREE.PointLight( 0xff0040, 1, 50 );
 
-				scene.add( light1 );
 
-
 
-				light2 = new THREE.PointLight( 0x0040ff, 1, 50 );
 
-				scene.add( light2 );
 
-
 
-				light3 = new THREE.PointLight( 0x80ff80, 1, 50 );
 
-				scene.add( light3 );
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var program = function ( context ) {
 
-
 
-					context.beginPath();
 
-					context.arc( 0, 0, 0.5, 0, PI2, true );
 
-					context.fill();
 
-
 
-				};
 
-
 
-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
 
-				light1.add( sprite );
 
-
 
-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
 
-				light2.add( sprite );
 
-
 
-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
 
-				light3.add( sprite );
 
-
 
-				loader = new THREE.BufferGeometryLoader();
 
-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
 
-
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ) );
 
-					scene.add( mesh );
 
-
 
-				} );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				var time = Date.now() * 0.0005;
 
-
 
-				if ( mesh ) mesh.rotation.y -= 0.01;
 
-
 
-				light1.position.x = Math.sin( time * 0.7 ) * 30;
 
-				light1.position.y = Math.cos( time * 0.5 ) * 40;
 
-				light1.position.z = Math.cos( time * 0.3 ) * 30;
 
-
 
-				light2.position.x = Math.cos( time * 0.3 ) * 30;
 
-				light2.position.y = Math.sin( time * 0.5 ) * 40;
 
-				light2.position.z = Math.sin( time * 0.7 ) * 30;
 
-
 
-				light3.position.x = Math.sin( time * 0.7 ) * 30;
 
-				light3.position.y = Math.cos( time * 0.3 ) * 40;
 
-				light3.position.z = Math.sin( time * 0.5 ) * 30;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 171
examples/canvas_lines.html
查看文件 

@@ -1,171 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - lines - random</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var mouseX = 0, mouseY = 0,
 
-				windowHalfX = window.innerWidth / 2,
 
-				windowHalfY = window.innerHeight / 2,
 
-
 
-				camera, scene, renderer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 100;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				// particles
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var material = new THREE.SpriteCanvasMaterial( {
 
-
 
-					color: 0xffffff,
 
-					program: function ( context ) {
 
-
 
-						context.beginPath();
 
-						context.arc( 0, 0, 0.5, 0, PI2, true );
 
-						context.fill();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				var points = [];
 
-
 
-				for ( var i = 0; i < 100; i ++ ) {
 
-
 
-					var particle = new THREE.Sprite( material );
 
-					particle.position.x = Math.random() * 2 - 1;
 
-					particle.position.y = Math.random() * 2 - 1;
 
-					particle.position.z = Math.random() * 2 - 1;
 
-					particle.position.normalize();
 
-					particle.position.multiplyScalar( Math.random() * 10 + 450 );
 
-					particle.scale.x = particle.scale.y = 10;
 
-					scene.add( particle );
 
-
 
-					points.push( particle.position );
 
-
 
-				}
 
-
 
-				// lines
 
-
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( points );
 
-
 
-				var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.5 } ) );
 
-				scene.add( line );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length > 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 246
examples/canvas_lines_colors.html
查看文件 

@@ -1,246 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - lines - colors</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 10px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-				z-index:100;
 
-			}
 
-
 
-			a {
 
-				color: orange;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - color lines
 
-			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/geometries/hilbert3D.js"></script>
 
-		<script src="js/geometries/hilbert2D.js"></script>
 
-
 
-		<script>
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				document.body.appendChild( renderer.domElement );
 
-
 
-				// 2d lines
 
-
 
-				var vertices = hilbert2D( new THREE.Vector3( 0, 0, 0 ), 400, 4 );
 
-				var numVertices = vertices.length;
 
-
 
-				var geometry2 = new THREE.BufferGeometry();
 
-
 
-				var positions = new Float32Array( numVertices * 3 );
 
-				var colors = new Float32Array( numVertices * 3 );
 
-
 
-				geometry2.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-				geometry2.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
-
 
-				var color = new THREE.Color();
 
-
 
-				for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 3 ) {
 
-
 
-					positions[ index ] = vertices[ i ].x;
 
-					positions[ index + 1 ] = vertices[ i ].y;
 
-					positions[ index + 2 ] = vertices[ i ].z;
 
-
 
-					color.setHSL( i / l, 1.0, 0.5 );
 
-
 
-					colors[ index ] = color.r;
 
-					colors[ index + 1 ] = color.g;
 
-					colors[ index + 2 ] = color.b;
 
-
 
-				}
 
-
 
-				// 3d lines
 
-
 
-				var vertices = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200, 2, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var numVertices = vertices.length;
 
-
 
-				var geometry3 = new THREE.BufferGeometry();
 
-
 
-				var positions = new Float32Array( numVertices * 3 );
 
-				var colors = new Float32Array( numVertices * 3 );
 
-
 
-				geometry3.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-				geometry3.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
 
-
 
-				var color = new THREE.Color();
 
-
 
-				for ( var i = 0, index = 0, l = numVertices; i < l; i ++, index += 3 ) {
 
-
 
-					positions[ index ] = vertices[ i ].x;
 
-					positions[ index + 1 ] = vertices[ i ].y;
 
-					positions[ index + 2 ] = vertices[ i ].z;
 
-
 
-					color.setHSL( i / l, 1.0, 0.5 );
 
-
 
-					colors[ index ] = color.r;
 
-					colors[ index + 1 ] = color.g;
 
-					colors[ index + 2 ] = color.b;
 
-
 
-				}
 
-
 
-				// lines
 
-
 
-				var material = new THREE.LineBasicMaterial( { color: 0xffffff, linewidth: 3, vertexColors: THREE.VertexColors } );
 
-
 
-				var line3d = new THREE.Line( geometry3, material );
 
-				line3d.scale.set( 0.4, 0.4, 0.4 );
 
-				line3d.position.set( 200, 0, 0 );
 
-				scene.add( line3d );
 
-
 
-				var line2d = new THREE.Line( geometry2, material );
 
-				line2d.scale.copy( line3d.scale );
 
-				line2d.position.set( - 200, 0, 0 );
 
-				scene.add( line2d );
 
-
 
-				//
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length > 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * 0.05;
 
-
 
-				camera.lookAt( scene.position );
 
-
 
-				var time = Date.now() * 0.0005;
 
-
 
-				for ( var i = 0; i < scene.children.length; i ++ ) {
 
-
 
-					var object = scene.children[ i ];
 
-
 
-					if ( object.isLine ) {
 
-
 
-						object.rotation.y = time * ( i % 2 ? 1 : - 1 );
 
-
 
-					}
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 157
examples/canvas_lines_dashed.html
查看文件 

@@ -1,157 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - dashed lines</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				color: #ffffff;
 
-				font-family:Monospace;
 
-				font-size:13px;
 
-				text-align:center;
 
-				font-weight: bold;
 
-
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-			#info {
 
-				color: #fff;
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				padding: 5px;
 
-				z-index:100;
 
-			}
 
-
 
-		</style>
 
-	</head>
 
-
 
-	<body>
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - dashed lines example</div>
 
-		<div id="container"></div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/geometries/hilbert3D.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var renderer, scene, camera, stats;
 
-			var objects = [];
 
-
 
-			var WIDTH = window.innerWidth, HEIGHT = window.innerHeight;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
 
-				camera.position.z = 150;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x111111 );
 
-
 
-				var subdivisions = 3;
 
-				var recursion = 1;
 
-
 
-				var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
 
-				var spline = new THREE.CatmullRomCurve3( points );
 
-
 
-				var samples = spline.getPoints( points.length * subdivisions );
 
-				var numSamples = samples.length;
 
-
 
-				var geometrySpline = new THREE.BufferGeometry();
 
-
 
-				var positions = new Float32Array( numSamples * 3 );
 
-
 
-				geometrySpline.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
 
-
 
-				for ( var i = 0, index = 0, l = numSamples; i < l; i ++, index += 3 ) {
 
-
 
-					positions[ index ] = samples[ i ].x;
 
-					positions[ index + 1 ] = samples[ i ].y;
 
-					positions[ index + 2 ] = samples[ i ].z;
 
-
 
-				}
 
-
 
-				var geometryCube = new THREE.EdgesGeometry( new THREE.BoxBufferGeometry( 50, 50, 50 ) );
 
-
 
-				var object = new THREE.Line(
 
-					geometrySpline,
 
-					new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 10, gapSize: 10, linewidth: 3 } )
 
-				);
 
-
 
-				objects.push( object );
 
-				scene.add( object );
 
-
 
-				var object = new THREE.LineSegments(
 
-					geometryCube,
 
-					new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 30, gapSize: 10, linewidth: 3 } )
 
-				);
 
-
 
-				objects.push( object );
 
-				scene.add( object );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( WIDTH, HEIGHT );
 
-
 
-				var container = document.getElementById( 'container' );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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() {
 
-
 
-				var time = Date.now() * 0.001;
 
-
 
-				for ( var i = 0; i < objects.length; i ++ ) {
 
-
 
-					var object = objects[ i ];
 
-
 
-					object.rotation.x = 0.25 * time;
 
-					object.rotation.y = 0.25 * time;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-	</script>
 
-
 
-</body>
 
-
 
-</html>

+ 0 - 190
examples/canvas_lines_sphere.html
查看文件 

@@ -1,190 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - lines - sphere</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var SCREEN_WIDTH = window.innerWidth,
 
-				SCREEN_HEIGHT = window.innerHeight,
 
-
 
-				mouseX = 0, mouseY = 0,
 
-
 
-				windowHalfX = window.innerWidth / 2,
 
-				windowHalfY = window.innerHeight / 2,
 
-
 
-				camera, scene, renderer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container, particle;
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				// particles
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var material = new THREE.SpriteCanvasMaterial( {
 
-
 
-					color: 0xffffff,
 
-					program: function ( context ) {
 
-
 
-						context.beginPath();
 
-						context.arc( 0, 0, 0.5, 0, PI2, true );
 
-						context.fill();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				for ( var i = 0; i < 1000; i ++ ) {
 
-
 
-					particle = new THREE.Sprite( material );
 
-					particle.position.x = Math.random() * 2 - 1;
 
-					particle.position.y = Math.random() * 2 - 1;
 
-					particle.position.z = Math.random() * 2 - 1;
 
-					particle.position.normalize();
 
-					particle.position.multiplyScalar( 450 );
 
-					particle.scale.multiplyScalar( 2 );
 
-					scene.add( particle );
 
-
 
-				}
 
-
 
-				// lines
 
-
 
-				var vertices = [];
 
-
 
-				for ( var i = 0; i < 300; i ++ ) {
 
-
 
-					var vertex = new THREE.Vector3( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 );
 
-					vertex.normalize();
 
-					vertex.multiplyScalar( 450 );
 
-
 
-					vertices.push( vertex );
 
-
 
-					var vertex2 = vertex.clone();
 
-					vertex2.multiplyScalar( Math.random() * 0.3 + 1 );
 
-
 
-					vertices.push( vertex2 );
 
-
 
-				}
 
-
 
-				var geometry = new THREE.BufferGeometry().setFromPoints( vertices );
 
-
 
-				var line = new THREE.LineSegments( geometry, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
 
-				scene.add( line );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length > 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 189
examples/canvas_materials.html
查看文件 

@@ -1,189 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - materials</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #202020;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer, objects;
 
-			var pointLight;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				camera.position.set( 0, 200, 800 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				// Grid
 
-
 
-				var gridHelper = new THREE.GridHelper( 1000, 10 );
 
-				gridHelper.position.y = - 120;
 
-				scene.add( gridHelper );
 
-
 
-				// Spheres
 
-
 
-				var geometry = new THREE.SphereGeometry( 100, 14, 7 );
 
-
 
-				var textureLoader = new THREE.TextureLoader();
 
-
 
-				var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );
 
-
 
-				var envMap = textureLoader.load( 'textures/envmap.png' );
 
-				envMap.mapping = THREE.SphericalReflectionMapping;
 
-
 
-				var materials = [
 
-
 
-					new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),
 
-					new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ),
 
-					new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
 
-					new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
 
-					new THREE.MeshNormalMaterial( { overdraw: 0.5 } ),
 
-					new THREE.MeshBasicMaterial( { map: earthTexture } ),
 
-					new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } )
 
-
 
-				];
 
-
 
-				for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
 
-
 
-					var face = geometry.faces[ i ];
 
-					if ( Math.random() > 0.5 ) face.materialIndex = Math.floor( Math.random() * materials.length );
 
-
 
-				}
 
-
 
-				materials.push( materials );
 
-
 
-				objects = [];
 
-
 
-				for ( var i = 0, l = materials.length; i < l; i ++ ) {
 
-
 
-					var sphere = new THREE.Mesh( geometry, materials[ i ] );
 
-
 
-					sphere.position.x = ( i % 5 ) * 200 - 400;
 
-					sphere.position.z = Math.floor( i / 5 ) * 200 - 200;
 
-
 
-					sphere.rotation.x = Math.random() * 200 - 100;
 
-					sphere.rotation.y = Math.random() * 200 - 100;
 
-					sphere.rotation.z = Math.random() * 200 - 100;
 
-
 
-					objects.push( sphere );
 
-
 
-					scene.add( sphere );
 
-
 
-				}
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var program = function ( context ) {
 
-
 
-					context.beginPath();
 
-					context.arc( 0, 0, 0.5, 0, PI2, true );
 
-					context.fill();
 
-
 
-				};
 
-
 
-				// Lights
 
-
 
-				scene.add( new THREE.AmbientLight( Math.random() * 0x202020 ) );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
-				directionalLight.position.x = Math.random() - 0.5;
 
-				directionalLight.position.y = Math.random() - 0.5;
 
-				directionalLight.position.z = Math.random() - 0.5;
 
-				directionalLight.position.normalize();
 
-				scene.add( directionalLight );
 
-
 
-				pointLight = new THREE.PointLight( 0xffffff, 1 );
 
-				scene.add( pointLight );
 
-
 
-				var sprite = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
 
-				sprite.scale.set( 8, 8, 8 );
 
-				pointLight.add( sprite );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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() {
 
-
 
-				var timer = Date.now() * 0.0001;
 
-
 
-				camera.position.x = Math.cos( timer ) * 1000;
 
-				camera.position.z = Math.sin( timer ) * 1000;
 
-				camera.lookAt( scene.position );
 
-
 
-				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
-
 
-					var object = objects[ i ];
 
-
 
-					object.rotation.x += 0.01;
 
-					object.rotation.y += 0.005;
 
-
 
-				}
 
-
 
-				pointLight.position.x = Math.sin( timer * 7 ) * 300;
 
-				pointLight.position.y = Math.cos( timer * 5 ) * 400;
 
-				pointLight.position.z = Math.cos( timer * 3 ) * 300;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 115
examples/canvas_materials_normal.html
查看文件 

@@ -1,115 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - normal material</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #808080;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-				text-decoration: none;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - normal material.<br />
 
-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer, mesh;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
 
-				camera.position.set( 0, - 6, 100 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				var loader = new THREE.BufferGeometryLoader();
 
-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
 
-
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( { overdraw: 0.5 } ) );
 
-					scene.add( mesh );
 
-
 
-				} );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				if ( mesh ) {
 
-
 
-					mesh.rotation.x -= 0.005;
 
-					mesh.rotation.y -= 0.01;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 113
examples/canvas_materials_reflection.html
查看文件 

@@ -1,113 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - spherical reflection</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			#info {
 
-				position: absolute;
 
-				top: 0px; width: 100%;
 
-				color: #ffffff;
 
-				padding: 5px;
 
-				font-family: Monospace;
 
-				font-size: 13px;
 
-				text-align: center;
 
-			}
 
-
 
-			a {
 
-				color: #ffffff;
 
-			}
 
-
 
-			a:hover {
 
-				color: #0080ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<div id="container"></div>
 
-		<div id="info">
 
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - spherical reflection demo.<br />
 
-			Walt Disney head by <a href="http://davidoreilly.com/post/18087489343/disneyhead" target="_blank" rel="noopener">David OReilly</a>. Reflection texture by <a href="http://kewlers.scene.org/" target="_blank" rel="noopener">Kewlers</a>.
 
-		</div>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script>
 
-
 
-			var camera, scene, renderer, loader, mesh;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				var container = document.getElementById( 'container' );
 
-
 
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				camera.position.set( 0, - 6, 100 );
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				loader = new THREE.BufferGeometryLoader();
 
-				loader.load( 'models/json/WaltHeadLo_buffergeometry.json', function ( geometry ) {
 
-
 
-					var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
 
-					envMap.mapping = THREE.SphericalReflectionMapping;
 
-
 
-					mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } ) );
 
-					scene.add( mesh );
 
-
 
-				} );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				if ( mesh ) mesh.rotation.y -= 0.01;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 224
examples/canvas_materials_video.html
查看文件 

@@ -1,224 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - materials - video</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<video id="video" autoplay loop crossOrigin="anonymous" webkit-playsinline style="display:none">
 
-			<source src="textures/sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 
-			<source src="textures/sintel.ogv" type='video/ogg; codecs="theora, vorbis"'>
 
-		</video>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var video, image, imageContext,
 
-				imageReflection, imageReflectionContext, imageReflectionGradient,
 
-				texture, textureReflection;
 
-
 
-			var mesh;
 
-
 
-			var mouseX = 0;
 
-			var mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer';
 
-				container.appendChild( info );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				video = document.getElementById( 'video' );
 
-
 
-				//
 
-
 
-				image = document.createElement( 'canvas' );
 
-				image.width = 480;
 
-				image.height = 204;
 
-
 
-				imageContext = image.getContext( '2d' );
 
-				imageContext.fillStyle = '#000000';
 
-				imageContext.fillRect( 0, 0, 480, 204 );
 
-
 
-				texture = new THREE.Texture( image );
 
-
 
-				var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
 
-
 
-				imageReflection = document.createElement( 'canvas' );
 
-				imageReflection.width = 480;
 
-				imageReflection.height = 204;
 
-
 
-				imageReflectionContext = imageReflection.getContext( '2d' );
 
-				imageReflectionContext.fillStyle = '#000000';
 
-				imageReflectionContext.fillRect( 0, 0, 480, 204 );
 
-
 
-				imageReflectionGradient = imageReflectionContext.createLinearGradient( 0, 0, 0, 204 );
 
-				imageReflectionGradient.addColorStop( 0.2, 'rgba(240, 240, 240, 1)' );
 
-				imageReflectionGradient.addColorStop( 1, 'rgba(240, 240, 240, 0.8)' );
 
-
 
-				textureReflection = new THREE.Texture( imageReflection );
 
-
 
-				var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection, side: THREE.BackSide, overdraw: 0.5 } );
 
-
 
-				//
 
-
 
-				var plane = new THREE.PlaneBufferGeometry( 480, 204, 4, 4 );
 
-
 
-				mesh = new THREE.Mesh( plane, material );
 
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 
-				scene.add( mesh );
 
-
 
-				mesh = new THREE.Mesh( plane, materialReflection );
 
-				mesh.position.y = - 306;
 
-				mesh.rotation.x = - Math.PI;
 
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 
-				scene.add( mesh );
 
-
 
-				//
 
-
 
-				var separation = 150;
 
-				var amountx = 10;
 
-				var amounty = 10;
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var material = new THREE.SpriteCanvasMaterial( {
 
-
 
-					color: 0x0808080,
 
-					program: function ( context ) {
 
-
 
-						context.beginPath();
 
-						context.arc( 0, 0, 0.5, 0, PI2, true );
 
-						context.fill();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				for ( var ix = 0; ix < amountx; ix ++ ) {
 
-
 
-					for ( var iy = 0; iy < amounty; iy ++ ) {
 
-
 
-						var sprite = new THREE.Sprite( material );
 
-						sprite.position.x = ix * separation - ( ( amountx * separation ) / 2 );
 
-						sprite.position.y = - 153;
 
-						sprite.position.z = iy * separation - ( ( amounty * separation ) / 2 );
 
-						sprite.scale.setScalar( 2 );
 
-						scene.add( sprite );
 
-
 
-					}
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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 );
 
-				mouseY = ( event.clientY - windowHalfY ) * 0.2;
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-				camera.lookAt( scene.position );
 
-
 
-				if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
 
-
 
-					imageContext.drawImage( video, 0, 0 );
 
-
 
-					if ( texture ) texture.needsUpdate = true;
 
-					if ( textureReflection ) textureReflection.needsUpdate = true;
 
-
 
-				}
 
-
 
-				imageReflectionContext.drawImage( image, 0, 0 );
 
-				imageReflectionContext.fillStyle = imageReflectionGradient;
 
-				imageReflectionContext.fillRect( 0, 0, 480, 204 );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 152
examples/canvas_morphtargets_horse.html
查看文件 

@@ -1,152 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - morph targets - horse</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/loaders/GLTFLoader.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer, mixer;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				var info = document.createElement( 'div' );
 
-				info.style.position = 'absolute';
 
-				info.style.top = '10px';
 
-				info.style.width = '100%';
 
-				info.style.textAlign = 'center';
 
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> canvas - morph targets - horse. model by <a href="http://mirada.com/">mirada</a> from <a href="http://ro.me">rome</a>';
 
-				container.appendChild( info );
 
-
 
-				//
 
-
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.y = 300;
 
-				camera.target = new THREE.Vector3( 0, 150, 0 );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				//
 
-
 
-				var light = new THREE.DirectionalLight( 0xefefff, 1.5 );
 
-				light.position.set( 1, 1, 1 ).normalize();
 
-				scene.add( light );
 
-
 
-				var light = new THREE.DirectionalLight( 0xffefef, 1.5 );
 
-				light.position.set( - 1, - 1, - 1 ).normalize();
 
-				scene.add( light );
 
-
 
-				var loader = new THREE.GLTFLoader();
 
-				loader.load( "models/gltf/Horse.glb", function ( gltf ) {
 
-
 
-					var mesh = gltf.scene.children[ 0 ];
 
-					mesh.material.overdraw = 0.5;
 
-					mesh.material.vertexColors = THREE.FaceColors;
 
-					mesh.scale.set( 1.5, 1.5, 1.5 );
 
-					scene.add( mesh );
 
-
 
-					mixer = new THREE.AnimationMixer( mesh );
 
-
 
-					var clip = gltf.animations[ 0 ];
 
-					mixer.clipAction( clip ).setDuration( 1 ).play();
 
-
 
-				} );
 
-
 
-				//
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				//
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			function onWindowResize() {
 
-
 
-				camera.aspect = window.innerWidth / window.innerHeight;
 
-				camera.updateProjectionMatrix();
 
-
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			var radius = 600;
 
-			var theta = 0;
 
-
 
-			var prevTime = Date.now();
 
-
 
-			function render() {
 
-
 
-				theta += 0.1;
 
-
 
-				camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
 
-				camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );
 
-
 
-				camera.lookAt( camera.target );
 
-
 
-				if ( mixer ) {
 
-
 
-					var time = Date.now();
 
-
 
-					mixer.update( ( time - prevTime ) * 0.001 );
 
-
 
-					prevTime = time;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 152
examples/canvas_particles_floor.html
查看文件 

@@ -1,152 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - particles - floor</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var SEPARATION = 100;
 
-			var AMOUNTX = 50;
 
-			var AMOUNTY = 50;
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer, particle;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				var material = new THREE.SpriteMaterial();
 
-
 
-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
 
-
 
-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
 
-
 
-						particle = new THREE.Sprite( material );
 
-						particle.scale.y = 20;
 
-						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 
-						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 
-						scene.add( particle );
 
-
 
-					}
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length > 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				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 - 169
examples/canvas_particles_random.html
查看文件 

@@ -1,169 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - particles - random</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer, group, particle;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var program = function ( context ) {
 
-
 
-					context.beginPath();
 
-					context.arc( 0, 0, 0.5, 0, PI2, true );
 
-					context.fill();
 
-
 
-				};
 
-
 
-				group = new THREE.Group();
 
-				scene.add( group );
 
-
 
-				for ( var i = 0; i < 1000; i ++ ) {
 
-
 
-					var material = new THREE.SpriteCanvasMaterial( {
 
-						color: Math.random() * 0x808008 + 0x808080,
 
-						program: program
 
-					} );
 
-
 
-					particle = new THREE.Sprite( material );
 
-					particle.position.x = Math.random() * 2000 - 1000;
 
-					particle.position.y = Math.random() * 2000 - 1000;
 
-					particle.position.z = Math.random() * 2000 - 1000;
 
-					particle.scale.x = particle.scale.y = Math.random() * 20 + 10;
 
-					group.add( particle );
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				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 += 0.01;
 
-				group.rotation.y += 0.02;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 203
examples/canvas_particles_sprites.html
查看文件 

@@ -1,203 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - particles - sprites</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color: #0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-		<script src="js/libs/tween.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer, particle;
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0x000040 );
 
-
 
-				var material = new THREE.SpriteMaterial( {
 
-					map: new THREE.CanvasTexture( generateSprite() ),
 
-					blending: THREE.AdditiveBlending
 
-				} );
 
-
 
-				for ( var i = 0; i < 1000; i ++ ) {
 
-
 
-					particle = new THREE.Sprite( material );
 
-
 
-					initParticle( particle, i * 10 );
 
-
 
-					scene.add( particle );
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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 generateSprite() {
 
-
 
-				var canvas = document.createElement( 'canvas' );
 
-				canvas.width = 16;
 
-				canvas.height = 16;
 
-
 
-				var context = canvas.getContext( '2d' );
 
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 
-				gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
 
-				gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
 
-				gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
 
-				gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
 
-
 
-				context.fillStyle = gradient;
 
-				context.fillRect( 0, 0, canvas.width, canvas.height );
 
-
 
-				return canvas;
 
-
 
-			}
 
-
 
-			function initParticle( particle, delay ) {
 
-
 
-				var particle = this instanceof THREE.Sprite ? this : particle;
 
-				var delay = delay !== undefined ? delay : 0;
 
-
 
-				particle.position.set( 0, 0, 0 );
 
-				particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
 
-
 
-				new TWEEN.Tween( particle )
 
-					.delay( delay )
 
-					.to( {}, 10000 )
 
-					.onComplete( initParticle )
 
-					.start();
 
-
 
-				new TWEEN.Tween( particle.position )
 
-					.delay( delay )
 
-					.to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1000 - 500, z: Math.random() * 4000 - 2000 }, 10000 )
 
-					.start();
 
-
 
-				new TWEEN.Tween( particle.scale )
 
-					.delay( delay )
 
-					.to( { x: 0.01, y: 0.01 }, 10000 )
 
-					.start();
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function onDocumentMouseMove( event ) {
 
-
 
-				mouseX = event.clientX - windowHalfX;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length == 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				TWEEN.update();
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
-				camera.lookAt( scene.position );
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 191
examples/canvas_particles_waves.html
查看文件 

@@ -1,191 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - particles - waves</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				background-color: #000000;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			a {
 
-				color:#0078ff;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
 
-
 
-			var container, stats;
 
-			var camera, scene, renderer;
 
-
 
-			var particles, particle, count = 0;
 
-
 
-			var mouseX = 0, mouseY = 0;
 
-
 
-			var windowHalfX = window.innerWidth / 2;
 
-			var windowHalfY = window.innerHeight / 2;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.z = 1000;
 
-
 
-				scene = new THREE.Scene();
 
-
 
-				particles = new Array();
 
-
 
-				var PI2 = Math.PI * 2;
 
-				var material = new THREE.SpriteCanvasMaterial( {
 
-
 
-					color: 0xffffff,
 
-					program: function ( context ) {
 
-
 
-						context.beginPath();
 
-						context.arc( 0, 0, 0.5, 0, PI2, true );
 
-						context.fill();
 
-
 
-					}
 
-
 
-				} );
 
-
 
-				var i = 0;
 
-
 
-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
 
-
 
-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
 
-
 
-						particle = particles[ i ++ ] = new THREE.Sprite( material );
 
-						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 
-						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 
-						scene.add( particle );
 
-
 
-					}
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
-				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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;
 
-				mouseY = event.clientY - windowHalfY;
 
-
 
-			}
 
-
 
-			function onDocumentTouchStart( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			function onDocumentTouchMove( event ) {
 
-
 
-				if ( event.touches.length === 1 ) {
 
-
 
-					event.preventDefault();
 
-
 
-					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
-					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
-
 
-				}
 
-
 
-			}
 
-
 
-			//
 
-
 
-			function animate() {
 
-
 
-				requestAnimationFrame( animate );
 
-
 
-				render();
 
-				stats.update();
 
-
 
-			}
 
-
 
-			function render() {
 
-
 
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
-				camera.lookAt( scene.position );
 
-
 
-				var i = 0;
 
-
 
-				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
 
-
 
-					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
 
-
 
-						particle = particles[ i ++ ];
 
-						particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
 
-							( Math.sin( ( iy + count ) * 0.5 ) * 50 );
 
-						particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
 
-							( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
 
-
 
-					}
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-				count += 0.1;
 
-
 
-			}
 
-
 
-		</script>
 
-	</body>
 
-</html>

+ 0 - 131
examples/canvas_performance.html
查看文件 

@@ -1,131 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - performance</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
-
 
-			var light;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 0, 1000, 1000 );
 
-				camera.lookAt( scene.position );
 
-
 
-
 
-				// Grid
 
-
 
-				var gridHelper = new THREE.GridHelper( 1000, 10 );
 
-				scene.add( gridHelper );
 
-
 
-				// Spheres
 
-
 
-				var geometry = new THREE.SphereBufferGeometry( 100, 26, 18 );
 
-				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
 
-
 
-				for ( var i = 0; i < 20; i ++ ) {
 
-
 
-					var sphere = new THREE.Mesh( geometry, material );
 
-
 
-					sphere.position.x = ( i % 5 ) * 200 - 400;
 
-					sphere.position.z = Math.floor( i / 5 ) * 200 - 400;
 
-
 
-					scene.add( sphere );
 
-
 
-				}
 
-
 
-				// Lights
 
-
 
-				var ambientLight = new THREE.AmbientLight( Math.random() * 0x202020 );
 
-				scene.add( ambientLight );
 
-
 
-				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
 
-				directionalLight.position.set( 0, 1, 0 );
 
-				scene.add( directionalLight );
 
-
 
-				light = new THREE.PointLight( 0xff0000, 1, 500 );
 
-				scene.add( light );
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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() {
 
-
 
-				var timer = Date.now() * 0.001;
 
-
 
-				light.position.x = Math.cos( timer ) * 1000;
 
-				light.position.y = 500;
 
-				light.position.z = Math.sin( timer ) * 1000;
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

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

@@ -1,136 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-	<head>
 
-		<title>three.js canvas - sandbox</title>
 
-		<meta charset="utf-8">
 
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<style>
 
-			body {
 
-				font-family: Monospace;
 
-				background-color: #f0f0f0;
 
-				margin: 0px;
 
-				overflow: hidden;
 
-			}
 
-		</style>
 
-	</head>
 
-	<body>
 
-
 
-		<script src="../build/three.js"></script>
 
-
 
-		<script src="js/controls/OrbitControls.js"></script>
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
-		<script src="js/libs/stats.min.js"></script>
 
-
 
-		<script>
 
-
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer, group;
 
-
 
-			init();
 
-			animate();
 
-
 
-			function init() {
 
-
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
-				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
-				camera.position.set( 0, 150, 400 );
 
-
 
-				var controls = new THREE.OrbitControls( camera );
 
-
 
-				scene = new THREE.Scene();
 
-				scene.background = new THREE.Color( 0xf0f0f0 );
 
-
 
-				// Grid
 
-
 
-				var gridHelper = new THREE.GridHelper( 1000, 10 );
 
-				scene.add( gridHelper );
 
-
 
-				// Spheres
 
-
 
-				group = new THREE.Group();
 
-				scene.add( group );
 
-
 
-				var geometry = new THREE.IcosahedronBufferGeometry( 100, 1 );
 
-
 
-				var envMap = new THREE.TextureLoader().load( 'textures/metal.jpg' );
 
-				envMap.mapping = THREE.SphericalReflectionMapping;
 
-
 
-				var material = new THREE.MeshBasicMaterial( { envMap: envMap, overdraw: 0.5 } );
 
-
 
-				for ( var i = 0; i < 10; i ++ ) {
 
-
 
-					var sphere = new THREE.Mesh( geometry, material );
 
-
 
-					sphere.position.x = Math.random() * 1000 - 500;
 
-					sphere.position.y = Math.random() * 1000 - 500;
 
-					sphere.position.z = Math.random() * 1000 - 500;
 
-
 
-					sphere.rotation.x = Math.random() * 200 - 100;
 
-					sphere.rotation.y = Math.random() * 200 - 100;
 
-					sphere.rotation.z = Math.random() * 200 - 100;
 
-
 
-					sphere.scale.x = sphere.scale.y = sphere.scale.z = Math.random() + 0.5;
 
-
 
-					group.add( sphere );
 
-
 
-				}
 
-
 
-				renderer = new THREE.CanvasRenderer();
 
-				renderer.setPixelRatio( window.devicePixelRatio );
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
-
 
-				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
-
 
-				//
 
-
 
-				window.addEventListener( 'resize', onWindowResize, false );
 
-
 
-			}
 
-
 
-			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() {
 
-
 
-				for ( var i = 0, l = group.children.length; i < l; i ++ ) {
 
-
 
-					var object = group.children[ i ];
 
-
 
-					object.rotation.x += 0.01;
 
-					object.rotation.y += 0.005;
 
-					object.position.y = Math.sin( object.rotation.x ) * 200;
 
-
 
-				}
 
-
 
-				renderer.render( scene, camera );
 
-
 
-			}
 
-
 
-		</script>
 
-
 
-	</body>
 
-</html>

+ 0 - 34
examples/files.js
查看文件 

@@ -370,40 +370,6 @@ var files = {
 
 	"css2d": [
 
 	"css2d": [
 
 		"css2d_label"
 
 		"css2d_label"
 
 	],
 
 	],
 
-	"canvas": [
 
-		"canvas_ascii_effect",
 
-		"canvas_camera_orthographic",
 
-		"canvas_geometry_birds",
 
-		"canvas_geometry_cube",
 
-		"canvas_geometry_earth",
 
-		"canvas_geometry_hierarchy",
 
-		"canvas_geometry_nurbs",
 
-		"canvas_geometry_panorama",
 
-		"canvas_geometry_panorama_fisheye",
 
-		"canvas_geometry_shapes",
 
-		"canvas_geometry_terrain",
 
-		"canvas_geometry_text",
 
-		"canvas_interactive_cubes",
 
-		"canvas_interactive_cubes_tween",
 
-		"canvas_interactive_sprites",
 
-		"canvas_interactive_voxelpainter",
 
-		"canvas_lights_pointlights",
 
-		"canvas_lines",
 
-		"canvas_lines_colors",
 
-		"canvas_lines_dashed",
 
-		"canvas_lines_sphere",
 
-		"canvas_materials",
 
-		"canvas_materials_normal",
 
-		"canvas_materials_reflection",
 
-		"canvas_materials_video",
 
-		"canvas_morphtargets_horse",
 
-		"canvas_particles_floor",
 
-		"canvas_particles_random",
 
-		"canvas_particles_sprites",
 
-		"canvas_particles_waves",
 
-		"canvas_performance",
 
-		"canvas_sandbox"
 
-	],
 
 	"raytracing": [
 
 	"raytracing": [
 
 		"raytracing_sandbox"
 
 		"raytracing_sandbox"
 
 	],
 
 	],

+ 0 - 1153
examples/js/renderers/CanvasRenderer.js
查看文件 

@@ -1,1153 +0,0 @@
 
-/**
 
- * @author mrdoob / http://mrdoob.com/
 
- */
 
-
 
-THREE.SpriteCanvasMaterial = function ( parameters ) {
 
-
 
-	THREE.Material.call( this );
 
-
 
-	this.type = 'SpriteCanvasMaterial';
 
-	this.rotation = 0;
 
-	this.color = new THREE.Color( 0xffffff );
 
-	this.program = function () {};
 
-
 
-	this.setValues( parameters );
 
-
 
-};
 
-
 
-THREE.SpriteCanvasMaterial.prototype = Object.create( THREE.Material.prototype );
 
-THREE.SpriteCanvasMaterial.prototype.constructor = THREE.SpriteCanvasMaterial;
 
-THREE.SpriteCanvasMaterial.prototype.isSpriteCanvasMaterial = true;
 
-
 
-THREE.SpriteCanvasMaterial.prototype.clone = function () {
 
-
 
-	var material = new THREE.SpriteCanvasMaterial();
 
-
 
-	material.copy( this );
 
-	material.color.copy( this.color );
 
-	material.program = this.program;
 
-
 
-	return material;
 
-
 
-};
 
-
 
-//
 
-
 
-THREE.CanvasRenderer = function ( parameters ) {
 
-
 
-	console.log( 'THREE.CanvasRenderer', THREE.REVISION );
 
-
 
-	parameters = parameters || {};
 
-
 
-	var _this = this,
 
-		_renderData, _elements, _lights,
 
-		_projector = new THREE.Projector(),
 
-
 
-		_canvas = parameters.canvas !== undefined
 
-				 ? parameters.canvas
 
-				 : document.createElement( 'canvas' ),
 
-
 
-		_canvasWidth = _canvas.width,
 
-		_canvasHeight = _canvas.height,
 
-		_canvasWidthHalf = Math.floor( _canvasWidth / 2 ),
 
-		_canvasHeightHalf = Math.floor( _canvasHeight / 2 ),
 
-
 
-		_viewportX = 0,
 
-		_viewportY = 0,
 
-		_viewportWidth = _canvasWidth,
 
-		_viewportHeight = _canvasHeight,
 
-
 
-		_pixelRatio = 1,
 
-
 
-		_context = _canvas.getContext( '2d', {
 
-			alpha: parameters.alpha === true
 
-		} ),
 
-
 
-		_clearColor = new THREE.Color( 0x000000 ),
 
-		_clearAlpha = parameters.alpha === true ? 0 : 1,
 
-
 
-		_contextGlobalAlpha = 1,
 
-		_contextGlobalCompositeOperation = 0,
 
-		_contextStrokeStyle = null,
 
-		_contextFillStyle = null,
 
-		_contextLineWidth = null,
 
-		_contextLineCap = null,
 
-		_contextLineJoin = null,
 
-		_contextLineDash = [],
 
-
 
-		_v1, _v2, _v3,
 
-
 
-		_v1x, _v1y, _v2x, _v2y, _v3x, _v3y,
 
-
 
-		_color = new THREE.Color(),
 
-
 
-		_diffuseColor = new THREE.Color(),
 
-		_emissiveColor = new THREE.Color(),
 
-
 
-		_lightColor = new THREE.Color(),
 
-
 
-		_patterns = {},
 
-
 
-		_uvs,
 
-		_uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y,
 
-
 
-		_clipBox = new THREE.Box2(),
 
-		_clearBox = new THREE.Box2(),
 
-		_elemBox = new THREE.Box2(),
 
-
 
-		_ambientLight = new THREE.Color(),
 
-		_directionalLights = new THREE.Color(),
 
-		_pointLights = new THREE.Color(),
 
-
 
-		_vector3 = new THREE.Vector3(), // Needed for PointLight
 
-		_centroid = new THREE.Vector3(),
 
-		_normal = new THREE.Vector3(),
 
-		_normalViewMatrix = new THREE.Matrix3();
 
-
 
-	/* TODO
 
-	_canvas.mozImageSmoothingEnabled = false;
 
-	_canvas.webkitImageSmoothingEnabled = false;
 
-	_canvas.msImageSmoothingEnabled = false;
 
-	_canvas.imageSmoothingEnabled = false;
 
-	*/
 
-
 
-	// dash+gap fallbacks for Firefox and everything else
 
-
 
-	if ( _context.setLineDash === undefined ) {
 
-
 
-		_context.setLineDash = function () {};
 
-
 
-	}
 
-
 
-	this.domElement = _canvas;
 
-
 
-	this.autoClear = true;
 
-	this.sortObjects = true;
 
-	this.sortElements = true;
 
-
 
-	this.info = {
 
-
 
-		render: {
 
-
 
-			vertices: 0,
 
-			faces: 0
 
-
 
-		}
 
-
 
-	};
 
-
 
-	// API
 
-
 
-	this.getContext = function () {
 
-
 
-		return _context;
 
-
 
-	};
 
-
 
-	this.getContextAttributes = function () {
 
-
 
-		return _context.getContextAttributes();
 
-
 
-	};
 
-
 
-	this.getPixelRatio = function () {
 
-
 
-		return _pixelRatio;
 
-
 
-	};
 
-
 
-	this.setPixelRatio = function ( value ) {
 
-
 
-		if ( value !== undefined ) _pixelRatio = value;
 
-
 
-	};
 
-
 
-	this.setSize = function ( width, height, updateStyle ) {
 
-
 
-		_canvasWidth = width * _pixelRatio;
 
-		_canvasHeight = height * _pixelRatio;
 
-
 
-		_canvas.width = _canvasWidth;
 
-		_canvas.height = _canvasHeight;
 
-
 
-		_canvasWidthHalf = Math.floor( _canvasWidth / 2 );
 
-		_canvasHeightHalf = Math.floor( _canvasHeight / 2 );
 
-
 
-		if ( updateStyle !== false ) {
 
-
 
-			_canvas.style.width = width + 'px';
 
-			_canvas.style.height = height + 'px';
 
-
 
-		}
 
-
 
-		_clipBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
 
-		_clipBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 
-
 
-		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
 
-		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 
-
 
-		_contextGlobalAlpha = 1;
 
-		_contextGlobalCompositeOperation = 0;
 
-		_contextStrokeStyle = null;
 
-		_contextFillStyle = null;
 
-		_contextLineWidth = null;
 
-		_contextLineCap = null;
 
-		_contextLineJoin = null;
 
-
 
-		this.setViewport( 0, 0, width, height );
 
-
 
-	};
 
-
 
-	this.setViewport = function ( x, y, width, height ) {
 
-
 
-		_viewportX = x * _pixelRatio;
 
-		_viewportY = y * _pixelRatio;
 
-
 
-		_viewportWidth = width * _pixelRatio;
 
-		_viewportHeight = height * _pixelRatio;
 
-
 
-	};
 
-
 
-	this.setScissor = function () {};
 
-	this.setScissorTest = function () {};
 
-
 
-	this.setClearColor = function ( color, alpha ) {
 
-
 
-		_clearColor.set( color );
 
-		_clearAlpha = alpha !== undefined ? alpha : 1;
 
-
 
-		_clearBox.min.set( - _canvasWidthHalf, - _canvasHeightHalf );
 
-		_clearBox.max.set(   _canvasWidthHalf,   _canvasHeightHalf );
 
-
 
-	};
 
-
 
-	this.setClearColorHex = function ( hex, alpha ) {
 
-
 
-		console.warn( 'THREE.CanvasRenderer: .setClearColorHex() is being removed. Use .setClearColor() instead.' );
 
-		this.setClearColor( hex, alpha );
 
-
 
-	};
 
-
 
-	this.getClearColor = function () {
 
-
 
-		return _clearColor;
 
-
 
-	};
 
-
 
-	this.getClearAlpha = function () {
 
-
 
-		return _clearAlpha;
 
-
 
-	};
 
-
 
-	this.getMaxAnisotropy = function () {
 
-
 
-		return 0;
 
-
 
-	};
 
-
 
-	this.clear = function () {
 
-
 
-		if ( _clearBox.isEmpty() === false ) {
 
-
 
-			_clearBox.intersect( _clipBox );
 
-			_clearBox.expandByScalar( 2 );
 
-
 
-			_clearBox.min.x =   _clearBox.min.x + _canvasWidthHalf;
 
-			_clearBox.min.y = - _clearBox.min.y + _canvasHeightHalf;		// higher y value !
 
-			_clearBox.max.x =   _clearBox.max.x + _canvasWidthHalf;
 
-			_clearBox.max.y = - _clearBox.max.y + _canvasHeightHalf;		// lower y value !
 
-
 
-			if ( _clearAlpha < 1 ) {
 
-
 
-				_context.clearRect(
 
-					_clearBox.min.x | 0,
 
-					_clearBox.max.y | 0,
 
-					( _clearBox.max.x - _clearBox.min.x ) | 0,
 
-					( _clearBox.min.y - _clearBox.max.y ) | 0
 
-				);
 
-
 
-			}
 
-
 
-			if ( _clearAlpha > 0 ) {
 
-
 
-				setOpacity( 1 );
 
-				setBlending( THREE.NormalBlending );
 
-
 
-				setFillStyle( 'rgba(' + Math.floor( _clearColor.r * 255 ) + ',' + Math.floor( _clearColor.g * 255 ) + ',' + Math.floor( _clearColor.b * 255 ) + ',' + _clearAlpha + ')' );
 
-
 
-				_context.fillRect(
 
-					_clearBox.min.x | 0,
 
-					_clearBox.max.y | 0,
 
-					( _clearBox.max.x - _clearBox.min.x ) | 0,
 
-					( _clearBox.min.y - _clearBox.max.y ) | 0
 
-				);
 
-
 
-			}
 
-
 
-			_clearBox.makeEmpty();
 
-
 
-		}
 
-
 
-	};
 
-
 
-	// compatibility
 
-
 
-	this.clearColor = function () {};
 
-	this.clearDepth = function () {};
 
-	this.clearStencil = function () {};
 
-
 
-	this.render = function ( scene, camera ) {
 
-
 
-		if ( camera.isCamera === undefined ) {
 
-
 
-			console.error( 'THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.' );
 
-			return;
 
-
 
-		}
 
-
 
-		var background = scene.background;
 
-
 
-		if ( background && background.isColor ) {
 
-
 
-			setOpacity( 1 );
 
-			setBlending( THREE.NormalBlending );
 
-
 
-			setFillStyle( background.getStyle() );
 
-			_context.fillRect( 0, 0, _canvasWidth, _canvasHeight );
 
-
 
-		} else if ( this.autoClear === true ) {
 
-
 
-			this.clear();
 
-
 
-		}
 
-
 
-		_this.info.render.vertices = 0;
 
-		_this.info.render.faces = 0;
 
-
 
-		_context.setTransform( _viewportWidth / _canvasWidth, 0, 0, - _viewportHeight / _canvasHeight, _viewportX, _canvasHeight - _viewportY );
 
-		_context.translate( _canvasWidthHalf, _canvasHeightHalf );
 
-
 
-		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
 
-		_elements = _renderData.elements;
 
-		_lights = _renderData.lights;
 
-
 
-		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
 
-
 
-		/* DEBUG
 
-		setFillStyle( 'rgba( 0, 255, 255, 0.5 )' );
 
-		_context.fillRect( _clipBox.min.x, _clipBox.min.y, _clipBox.max.x - _clipBox.min.x, _clipBox.max.y - _clipBox.min.y );
 
-		*/
 
-
 
-		calculateLights();
 
-
 
-		for ( var e = 0, el = _elements.length; e < el; e ++ ) {
 
-
 
-			var element = _elements[ e ];
 
-
 
-			var material = element.material;
 
-
 
-			if ( material === undefined || material.opacity === 0 ) continue;
 
-
 
-			_elemBox.makeEmpty();
 
-
 
-			if ( element instanceof THREE.RenderableSprite ) {
 
-
 
-				_v1 = element;
 
-				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
 
-
 
-				renderSprite( _v1, element, material );
 
-
 
-			} else if ( element instanceof THREE.RenderableLine ) {
 
-
 
-				_v1 = element.v1; _v2 = element.v2;
 
-
 
-				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
 
-				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 
-
 
-				_elemBox.setFromPoints( [
 
-					_v1.positionScreen,
 
-					_v2.positionScreen
 
-				] );
 
-
 
-				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
 
-
 
-					renderLine( _v1, _v2, element, material );
 
-
 
-				}
 
-
 
-			} else if ( element instanceof THREE.RenderableFace ) {
 
-
 
-				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
 
-
 
-				if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
 
-				if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
 
-				if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
 
-
 
-				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
 
-				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 
-				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
 
-
 
-				if ( material.overdraw > 0 ) {
 
-
 
-					expand( _v1.positionScreen, _v2.positionScreen, material.overdraw );
 
-					expand( _v2.positionScreen, _v3.positionScreen, material.overdraw );
 
-					expand( _v3.positionScreen, _v1.positionScreen, material.overdraw );
 
-
 
-				}
 
-
 
-				_elemBox.setFromPoints( [
 
-					_v1.positionScreen,
 
-					_v2.positionScreen,
 
-					_v3.positionScreen
 
-				] );
 
-
 
-				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
 
-
 
-					renderFace3( _v1, _v2, _v3, 0, 1, 2, element, material );
 
-
 
-				}
 
-
 
-			}
 
-
 
-			/* DEBUG
 
-			setLineWidth( 1 );
 
-			setStrokeStyle( 'rgba( 0, 255, 0, 0.5 )' );
 
-			_context.strokeRect( _elemBox.min.x, _elemBox.min.y, _elemBox.max.x - _elemBox.min.x, _elemBox.max.y - _elemBox.min.y );
 
-			*/
 
-
 
-			_clearBox.union( _elemBox );
 
-
 
-		}
 
-
 
-		/* DEBUG
 
-		setLineWidth( 1 );
 
-		setStrokeStyle( 'rgba( 255, 0, 0, 0.5 )' );
 
-		_context.strokeRect( _clearBox.min.x, _clearBox.min.y, _clearBox.max.x - _clearBox.min.x, _clearBox.max.y - _clearBox.min.y );
 
-		*/
 
-
 
-		_context.setTransform( 1, 0, 0, 1, 0, 0 );
 
-
 
-	};
 
-
 
-	//
 
-
 
-	function calculateLights() {
 
-
 
-		_ambientLight.setRGB( 0, 0, 0 );
 
-		_directionalLights.setRGB( 0, 0, 0 );
 
-		_pointLights.setRGB( 0, 0, 0 );
 
-
 
-		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
 
-
 
-			var light = _lights[ l ];
 
-			var lightColor = light.color;
 
-
 
-			if ( light.isAmbientLight ) {
 
-
 
-				_ambientLight.add( lightColor );
 
-
 
-			} else if ( light.isDirectionalLight ) {
 
-
 
-				// for sprites
 
-
 
-				_directionalLights.add( lightColor );
 
-
 
-			} else if ( light.isPointLight ) {
 
-
 
-				// for sprites
 
-
 
-				_pointLights.add( lightColor );
 
-
 
-			}
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function calculateLight( position, normal, color ) {
 
-
 
-		for ( var l = 0, ll = _lights.length; l < ll; l ++ ) {
 
-
 
-			var light = _lights[ l ];
 
-
 
-			_lightColor.copy( light.color );
 
-
 
-			if ( light.isDirectionalLight ) {
 
-
 
-				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
 
-
 
-				var amount = normal.dot( lightPosition );
 
-
 
-				if ( amount <= 0 ) continue;
 
-
 
-				amount *= light.intensity;
 
-
 
-				color.add( _lightColor.multiplyScalar( amount ) );
 
-
 
-			} else if ( light.isPointLight ) {
 
-
 
-				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
 
-
 
-				var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
 
-
 
-				if ( amount <= 0 ) continue;
 
-
 
-				amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
 
-
 
-				if ( amount == 0 ) continue;
 
-
 
-				amount *= light.intensity;
 
-
 
-				color.add( _lightColor.multiplyScalar( amount ) );
 
-
 
-			}
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function renderSprite( v1, element, material ) {
 
-
 
-		setOpacity( material.opacity );
 
-		setBlending( material.blending );
 
-
 
-		var scaleX = element.scale.x * _canvasWidthHalf;
 
-		var scaleY = element.scale.y * _canvasHeightHalf;
 
-
 
-		var dist = Math.sqrt( scaleX * scaleX + scaleY * scaleY ); // allow for rotated sprite
 
-		_elemBox.min.set( v1.x - dist, v1.y - dist );
 
-		_elemBox.max.set( v1.x + dist, v1.y + dist );
 
-
 
-		if ( material.isSpriteMaterial ) {
 
-
 
-			var texture = material.map;
 
-
 
-			if ( texture !== null ) {
 
-
 
-				var pattern = _patterns[ texture.id ];
 
-
 
-				if ( pattern === undefined || pattern.version !== texture.version ) {
 
-
 
-					pattern = textureToPattern( texture );
 
-					_patterns[ texture.id ] = pattern;
 
-
 
-				}
 
-
 
-				if ( pattern.canvas !== undefined ) {
 
-
 
-					setFillStyle( pattern.canvas );
 
-
 
-					var bitmap = texture.image;
 
-
 
-					var ox = bitmap.width * texture.offset.x;
 
-					var oy = bitmap.height * texture.offset.y;
 
-
 
-					var sx = bitmap.width * texture.repeat.x;
 
-					var sy = bitmap.height * texture.repeat.y;
 
-
 
-					var cx = scaleX / sx;
 
-					var cy = scaleY / sy;
 
-
 
-					_context.save();
 
-					_context.translate( v1.x, v1.y );
 
-					if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 
-					_context.translate( - scaleX / 2, - scaleY / 2 );
 
-					_context.scale( cx, cy );
 
-					_context.translate( - ox, - oy );
 
-					_context.fillRect( ox, oy, sx, sy );
 
-					_context.restore();
 
-
 
-				}
 
-
 
-			} else {
 
-
 
-				// no texture
 
-
 
-				setFillStyle( material.color.getStyle() );
 
-
 
-				_context.save();
 
-				_context.translate( v1.x, v1.y );
 
-				if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 
-				_context.scale( scaleX, - scaleY );
 
-				_context.fillRect( - 0.5, - 0.5, 1, 1 );
 
-				_context.restore();
 
-
 
-			}
 
-
 
-		} else if ( material.isSpriteCanvasMaterial ) {
 
-
 
-			setStrokeStyle( material.color.getStyle() );
 
-			setFillStyle( material.color.getStyle() );
 
-
 
-			_context.save();
 
-			_context.translate( v1.x, v1.y );
 
-			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 
-			_context.scale( scaleX, scaleY );
 
-
 
-			material.program( _context );
 
-
 
-			_context.restore();
 
-
 
-		} else if ( material.isPointsMaterial ) {
 
-
 
-			setFillStyle( material.color.getStyle() );
 
-
 
-			_context.save();
 
-			_context.translate( v1.x, v1.y );
 
-			if ( material.rotation !== 0 ) _context.rotate( material.rotation );
 
-			_context.scale( scaleX * material.size, - scaleY * material.size );
 
-			_context.fillRect( - 0.5, - 0.5, 1, 1 );
 
-			_context.restore();
 
-
 
-		}
 
-
 
-		/* DEBUG
 
-		setStrokeStyle( 'rgb(255,255,0)' );
 
-		_context.beginPath();
 
-		_context.moveTo( v1.x - 10, v1.y );
 
-		_context.lineTo( v1.x + 10, v1.y );
 
-		_context.moveTo( v1.x, v1.y - 10 );
 
-		_context.lineTo( v1.x, v1.y + 10 );
 
-		_context.stroke();
 
-		*/
 
-
 
-	}
 
-
 
-	function renderLine( v1, v2, element, material ) {
 
-
 
-		setOpacity( material.opacity );
 
-		setBlending( material.blending );
 
-
 
-		_context.beginPath();
 
-		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
 
-		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
 
-
 
-		if ( material.isLineBasicMaterial ) {
 
-
 
-			setLineWidth( material.linewidth );
 
-			setLineCap( material.linecap );
 
-			setLineJoin( material.linejoin );
 
-
 
-			if ( material.vertexColors !== THREE.VertexColors ) {
 
-
 
-				setStrokeStyle( material.color.getStyle() );
 
-
 
-			} else {
 
-
 
-				var colorStyle1 = element.vertexColors[ 0 ].getStyle();
 
-				var colorStyle2 = element.vertexColors[ 1 ].getStyle();
 
-
 
-				if ( colorStyle1 === colorStyle2 ) {
 
-
 
-					setStrokeStyle( colorStyle1 );
 
-
 
-				} else {
 
-
 
-					try {
 
-
 
-						var grad = _context.createLinearGradient(
 
-							v1.positionScreen.x,
 
-							v1.positionScreen.y,
 
-							v2.positionScreen.x,
 
-							v2.positionScreen.y
 
-						);
 
-						grad.addColorStop( 0, colorStyle1 );
 
-						grad.addColorStop( 1, colorStyle2 );
 
-
 
-					} catch ( exception ) {
 
-
 
-						grad = colorStyle1;
 
-
 
-					}
 
-
 
-					setStrokeStyle( grad );
 
-
 
-				}
 
-
 
-			}
 
-
 
-			if ( material.isLineDashedMaterial ) {
 
-
 
-				setLineDash( [ material.dashSize, material.gapSize ] );
 
-
 
-			}
 
-
 
-			_context.stroke();
 
-			_elemBox.expandByScalar( material.linewidth * 2 );
 
-
 
-			if ( material.isLineDashedMaterial ) {
 
-
 
-				setLineDash( [] );
 
-
 
-			}
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function renderFace3( v1, v2, v3, uv1, uv2, uv3, element, material ) {
 
-
 
-		_this.info.render.vertices += 3;
 
-		_this.info.render.faces ++;
 
-
 
-		setOpacity( material.opacity );
 
-		setBlending( material.blending );
 
-
 
-		_v1x = v1.positionScreen.x; _v1y = v1.positionScreen.y;
 
-		_v2x = v2.positionScreen.x; _v2y = v2.positionScreen.y;
 
-		_v3x = v3.positionScreen.x; _v3y = v3.positionScreen.y;
 
-
 
-		drawTriangle( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y );
 
-
 
-		if ( ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) && material.map === null ) {
 
-
 
-			_diffuseColor.copy( material.color );
 
-			_emissiveColor.copy( material.emissive );
 
-
 
-			if ( material.vertexColors === THREE.FaceColors ) {
 
-
 
-				_diffuseColor.multiply( element.color );
 
-
 
-			}
 
-
 
-			_color.copy( _ambientLight );
 
-
 
-			_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
 
-
 
-			calculateLight( _centroid, element.normalModel, _color );
 
-
 
-			_color.multiply( _diffuseColor ).add( _emissiveColor );
 
-
 
-			material.wireframe === true
 
-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 
-				 : fillPath( _color );
 
-
 
-		} else if ( material.isMeshBasicMaterial || material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
 
-
 
-			if ( material.map !== null ) {
 
-
 
-				var mapping = material.map.mapping;
 
-
 
-				if ( mapping === THREE.UVMapping ) {
 
-
 
-					_uvs = element.uvs;
 
-					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uvs[ uv1 ].x, _uvs[ uv1 ].y, _uvs[ uv2 ].x, _uvs[ uv2 ].y, _uvs[ uv3 ].x, _uvs[ uv3 ].y, material.map );
 
-
 
-				}
 
-
 
-			} else if ( material.envMap !== null ) {
 
-
 
-				if ( material.envMap.mapping === THREE.SphericalReflectionMapping ) {
 
-
 
-					_normal.copy( element.vertexNormalsModel[ uv1 ] ).applyMatrix3( _normalViewMatrix );
 
-					_uv1x = 0.5 * _normal.x + 0.5;
 
-					_uv1y = 0.5 * _normal.y + 0.5;
 
-
 
-					_normal.copy( element.vertexNormalsModel[ uv2 ] ).applyMatrix3( _normalViewMatrix );
 
-					_uv2x = 0.5 * _normal.x + 0.5;
 
-					_uv2y = 0.5 * _normal.y + 0.5;
 
-
 
-					_normal.copy( element.vertexNormalsModel[ uv3 ] ).applyMatrix3( _normalViewMatrix );
 
-					_uv3x = 0.5 * _normal.x + 0.5;
 
-					_uv3y = 0.5 * _normal.y + 0.5;
 
-
 
-					patternPath( _v1x, _v1y, _v2x, _v2y, _v3x, _v3y, _uv1x, _uv1y, _uv2x, _uv2y, _uv3x, _uv3y, material.envMap );
 
-
 
-				}
 
-
 
-			} else {
 
-
 
-				_color.copy( material.color );
 
-
 
-				if ( material.vertexColors === THREE.FaceColors ) {
 
-
 
-					_color.multiply( element.color );
 
-
 
-				}
 
-
 
-				material.wireframe === true
 
-					 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 
-					 : fillPath( _color );
 
-
 
-			}
 
-
 
-		} else if ( material.isMeshNormalMaterial ) {
 
-
 
-			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
 
-
 
-			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
 
-
 
-			material.wireframe === true
 
-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 
-				 : fillPath( _color );
 
-
 
-		} else {
 
-
 
-			_color.setRGB( 1, 1, 1 );
 
-
 
-			material.wireframe === true
 
-				 ? strokePath( _color, material.wireframeLinewidth, material.wireframeLinecap, material.wireframeLinejoin )
 
-				 : fillPath( _color );
 
-
 
-		}
 
-
 
-	}
 
-
 
-	//
 
-
 
-	function drawTriangle( x0, y0, x1, y1, x2, y2 ) {
 
-
 
-		_context.beginPath();
 
-		_context.moveTo( x0, y0 );
 
-		_context.lineTo( x1, y1 );
 
-		_context.lineTo( x2, y2 );
 
-		_context.closePath();
 
-
 
-	}
 
-
 
-	function strokePath( color, linewidth, linecap, linejoin ) {
 
-
 
-		setLineWidth( linewidth );
 
-		setLineCap( linecap );
 
-		setLineJoin( linejoin );
 
-		setStrokeStyle( color.getStyle() );
 
-
 
-		_context.stroke();
 
-
 
-		_elemBox.expandByScalar( linewidth * 2 );
 
-
 
-	}
 
-
 
-	function fillPath( color ) {
 
-
 
-		setFillStyle( color.getStyle() );
 
-		_context.fill();
 
-
 
-	}
 
-
 
-	function textureToPattern( texture ) {
 
-
 
-		if ( texture.version === 0 ||
 
-			texture instanceof THREE.CompressedTexture ||
 
-			texture instanceof THREE.DataTexture ) {
 
-
 
-			return {
 
-				canvas: undefined,
 
-				version: texture.version
 
-			};
 
-
 
-		}
 
-
 
-		var image = texture.image;
 
-
 
-		if ( image.complete === false ) {
 
-
 
-			return {
 
-				canvas: undefined,
 
-				version: 0
 
-			};
 
-
 
-		}
 
-
 
-		var repeatX = texture.wrapS === THREE.RepeatWrapping || texture.wrapS === THREE.MirroredRepeatWrapping;
 
-		var repeatY = texture.wrapT === THREE.RepeatWrapping || texture.wrapT === THREE.MirroredRepeatWrapping;
 
-
 
-		var mirrorX = texture.wrapS === THREE.MirroredRepeatWrapping;
 
-		var mirrorY = texture.wrapT === THREE.MirroredRepeatWrapping;
 
-
 
-		//
 
-
 
-		var canvas = document.createElement( 'canvas' );
 
-		canvas.width = image.width * ( mirrorX ? 2 : 1 );
 
-		canvas.height = image.height * ( mirrorY ? 2 : 1 );
 
-
 
-		var context = canvas.getContext( '2d' );
 
-		context.setTransform( 1, 0, 0, - 1, 0, image.height );
 
-		context.drawImage( image, 0, 0 );
 
-
 
-		if ( mirrorX === true ) {
 
-
 
-			context.setTransform( - 1, 0, 0, - 1, image.width, image.height );
 
-			context.drawImage( image, - image.width, 0 );
 
-
 
-		}
 
-
 
-		if ( mirrorY === true ) {
 
-
 
-			context.setTransform( 1, 0, 0, 1, 0, 0 );
 
-			context.drawImage( image, 0, image.height );
 
-
 
-		}
 
-
 
-		if ( mirrorX === true && mirrorY === true ) {
 
-
 
-			context.setTransform( - 1, 0, 0, 1, image.width, 0 );
 
-			context.drawImage( image, - image.width, image.height );
 
-
 
-		}
 
-
 
-		var repeat = 'no-repeat';
 
-
 
-		if ( repeatX === true && repeatY === true ) {
 
-
 
-			repeat = 'repeat';
 
-
 
-		} else if ( repeatX === true ) {
 
-
 
-			repeat = 'repeat-x';
 
-
 
-		} else if ( repeatY === true ) {
 
-
 
-			repeat = 'repeat-y';
 
-
 
-		}
 
-
 
-		var pattern = _context.createPattern( canvas, repeat );
 
-
 
-		if ( texture.onUpdate ) texture.onUpdate( texture );
 
-
 
-		return {
 
-			canvas: pattern,
 
-			version: texture.version
 
-		};
 
-
 
-	}
 
-
 
-	function patternPath( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, texture ) {
 
-
 
-		var pattern = _patterns[ texture.id ];
 
-
 
-		if ( pattern === undefined || pattern.version !== texture.version ) {
 
-
 
-			pattern = textureToPattern( texture );
 
-			_patterns[ texture.id ] = pattern;
 
-
 
-		}
 
-
 
-		if ( pattern.canvas !== undefined ) {
 
-
 
-			setFillStyle( pattern.canvas );
 
-
 
-		} else {
 
-
 
-			setFillStyle( 'rgba( 0, 0, 0, 1)' );
 
-			_context.fill();
 
-			return;
 
-
 
-		}
 
-
 
-		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
-
 
-		var a, b, c, d, e, f, det, idet,
 
-			offsetX = texture.offset.x / texture.repeat.x,
 
-			offsetY = texture.offset.y / texture.repeat.y,
 
-			width = texture.image.width * texture.repeat.x,
 
-			height = texture.image.height * texture.repeat.y;
 
-
 
-		u0 = ( u0 + offsetX ) * width;
 
-		v0 = ( v0 + offsetY ) * height;
 
-
 
-		u1 = ( u1 + offsetX ) * width;
 
-		v1 = ( v1 + offsetY ) * height;
 
-
 
-		u2 = ( u2 + offsetX ) * width;
 
-		v2 = ( v2 + offsetY ) * height;
 
-
 
-		x1 -= x0; y1 -= y0;
 
-		x2 -= x0; y2 -= y0;
 
-
 
-		u1 -= u0; v1 -= v0;
 
-		u2 -= u0; v2 -= v0;
 
-
 
-		det = u1 * v2 - u2 * v1;
 
-
 
-		if ( det === 0 ) return;
 
-
 
-		idet = 1 / det;
 
-
 
-		a = ( v2 * x1 - v1 * x2 ) * idet;
 
-		b = ( v2 * y1 - v1 * y2 ) * idet;
 
-		c = ( u1 * x2 - u2 * x1 ) * idet;
 
-		d = ( u1 * y2 - u2 * y1 ) * idet;
 
-
 
-		e = x0 - a * u0 - c * v0;
 
-		f = y0 - b * u0 - d * v0;
 
-
 
-		_context.save();
 
-		_context.transform( a, b, c, d, e, f );
 
-		_context.fill();
 
-		_context.restore();
 
-
 
-	}
 
-
 
-	/*
 
-	function clipImage( x0, y0, x1, y1, x2, y2, u0, v0, u1, v1, u2, v2, image ) {
 
-
 
-		// http://extremelysatisfactorytotalitarianism.com/blog/?p=2120
 
-
 
-		var a, b, c, d, e, f, det, idet,
 
-		width = image.width - 1,
 
-		height = image.height - 1;
 
-
 
-		u0 *= width; v0 *= height;
 
-		u1 *= width; v1 *= height;
 
-		u2 *= width; v2 *= height;
 
-
 
-		x1 -= x0; y1 -= y0;
 
-		x2 -= x0; y2 -= y0;
 
-
 
-		u1 -= u0; v1 -= v0;
 
-		u2 -= u0; v2 -= v0;
 
-
 
-		det = u1 * v2 - u2 * v1;
 
-
 
-		idet = 1 / det;
 
-
 
-		a = ( v2 * x1 - v1 * x2 ) * idet;
 
-		b = ( v2 * y1 - v1 * y2 ) * idet;
 
-		c = ( u1 * x2 - u2 * x1 ) * idet;
 
-		d = ( u1 * y2 - u2 * y1 ) * idet;
 
-
 
-		e = x0 - a * u0 - c * v0;
 
-		f = y0 - b * u0 - d * v0;
 
-
 
-		_context.save();
 
-		_context.transform( a, b, c, d, e, f );
 
-		_context.clip();
 
-		_context.drawImage( image, 0, 0 );
 
-		_context.restore();
 
-
 
-	}
 
-	*/
 
-
 
-	// Hide anti-alias gaps
 
-
 
-	function expand( v1, v2, pixels ) {
 
-
 
-		var x = v2.x - v1.x, y = v2.y - v1.y,
 
-			det = x * x + y * y, idet;
 
-
 
-		if ( det === 0 ) return;
 
-
 
-		idet = pixels / Math.sqrt( det );
 
-
 
-		x *= idet; y *= idet;
 
-
 
-		v2.x += x; v2.y += y;
 
-		v1.x -= x; v1.y -= y;
 
-
 
-	}
 
-
 
-	// Context cached methods.
 
-
 
-	function setOpacity( value ) {
 
-
 
-		if ( _contextGlobalAlpha !== value ) {
 
-
 
-			_context.globalAlpha = value;
 
-			_contextGlobalAlpha = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setBlending( value ) {
 
-
 
-		if ( _contextGlobalCompositeOperation !== value ) {
 
-
 
-			if ( value === THREE.NormalBlending ) {
 
-
 
-				_context.globalCompositeOperation = 'source-over';
 
-
 
-			} else if ( value === THREE.AdditiveBlending ) {
 
-
 
-				_context.globalCompositeOperation = 'lighter';
 
-
 
-			} else if ( value === THREE.SubtractiveBlending ) {
 
-
 
-				_context.globalCompositeOperation = 'darker';
 
-
 
-			} else if ( value === THREE.MultiplyBlending ) {
 
-
 
-				_context.globalCompositeOperation = 'multiply';
 
-
 
-			}
 
-
 
-			_contextGlobalCompositeOperation = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setLineWidth( value ) {
 
-
 
-		if ( _contextLineWidth !== value ) {
 
-
 
-			_context.lineWidth = value;
 
-			_contextLineWidth = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setLineCap( value ) {
 
-
 
-		// "butt", "round", "square"
 
-
 
-		if ( _contextLineCap !== value ) {
 
-
 
-			_context.lineCap = value;
 
-			_contextLineCap = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setLineJoin( value ) {
 
-
 
-		// "round", "bevel", "miter"
 
-
 
-		if ( _contextLineJoin !== value ) {
 
-
 
-			_context.lineJoin = value;
 
-			_contextLineJoin = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setStrokeStyle( value ) {
 
-
 
-		if ( _contextStrokeStyle !== value ) {
 
-
 
-			_context.strokeStyle = value;
 
-			_contextStrokeStyle = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setFillStyle( value ) {
 
-
 
-		if ( _contextFillStyle !== value ) {
 
-
 
-			_context.fillStyle = value;
 
-			_contextFillStyle = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-	function setLineDash( value ) {
 
-
 
-		if ( _contextLineDash.length !== value.length ) {
 
-
 
-			_context.setLineDash( value );
 
-			_contextLineDash = value;
 
-
 
-		}
 
-
 
-	}
 
-
 
-};

+ 1 - 11
examples/misc_lights_test.html
查看文件 

@@ -26,9 +26,6 @@
 
 
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
-		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
-
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
 		<script>
 
 		<script>
 
@@ -38,7 +35,7 @@
 
 
 
 			var container, stats;
 
 			var container, stats;
 
 
 
-			var camera, scene, canvasRenderer, webglRenderer;
 
+			var camera, scene, webglRenderer;
 
 
 
 			var mesh, geometry, material;
 
 			var mesh, geometry, material;
 
 
 
@@ -112,11 +109,6 @@
 
 				mesh.scale.set( 0.05, 0.05, 0.05 );
 
 				mesh.scale.set( 0.05, 0.05, 0.05 );
 
 				pointLight.add( mesh );
 
 				pointLight.add( mesh );
 
 
 
-				canvasRenderer = new THREE.CanvasRenderer();
 
-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 
-				canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
-				container.appendChild( canvasRenderer.domElement );
 
-
 
 				webglRenderer = new THREE.WebGLRenderer();
 
 				webglRenderer = new THREE.WebGLRenderer();
 
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
@@ -141,7 +133,6 @@
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 
 
-				canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 				webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
 
 
 			}
 
 			}
 
@@ -200,7 +191,6 @@
 
 				pointLight.position.x = 200 * Math.cos( r );
 
 				pointLight.position.x = 200 * Math.cos( r );
 
 				pointLight.position.z = 200 * Math.sin( r );
 
 				pointLight.position.z = 200 * Math.sin( r );
 
 
 
-				canvasRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
 			}
 
 			}

+ 1 - 9
examples/misc_ubiquity_test.html
查看文件 

@@ -17,7 +17,6 @@
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
 		<script src="js/renderers/Projector.js"></script>
 
 		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
 		<script src="js/renderers/SVGRenderer.js"></script>
 
 		<script src="js/renderers/SVGRenderer.js"></script>
 
 		<script src="js/renderers/SoftwareRenderer.js"></script>
 
 		<script src="js/renderers/SoftwareRenderer.js"></script>
 
 
 
@@ -28,7 +27,7 @@
 
 			var stats;
 
 			var stats;
 
 
 
 			var camera, scene;
 
 			var camera, scene;
 
-			var canvasRenderer, svgRenderer, softwareRenderer, webglRenderer;
 
+			var svgRenderer, softwareRenderer, webglRenderer;
 
 
 
 			var mesh, group;
 
 			var mesh, group;
 
 
 
@@ -187,11 +186,6 @@
 
 				directional.position.set( - 1, 0.5, 0 );
 
 				directional.position.set( - 1, 0.5, 0 );
 
 				scene.add( directional );
 
 				scene.add( directional );
 
 
 
-				canvasRenderer = new THREE.CanvasRenderer();
 
-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 
-				canvasRenderer.setSize( width, height );
 
-				document.body.appendChild( canvasRenderer.domElement );
 
-
 
 				svgRenderer = new THREE.SVGRenderer();
 
 				svgRenderer = new THREE.SVGRenderer();
 
 				svgRenderer.setSize( width, height );
 
 				svgRenderer.setSize( width, height );
 
 				svgRenderer.setQuality( 'low' );
 
 				svgRenderer.setQuality( 'low' );
 
@@ -223,7 +217,6 @@
 
 				camera.aspect = width / height;
 
 				camera.aspect = width / height;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 
 
-				canvasRenderer.setSize( width, height );
 
 				svgRenderer.setSize( width, height );
 
 				svgRenderer.setSize( width, height );
 
 				softwareRenderer.setSize( width, height );
 
 				softwareRenderer.setSize( width, height );
 
 				webglRenderer.setSize( width, height );
 
 				webglRenderer.setSize( width, height );
 
@@ -253,7 +246,6 @@
 
 
 
 				scene.updateMatrixWorld();
 
 				scene.updateMatrixWorld();
 
 
 
-				canvasRenderer.render( scene, camera );
 
 				svgRenderer.render( scene, camera );
 
 				svgRenderer.render( scene, camera );
 
 				softwareRenderer.render( scene, camera );
 
 				softwareRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );

+ 1 - 10
examples/misc_ubiquity_test2.html
查看文件 

@@ -17,7 +17,6 @@
 
 		<script src="../build/three.js"></script>
 
 		<script src="../build/three.js"></script>
 
 
 
 		<script src="js/renderers/Projector.js"></script>
 
 		<script src="js/renderers/Projector.js"></script>
 
-		<script src="js/renderers/CanvasRenderer.js"></script>
 
 
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 
 
@@ -29,7 +28,7 @@
 
 			var stats;
 
 			var stats;
 
 
 
 			var camera, scene;
 
 			var camera, scene;
 
-			var canvasRenderer, webglRenderer;
 
+			var webglRenderer;
 
 
 
 			var mesh;
 
 			var mesh;
 
 			var texture, texture1, texture2, texture3;
 
 			var texture, texture1, texture2, texture3;
 
@@ -148,12 +147,6 @@
 
 
 
 				//
 
 				//
 
 
 
-				canvasRenderer = new THREE.CanvasRenderer();
 
-				canvasRenderer.setPixelRatio( window.devicePixelRatio );
 
-				canvasRenderer.setSize( width, height );
 
-				var container1 = document.getElementById( 'container1' );
 
-				container1.appendChild( canvasRenderer.domElement );
 
-
 
 				webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 
 				webglRenderer.setPixelRatio( window.devicePixelRatio );
 
 				webglRenderer.setSize( width, height );
 
 				webglRenderer.setSize( width, height );
 
@@ -177,7 +170,6 @@
 
 				camera.aspect = width / height;
 
 				camera.aspect = width / height;
 
 				camera.updateProjectionMatrix();
 
 				camera.updateProjectionMatrix();
 
 
 
-				canvasRenderer.setSize( width, height );
 
 				webglRenderer.setSize( width, height );
 
 				webglRenderer.setSize( width, height );
 
 
 
 			}
 
 			}
 
@@ -222,7 +214,6 @@
 
 
 
 				//
 
 				//
 
 
 
-				canvasRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 				webglRenderer.render( scene, camera );
 
 
 
 			}
 
 			}

+ 1 - 7
src/Three.Legacy.js
查看文件 

@@ -1873,13 +1873,7 @@ export function Projector() {
 
 
 
 export function CanvasRenderer() {
 
 export function CanvasRenderer() {
 
 
 
-	console.error( 'THREE.CanvasRenderer has been moved to /examples/js/renderers/CanvasRenderer.js' );
 
-
 
-	this.domElement = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
 
-	this.clear = function () {};
 
-	this.render = function () {};
 
-	this.setClearColor = function () {};
 
-	this.setSize = function () {};
 
+	console.error( 'THREE.CanvasRenderer has been removed' );
 
 
 
 }
 
 }