Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_lights_pointlights2.html 6.3 KB
Newer Older
M
Added actual site.  
Mr.doob 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - lights - point lights</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: #000;
				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">
M
r86  
Mr.doob 已提交
38 
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - point lights WebGL demo
M
Added actual site.  
Mr.doob 已提交
39 40 
		</div>
M
r76  
Mr.doob 已提交
41 
		<script src="../build/three.js"></script>
M
Added actual site.  
Mr.doob 已提交
42 43 44 

		<script src="js/controls/TrackballControls.js"></script>
M
r97  
Mr.doob 已提交
45 
		<script src="js/WebGL.js"></script>
M
Added actual site.  
Mr.doob 已提交
46 47 48 49 
		<script src="js/libs/stats.min.js"></script>

		<script>
M
r97  
Mr.doob 已提交
50 51 52 53 54 
			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}
M
Added actual site.  
Mr.doob 已提交
55
M
r86  
Mr.doob 已提交
56 57 
			var camera, scene, renderer, controls;
			var light1, light2, light3, light4, light5, light6;
M
Added actual site.  
Mr.doob 已提交
58 59 60 

			var clock = new THREE.Clock();
M
r86  
Mr.doob 已提交
61 62 
			var stats;
M
Added actual site.  
Mr.doob 已提交
63 64 65 66 67 68 69 70 71 
			init();
			animate();

			function init() {

				var container = document.getElementById( 'container' );

				// CAMERA
M
r86  
Mr.doob 已提交
72 
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 300 );
M
Added actual site.  
Mr.doob 已提交
73 
				camera.position.set( 0, 15, 150 );
M
r96  
Mr.doob 已提交
74 
				camera.lookAt( 0, 0, 0 );
M
Added actual site.  
Mr.doob 已提交
75 76 77 78 

				// SCENE

				scene = new THREE.Scene();
M
r87  
Mr.doob 已提交
79 
				scene.background = new THREE.Color( 0x040306 );
M
r86  
Mr.doob 已提交
80 
				scene.fog = new THREE.Fog( 0x040306, 10, 300 );
M
Added actual site.  
Mr.doob 已提交
81 82 

				// TEXTURES
M
r75  
Mr.doob 已提交
83
M
r74  
Mr.doob 已提交
84 
				var textureLoader = new THREE.TextureLoader();
M
Added actual site.  
Mr.doob 已提交
85
M
r74  
Mr.doob 已提交
86 
				var texture = textureLoader.load( "textures/disturb.jpg" );
M
Added actual site.  
Mr.doob 已提交
87 88 89 90 91 92 
				texture.repeat.set( 20, 10 );
				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
				texture.format = THREE.RGBFormat;

				// MATERIALS
M
r71  
Mr.doob 已提交
93 
				var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture } );
M
r75  
Mr.doob 已提交
94 
				var objectMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 1.0 } );
M
Added actual site.  
Mr.doob 已提交
95 96 97 

				// GROUND
M
r69  
Mr.doob 已提交
98 
				var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 800, 400, 2, 2 ), groundMaterial );
M
r75  
Mr.doob 已提交
99 
				mesh.position.y = - 5;
M
Added actual site.  
Mr.doob 已提交
100 101 102 103 104 
				mesh.rotation.x = - Math.PI / 2;
				scene.add( mesh );

				// OBJECTS
M
r92  
Mr.doob 已提交
105 
				var objectGeometry = new THREE.TorusBufferGeometry( 1.5, 0.4, 8, 16 );
M
Added actual site.  
Mr.doob 已提交
106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 

				for ( var i = 0; i < 5000; i ++ ) {

					var mesh = new THREE.Mesh( objectGeometry, objectMaterial );

					mesh.position.x = 400 * ( 0.5 - Math.random() );
					mesh.position.y = 50 * ( 0.5 - Math.random() ) + 25;
					mesh.position.z = 200 * ( 0.5 - Math.random() );

					mesh.rotation.y = 3.14 * ( 0.5 - Math.random() );
					mesh.rotation.x = 3.14 * ( 0.5 - Math.random() );

					mesh.matrixAutoUpdate = false;
					mesh.updateMatrix();
					scene.add( mesh );

				}

				// LIGHTS

				var intensity = 2.5;
				var distance = 100;
M
r75  
Mr.doob 已提交
128 129 
				var decay = 2.0;
M
Added actual site.  
Mr.doob 已提交
130 131 
				var c1 = 0xff0040, c2 = 0x0040ff, c3 = 0x80ff80, c4 = 0xffaa00, c5 = 0x00ffaa, c6 = 0xff1100;
M
r92  
Mr.doob 已提交
132 
				var sphere = new THREE.SphereBufferGeometry( 0.25, 16, 8 );
M
r68  
Mr.doob 已提交
133
M
r75  
Mr.doob 已提交
134 
				light1 = new THREE.PointLight( c1, intensity, distance, decay );
M
r68  
Mr.doob 已提交
135 
				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c1 } ) ) );
M
Added actual site.  
Mr.doob 已提交
136 137 
				scene.add( light1 );
M
r75  
Mr.doob 已提交
138 
				light2 = new THREE.PointLight( c2, intensity, distance, decay );
M
r68  
Mr.doob 已提交
139 
				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c2 } ) ) );
M
Added actual site.  
Mr.doob 已提交
140 141 
				scene.add( light2 );
M
r75  
Mr.doob 已提交
142 
				light3 = new THREE.PointLight( c3, intensity, distance, decay );
M
r68  
Mr.doob 已提交
143 
				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c3 } ) ) );
M
Added actual site.  
Mr.doob 已提交
144 145 
				scene.add( light3 );
M
r75  
Mr.doob 已提交
146 
				light4 = new THREE.PointLight( c4, intensity, distance, decay );
M
r68  
Mr.doob 已提交
147 
				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c4 } ) ) );
M
Added actual site.  
Mr.doob 已提交
148 149 
				scene.add( light4 );
M
r75  
Mr.doob 已提交
150 
				light5 = new THREE.PointLight( c5, intensity, distance, decay );
M
r68  
Mr.doob 已提交
151 
				light5.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c5 } ) ) );
M
Added actual site.  
Mr.doob 已提交
152 153 
				scene.add( light5 );
M
r75  
Mr.doob 已提交
154 
				light6 = new THREE.PointLight( c6, intensity, distance, decay );
M
r68  
Mr.doob 已提交
155 
				light6.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: c6 } ) ) );
M
Added actual site.  
Mr.doob 已提交
156 157 
				scene.add( light6 );
M
r75  
Mr.doob 已提交
158 159 
				var dlight = new THREE.DirectionalLight( 0xffffff, 0.05 );
				dlight.position.set( 0.5, 1, 0 ).normalize();
M
Added actual site.  
Mr.doob 已提交
160 161 162 163 
				scene.add( dlight );

				// RENDERER
M
r92  
Mr.doob 已提交
164 
				renderer = new THREE.WebGLRenderer( { antialias: true } );
M
r70  
Mr.doob 已提交
165 
				renderer.setPixelRatio( window.devicePixelRatio );
M
r61  
Mr.doob 已提交
166 
				renderer.setSize( window.innerWidth, window.innerHeight );
M
Added actual site.  
Mr.doob 已提交
167 168 169 170 171 
				container.appendChild( renderer.domElement );

				renderer.gammaInput = true;
				renderer.gammaOutput = true;
M
Examples: Create TrackballControls with renderer.domElement  
Mugen87 已提交
172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 
				// CONTROLS

				controls = new THREE.TrackballControls( camera, renderer.domElement );

				controls.rotateSpeed = 1.0;
				controls.zoomSpeed = 1.2;
				controls.panSpeed = 0.8;

				controls.noZoom = false;
				controls.noPan = false;

				controls.staticMoving = false;
				controls.dynamicDampingFactor = 0.15;

				controls.keys = [ 65, 83, 68 ];
M
Added actual site.  
Mr.doob 已提交
188 189 190 
				// STATS

				stats = new Stats();
M
r76  
Mr.doob 已提交
191 
				container.appendChild( stats.dom );
M
Added actual site.  
Mr.doob 已提交
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

				controls.handleResize();

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {

				var time = Date.now() * 0.00025;
M
r96  
Mr.doob 已提交
224 
				var d = 150;
M
Added actual site.  
Mr.doob 已提交
225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 

				light1.position.x = Math.sin( time * 0.7 ) * d;
				light1.position.z = Math.cos( time * 0.3 ) * d;

				light2.position.x = Math.cos( time * 0.3 ) * d;
				light2.position.z = Math.sin( time * 0.7 ) * d;

				light3.position.x = Math.sin( time * 0.7 ) * d;
				light3.position.z = Math.sin( time * 0.5 ) * d;

				light4.position.x = Math.sin( time * 0.3 ) * d;
				light4.position.z = Math.sin( time * 0.5 ) * d;

				light5.position.x = Math.cos( time * 0.3 ) * d;
				light5.position.z = Math.sin( time * 0.5 ) * d;

				light6.position.x = Math.cos( time * 0.7 ) * d;
				light6.position.z = Math.cos( time * 0.5 ) * d;

				controls.update( clock.getDelta() );

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>