Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl2_sandbox.html 3.5 KB
Newer Older
M
Added WebGL2Renderer.  
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 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - webgl2 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 {
				background:#000;
				padding:0;
				margin:0;
				font-weight: bold;
				overflow:hidden;
			}

			#info {
				position: absolute;
				top: 0px; width: 100%;
				color: #ffffff;
				padding: 5px;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				z-index:1000;
			}

			a {
				color: #ffffff;
			}

		</style>
	</head>

	<body>
M
Fixed lgtm.com unsafe external link alerts.  
Mr.doob 已提交
35 
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl2 sandbox.</div>
M
Added WebGL2Renderer.  
Mr.doob 已提交
36
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
37 38 39 40 41 42 43 44 45 46 
		<script type="module">

			import { PerspectiveCamera } from '../src/cameras/PerspectiveCamera.js';
			import { SphereBufferGeometry } from '../src/geometries/SphereGeometry.js';
			import { MeshNormalMaterial } from '../src/materials/MeshNormalMaterial.js';
			import { PointLight } from '../src/lights/PointLight.js';
			import { Color } from '../src/math/Color.js';
			import { Mesh } from '../src/objects/Mesh.js';
			import { Fog } from '../src/scenes/Fog.js';
			import { Scene } from '../src/scenes/Scene.js';
T
Update webgl2_sandbox example  
Takahiro 已提交
47 
			import { WebGLRenderer } from '../src/renderers/WebGLRenderer.js';
M
Added WebGL2Renderer.  
Mr.doob 已提交
48
M
Cleaned up webgl2_sandbox example.  
Mr.doob 已提交
49 
			//
M
Added WebGL2Renderer.  
Mr.doob 已提交
50 51 52 53 54 55 56 57 58 59 60 61 62 

			var camera, scene, renderer;

			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
63 
				camera = new PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
M
Added WebGL2Renderer.  
Mr.doob 已提交
64 65 
				camera.position.z = 3200;
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
66 67 68 
				scene = new Scene();
				scene.background = new Color( 0, 0, 0.5 );
				scene.fog = new Fog( 0x000000, 1, 20000 );
M
Added WebGL2Renderer.  
Mr.doob 已提交
69
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
70 
				var light = new PointLight( 0xffffff );
M
Added WebGL2Renderer.  
Mr.doob 已提交
71 72 
				scene.add( light );
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
73 74 
				var geometry = new SphereBufferGeometry( 50, 32, 16 );
				var material = new MeshNormalMaterial();
M
Added WebGL2Renderer.  
Mr.doob 已提交
75 76 77 

				for ( var i = 0; i < 5000; i ++ ) {
T
Revert "Enable webgl2_sandbox example"  
Takahiro 已提交
78 
					var mesh = new Mesh( geometry, material );
M
Added WebGL2Renderer.  
Mr.doob 已提交
79 80 81 82 83 84 85 

					mesh.position.x = Math.random() * 10000 - 5000;
					mesh.position.y = Math.random() * 10000 - 5000;
					mesh.position.z = Math.random() * 10000 - 5000;

					mesh.rotation.y = Math.random() * 2 * Math.PI;
M
Cleaned up webgl2_sandbox example.  
Mr.doob 已提交
86 
					mesh.scale.setScalar( Math.random() * 4 + 1 );
M
Added WebGL2Renderer.  
Mr.doob 已提交
87 88 89 90 91 

					scene.add( mesh );

				}
T
Update webgl2_sandbox example  
Takahiro 已提交
92 93 94 95 
				var canvas = document.createElement( 'canvas' );
				var context = canvas.getContext( 'webgl2' );

				renderer = new WebGLRenderer( { canvas: canvas, context: context } );
M
Added WebGL2Renderer.  
Mr.doob 已提交
96 97 
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
M
Cleaned up webgl2_sandbox example.  
Mr.doob 已提交
98 
				document.body.appendChild( renderer.domElement );
M
Added WebGL2Renderer.  
Mr.doob 已提交
99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 

				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 ) * 10;
				mouseY = ( event.clientY - windowHalfY ) * 10;

			}

			//

			function animate() {

				requestAnimationFrame( animate );

				render();

			}

			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>