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

Examples: Clean up

Mugen87 7 年之前
父节点
25446d6cfb
当前提交
a6465b7e9e
共有 11 个文件被更改，包括 96 次插入 和 118 次删除
分列视图 显示文件统计
  1. 3 4
      examples/misc_animation_authoring.html
  2. 3 7
      examples/misc_animation_groups.html
  3. 3 7
      examples/misc_animation_keys.html
  4. 3 7
      examples/misc_controls_deviceorientation.html
  5. 27 22
      examples/misc_controls_fly.html
  6. 3 6
      examples/misc_controls_orbit.html
  7. 36 18
      examples/misc_controls_pointerlock.html
  8. 5 12
      examples/misc_controls_trackball.html
  9. 1 1
      examples/misc_controls_transform.html
  10. 7 24
      examples/misc_fps.html
  11. 5 10
      examples/misc_lookat.html

+ 3 - 4
examples/misc_animation_authoring.html
查看文件 

@@ -44,7 +44,7 @@
 
 
 			function init() {
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );
 
@@ -67,7 +67,7 @@
 
 				texture.mapping = THREE.UVMapping;
 
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				var material = new THREE.MeshLambertMaterial( { map: texture } );
 
 
 				control = new THREE.TransformControls( camera, renderer.domElement );
 
@@ -153,8 +153,7 @@
 
 
 				];
 
 
-				new Timeliner(
 
-						new THREE.TimelinerController( scene, trackInfo, render ) );
 
+				new Timeliner( new THREE.TimelinerController( scene, trackInfo, render ) );
 
 
 			}

+ 3 - 7
examples/misc_animation_groups.html
查看文件 

@@ -30,8 +30,6 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div>
 
-
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - groups
 
 		</div>
 
@@ -54,8 +52,6 @@
 
 
 				scene = new THREE.Scene();
 
 
-				var container = document.getElementById( 'container' );
 
-
 
 				//
 
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
@@ -113,15 +109,15 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				//
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				//

+ 3 - 7
examples/misc_animation_keys.html
查看文件 

@@ -30,8 +30,6 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div>
 
-
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - animation - basic use
 
 		</div>
 
@@ -54,8 +52,6 @@
 
 
 				scene = new THREE.Scene();
 
 
-				var container = document.getElementById( 'container' );
 
-
 
 				//
 
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
 
@@ -113,15 +109,15 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				//
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				//

+ 3 - 7
examples/misc_controls_deviceorientation.html
查看文件 

@@ -29,8 +29,6 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div>
 
-
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
 
 			photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
 
@@ -41,15 +39,13 @@
 
 
 		<script>
 
 
-			var container, camera, scene, renderer, controls;
 
+			var camera, scene, renderer, controls;
 
 
 			init();
 
 			animate();
 
 
 			function init() {
 
 
-				container = document.getElementById( 'container' );
 
-
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
 
 
 				controls = new THREE.DeviceOrientationControls( camera );
 
@@ -74,10 +70,10 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				//

+ 27 - 22
examples/misc_controls_fly.html
查看文件 

@@ -72,8 +72,7 @@
 
 			var SCREEN_HEIGHT = window.innerHeight - MARGIN * 2;
 
 			var SCREEN_WIDTH  = window.innerWidth;
 
 
-			var container, stats;
 
-			var camera, controls, scene, renderer;
 
+			var camera, controls, scene, renderer, stats;
 
 			var geometry, meshPlanet, meshClouds, meshMoon;
 
 			var dirLight, pointLight, ambientLight;
 
 
@@ -90,23 +89,12 @@
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 50, 1e7 );
 
 				camera.position.z = radius * 5;
 
 
 				scene = new THREE.Scene();
 
 				scene.fog = new THREE.FogExp2( 0x000000, 0.00000025 );
 
 
-				controls = new THREE.FlyControls( camera );
 
-
 
-				controls.movementSpeed = 1000;
 
-				controls.domElement = container;
 
-				controls.rollSpeed = Math.PI / 24;
 
-				controls.autoForward = false;
 
-				controls.dragToLook = false;
 
-
 
 				dirLight = new THREE.DirectionalLight( 0xffffff );
 
 				dirLight.position.set( -1, 0, 1 ).normalize();
 
 				scene.add( dirLight );
 
@@ -124,7 +112,7 @@
 
 
 				// planet
 
 
-				geometry = new THREE.SphereGeometry( radius, 100, 50 );
 
+				geometry = new THREE.SphereBufferGeometry( radius, 100, 50 );
 
 
 				meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
 
 				meshPlanet.rotation.y = 0;
 
@@ -160,32 +148,38 @@
 
 
 				// stars
 
 
-				var i, r = radius, starsGeometry = [ new THREE.Geometry(), new THREE.Geometry() ];
 
+				var i, r = radius, starsGeometry = [ new THREE.BufferGeometry(), new THREE.BufferGeometry() ];
 
+
 
+				var vertices1 = [];
 
+				var vertices2 = [];
 
+
 
+				var vertex = new THREE.Vector3();
 
 
 				for ( i = 0; i < 250; i ++ ) {
 
 
-					var vertex = new THREE.Vector3();
 
 					vertex.x = Math.random() * 2 - 1;
 
 					vertex.y = Math.random() * 2 - 1;
 
 					vertex.z = Math.random() * 2 - 1;
 
 					vertex.multiplyScalar( r );
 
 
-					starsGeometry[ 0 ].vertices.push( vertex );
 
+					vertices1.push( vertex.x, vertex.y, vertex.z );
 
 
 				}
 
 
 				for ( i = 0; i < 1500; i ++ ) {
 
 
-					var vertex = new THREE.Vector3();
 
 					vertex.x = Math.random() * 2 - 1;
 
 					vertex.y = Math.random() * 2 - 1;
 
 					vertex.z = Math.random() * 2 - 1;
 
 					vertex.multiplyScalar( r );
 
 
-					starsGeometry[ 1 ].vertices.push( vertex );
 
+					vertices2.push( vertex.x, vertex.y, vertex.z );
 
 
 				}
 
 
+				starsGeometry[ 0 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices1, 3 ) );
 
+				starsGeometry[ 1 ].addAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
 
+
 
 				var stars;
 
 				var starsMaterials = [
 
 					new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
 
@@ -212,14 +206,25 @@
 
 
 				}
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				controls = new THREE.FlyControls( camera );
 
+
 
+				controls.movementSpeed = 1000;
 
+				controls.domElement = renderer.domElement;
 
+				controls.rollSpeed = Math.PI / 24;
 
+				controls.autoForward = false;
 
+				controls.dragToLook = false;
 
 
-				container.appendChild( renderer.domElement );
 
+				//
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				window.addEventListener( 'resize', onWindowResize, false );

+ 3 - 6
examples/misc_controls_orbit.html
查看文件 

@@ -32,7 +32,6 @@
 
 	</head>
 
 
 	<body>
 
-		<div id="container"></div>
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - orbit controls example
 
 		</div>
 
@@ -57,12 +56,10 @@
 
 				scene.background = new THREE.Color( 0xcccccc );
 
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				var container = document.getElementById( 'container' );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				camera.position.set( 400, 200, 0 );
 
@@ -85,7 +82,7 @@
 
 
 				// world
 
 
-				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
 
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
 
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 
 				for ( var i = 0; i < 500; i ++ ) {

+ 36 - 18
examples/misc_controls_pointerlock.html
查看文件 

@@ -143,9 +143,6 @@
 
 
 			}
 
 
-			init();
 
-			animate();
 
-
 
 			var controlsEnabled = false;
 
 
 			var moveForward = false;
 
@@ -157,6 +154,11 @@
 
 			var prevTime = performance.now();
 
 			var velocity = new THREE.Vector3();
 
 			var direction = new THREE.Vector3();
 
+			var vertex = new THREE.Vector3();
 
+			var color = new THREE.Color();
 
+
 
+			init();
 
+			animate();
 
 
 			function init() {
 
 
@@ -240,27 +242,39 @@
 
 
 				// floor
 
 
-				var floorGeometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
 
+				var floorGeometry = new THREE.PlaneBufferGeometry( 2000, 2000, 100, 100 );
 
 				floorGeometry.rotateX( - Math.PI / 2 );
 
 
-				for ( var i = 0, l = floorGeometry.vertices.length; i < l; i ++ ) {
 
+				// vertex displacement
 
+
 
+				var position = floorGeometry.attributes.position;
 
+
 
+				for ( var i = 0; i < position.count; i ++ ) {
 
+
 
+					vertex.fromBufferAttribute( position, i );
 
 
-					var vertex = floorGeometry.vertices[ i ];
 
 					vertex.x += Math.random() * 20 - 10;
 
 					vertex.y += Math.random() * 2;
 
 					vertex.z += Math.random() * 20 - 10;
 
 
+					position.setXYZ( i, vertex.x, vertex.y, vertex.z );
 
+
 
 				}
 
 
-				for ( var i = 0, l = floorGeometry.faces.length; i < l; i ++ ) {
 
+				floorGeometry = floorGeometry.toNonIndexed(); // ensure each face has unique vertices
 
+
 
+				count = floorGeometry.attributes.position.count;
 
+				var colors = [];
 
+
 
+				for ( var i = 0; i < count; i ++ ) {
 
 
-					var face = floorGeometry.faces[ i ];
 
-					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
+					colors.push( color.r, color.g, color.b );
 
 
 				}
 
 
+				floorGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+
 
 				var floorMaterial = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 
 				var floor = new THREE.Mesh( floorGeometry, floorMaterial );
 
@@ -268,17 +282,21 @@
 
 
 				// objects
 
 
-				var boxGeometry = new THREE.BoxGeometry( 20, 20, 20 );
 
+				var boxGeometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
+				boxGeometry = boxGeometry.toNonIndexed(); // ensure each face has unique vertices
 
+
 
+				count = boxGeometry.attributes.position.count;
 
+				colors = [];
 
 
-				for ( var i = 0, l = boxGeometry.faces.length; i < l; i ++ ) {
 
+				for ( var i = 0; i < count; i ++ ) {
 
 
-					var face = boxGeometry.faces[ i ];
 
-					face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
-					face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
 
+					colors.push( color.r, color.g, color.b );
 
 
 				}
 
 
+				boxGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
+
 
 				for ( var i = 0; i < 500; i ++ ) {
 
 
 					var boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors } );
 
@@ -296,7 +314,7 @@
 
 
 				//
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				document.body.appendChild( renderer.domElement );

+ 5 - 12
examples/misc_controls_trackball.html
查看文件 

@@ -32,7 +32,6 @@
 
 	</head>
 
 
 	<body>
 
-		<div id="container"></div>
 
 		<div id="info">
 
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - trackball controls example<br />
 
 			MOVE mouse &amp; press LEFT/A: rotate, MIDDLE/S: zoom, RIGHT/D: pan
 
@@ -49,11 +48,7 @@
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-			var container, stats;
 
-
 
-			var camera, controls, scene, renderer;
 
-
 
-			var cross;
 
+			var camera, controls, scene, renderer, stats;
 
 
 			init();
 
 			animate();
 
@@ -85,7 +80,7 @@
 
 				scene.background = new THREE.Color( 0xcccccc );
 
 				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
 
 
-				var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
 
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
 
 				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
 
 				for ( var i = 0; i < 500; i ++ ) {
 
@@ -117,15 +112,13 @@
 
 
 				// renderer
 
 
-				renderer = new THREE.WebGLRenderer();
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-
 
-				container = document.getElementById( 'container' );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				//

+ 1 - 1
examples/misc_controls_transform.html
查看文件 

@@ -64,7 +64,7 @@
 
 				texture.mapping = THREE.UVMapping;
 
 				texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
 
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
 
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				var material = new THREE.MeshLambertMaterial( { map: texture } );
 
 
 				control = new THREE.TransformControls( camera, renderer.domElement );

+ 7 - 24
examples/misc_fps.html
查看文件 

@@ -29,7 +29,6 @@
 
 	</head>
 
 	<body>
 
 
-		<div id="container"></div>
 
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - platformer demo. cubemap by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>.<br />Use arrow keys to look around, WASD to move and SPACE to jump.</div>
 
 
 		<script src="../build/three.js"></script>
 
@@ -217,22 +216,6 @@
 
 
 			// init 3D stuff
 
 
-			function makeSkybox( urls, size ) {
 
-				var skyboxCubemap = new THREE.CubeTextureLoader().load( urls );
 
-				skyboxCubemap.format = THREE.RGBFormat;
 
-
 
-				var skyboxShader = THREE.ShaderLib['cube'];
 
-				skyboxShader.uniforms['tCube'].value = skyboxCubemap;
 
-
 
-				return new THREE.Mesh(
 
-					new THREE.BoxGeometry( size, size, size ),
 
-					new THREE.ShaderMaterial({
 
-						fragmentShader : skyboxShader.fragmentShader, vertexShader : skyboxShader.vertexShader,
 
-						uniforms : skyboxShader.uniforms, depthWrite : false, side : THREE.BackSide
 
-					})
 
-				);
 
-			}
 
-
 
 			function makePlatform( jsonUrl, textureUrl, textureQuality ) {
 
 				var placeholder = new THREE.Object3D();
 
 
@@ -255,23 +238,25 @@
 
 				return placeholder;
 
 			}
 
 
-			var renderer = new THREE.WebGLRenderer({ antialias : true });
 
+			var renderer = new THREE.WebGLRenderer( { antialias : true } );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
+			document.body.appendChild( renderer.domElement );
 
 
 			var camera = new THREE.PerspectiveCamera( 60, 1, 0.1, 9000 );
 
 
 			var scene = new THREE.Scene();
 
 
-			scene.add( camera );
 
-
 
-			scene.add( makeSkybox( [
 
+			var envMap = new THREE.CubeTextureLoader().load( [
 
 				'textures/cube/skybox/px.jpg', // right
 
 				'textures/cube/skybox/nx.jpg', // left
 
 				'textures/cube/skybox/py.jpg', // top
 
 				'textures/cube/skybox/ny.jpg', // bottom
 
 				'textures/cube/skybox/pz.jpg', // back
 
 				'textures/cube/skybox/nz.jpg'  // front
 
-			], 8000 ));
 
+			] );
 
+			envMap.format = THREE.RGBFormat;
 
+
 
+			scene.background = envMap;
 
 
 			scene.add( makePlatform(
 
 				'models/platform/platform.json',
 
@@ -320,8 +305,6 @@
 
 				width: window.innerWidth, height: window.innerHeight
 
 			}};
 
 
-			document.getElementById( 'container' ).appendChild( renderer.domElement );
 
-
 
 			start( gameLoop, gameViewportSize );
 
 		</script>
 
 	</body>

+ 5 - 10
examples/misc_lookat.html
查看文件 

@@ -37,9 +37,7 @@
 
 
 		<script>
 
 
-			var container, stats;
 
-
 
-			var camera, scene, renderer;
 
+			var camera, scene, renderer, stats;
 
 
 			var mesh, geometry, sphere;
 
 
@@ -56,19 +54,16 @@
 
 
 			function init() {
 
 
-				container = document.createElement( 'div' );
 
-				document.body.appendChild( container );
 
-
 
 				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 15000 );
 
 				camera.position.z = 3200;
 
 
 				scene = new THREE.Scene();
 
 				scene.background = new THREE.Color( 0xffffff );
 
 
-				sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
 
+				sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 100, 20, 20 ), new THREE.MeshNormalMaterial() );
 
 				scene.add( sphere );
 
 
-				var geometry = new THREE.CylinderGeometry( 0, 10, 100, 12 );
 
+				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 100, 12 );
 
 				geometry.rotateX( Math.PI / 2 );
 
 
 				var material = new THREE.MeshNormalMaterial();
 
@@ -89,10 +84,10 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				container.appendChild( renderer.domElement );
 
+				document.body.appendChild( renderer.domElement );
 
 
 				stats = new Stats();
 
-				container.appendChild( stats.dom );
 
+				document.body.appendChild( stats.dom );
 
 
 				//