Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
interactive_spheres.html 8.8 KB
Newer Older
M
* Trying to make the interaction stuff work...  
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js - interactive - spheres</title>
		<meta charset="utf-8">
		<style type="text/css">
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>


		<script type="text/javascript" src="../src/Three.js"></script>
		<script type="text/javascript" src="../src/core/Color.js"></script>
		<script type="text/javascript" src="../src/core/Vector2.js"></script>
		<script type="text/javascript" src="../src/core/Vector3.js"></script>
		<script type="text/javascript" src="../src/core/Vector4.js"></script>
		<script type="text/javascript" src="../src/core/Rectangle.js"></script>
		<script type="text/javascript" src="../src/core/Matrix3.js"></script>
		<script type="text/javascript" src="../src/core/Matrix4.js"></script>
		<script type="text/javascript" src="../src/core/Vertex.js"></script>
		<script type="text/javascript" src="../src/core/Face3.js"></script>
		<script type="text/javascript" src="../src/core/Face4.js"></script>
		<script type="text/javascript" src="../src/core/UV.js"></script>
		<script type="text/javascript" src="../src/core/Geometry.js"></script>
		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
		<script type="text/javascript" src="../src/objects/Line.js"></script>
		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
		<script type="text/javascript" src="../src/objects/Particle.js"></script>
		<script type="text/javascript" src="../src/lights/Light.js"></script>
		<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
		<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
		<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
		<script type="text/javascript" src="../src/renderers/Projector.js"></script>
		<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
		<script type="text/javascript" src="../src/hci/ClickResolver.js"></script>
		<script type="text/javascript" src="../src/hci/SelectableFace3.js"></script>
		<script type="text/javascript" src="../src/hci/SelectableFace4.js"></script>
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
59 
		<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 
		<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>

		<script type="text/javascript" src="js/Stats.js"></script>

		<script type="text/javascript">

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;
			var stats;

			var camera;
			var scene;
			var renderer;

			var cube, plane;
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
78 
			var mouseX = 0, mouseY = 0, projector;
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 

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

			init();
			setInterval(loop, 1000/60);

			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				var info = document.createElement('div');
				info.id = 'msg';
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'No click detected';
				container.appendChild(info);

				camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.y = 300;
				camera.position.z = 500;
				camera.target.position.y = 150;

				scene = new THREE.Scene();
				clickResolver = new THREE.ClickResolver( camera, scene );

				// Click Cube
				var opacity = 0.8;
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
112 
				geometry = new Cube( 200, 200, 200 );
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 

				for (var i = 0, l = geometry.faces.length; i < l; i++) {

					geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
					geometry.faces[i].selectable = true;
					geometry.faces[i].onSelect = function ( s, c, o, f, p ) {
								f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
								document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
							}

				}

				cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
				cube.position.y = 150;
				scene.addObject(cube);
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
129 
				geometry2 = new Sphere( 100, 20, 20 );
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 

				for (var i = 0, l = geometry2.faces.length; i < l; i++) {

					geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
					geometry2.faces[i].selectable = true;
					geometry2.faces[i].onSelect = function ( s, c, o, f, p ) {
								f.material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, opacity ) ];
								document.getElementById( "msg" ).innerHTML = "Click detected at " + p; 
							};

				}

				cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
				cube2.position.y = 150;
				cube2.position.z = 300;
				scene.addObject(cube2);
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
147 148 149 150 
				var geometry = new THREE.Geometry();

				for (var i = 0; i < 100; i ++) {
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
151 
					var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 

					var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
					var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
					var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );

					v0.position.addSelf( v );
					v1.position.addSelf( v );
					v2.position.addSelf( v );

					var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ) );

					geometry.faces.push( face );
				}

				geometry.computeNormals();
				geometry.computeCentroids();

				var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
170 171 
				// mesh.doubleSided = true;
				// mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
172 
				scene.addObject(mesh);
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
173 174 

				projector = new THREE.Projector();
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
175
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
176 177 178 179 180 181 182 183 184 185 186 
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

				container.appendChild(renderer.domElement);

				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				container.appendChild(stats.domElement);

				document.addEventListener('mousedown', onDocumentMouseDown, false);
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
187 
				// document.addEventListener('mousemove', onDocumentMouseMove, false);
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
188 189 190 191 192 193 
			}

			function onDocumentMouseDown( event ) {

				event.preventDefault();
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
194 195 196 197 198 199 200 201 
				document.getElementById("msg").innerHTML = "";

				clickResolver.findIntersectInScene( event.clientX / window.innerWidth, event.clientY / window.innerHeight );

				var vector = projector.unprojectVector( new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.95 ), camera );

				var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0000 ) );
				particle.position = vector;
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
202
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
203 204 205 206 207 208 209 
				scene.addObject( particle );
			}

			function onDocumentMouseMove( event ) {

				mouseX = event.clientX / window.innerWidth;
				mouseY = event.clientY / window.innerHeight;
M
* Clickresolver.js: Implemented blackpawn's point in triangle algos (...  
Mr.doob 已提交
210
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
211 212 213 214 
			}

			var radius = 600;
			var theta = 0;
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
215
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
216 217 
			function loop() {
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
218 
				theta += 0.2;
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
219 220 221 222 
				camera.position.x = radius * Math.sin( theta * Math.PI / 360 );
				// camera.position.y = radius * Math.sin( theta * Math.PI / 360 );
				camera.position.z = radius * Math.cos( theta * Math.PI / 360 );
M
Projector.unprojectVector() apparently working  
Mr.doob 已提交
223 224 
				// clickResolver.findIntersectInScene( mouseX, mouseY );
M
* Trying to make the interaction stuff work...  
Mr.doob 已提交
225 226 227 228 229 230 231 232 
				renderer.render(scene, camera);
				stats.update();
			}

		</script>

	</body>
</html>