Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

切换分支/标签
查找文件 普通视图历史永久链接Permalink
css3d_molecules.html 11.0 KB
Newer Older
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
1 2 3 
<!DOCTYPE html>
<html>
	<head>
M
Examples clean up.  
Mr.doob 已提交
4 
		<title>three.js css3d - molecules</title>
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
5 6 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
M
Examples: Unified CSS.  
Mr.doob 已提交
7 
		<link type="text/css" rel="stylesheet" href="main.css">
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
8 9 
		<style>
			body {
A
Nicer background in CSS3D molecules example.  
alteredq 已提交
10 
				background-color: #050505;
M
Simplified css3d_molecules example.  
Mr.doob 已提交
11 
				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
12 13 
			}
M
Examples: Unified CSS.  
Mr.doob 已提交
14 
			#topmenu {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
15 
				position: absolute;
M
Examples: Unified CSS.  
Mr.doob 已提交
16 
				top: 50px;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
17 
				width: 100%;
M
Examples: Unified CSS.  
Mr.doob 已提交
18 19 
				padding: 10px;
				box-sizing: border-box;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
20 21 22 23 24 25 26 
				text-align: center;
			}

			#menu {
				position: absolute;
				bottom: 20px;
				width: 100%;
M
Examples: Unified CSS.  
Mr.doob 已提交
27 28 
				padding: 10px;
				box-sizing: border-box;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
29 
				text-align: center;
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
30 31 
			}
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
32 33 
			button {
				color: rgb(255,255,255);
M
Examples: Unified CSS.  
Mr.doob 已提交
34 
				background: rgb(255,255,255,0.1);
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
35 36 
				border: 0px;
				padding: 5px 10px;
M
Examples: Unified CSS.  
Mr.doob 已提交
37 38 
				margin: 2px;
				font-size: 14px;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
39 40 
				cursor: pointer;
			}
M
Examples: Unified CSS.  
Mr.doob 已提交
41 42 43 44 45 46 47 48 49 

				button:hover {
					background-color: rgba(0,255,255,0.5);
				}

				button:active {
					color: #000000;
					background-color: rgba(0,255,255,1);
				}
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
50 51 52 53 

			.bond {
				width: 5px;
				height: 10px;
A
Nicer background in CSS3D molecules example.  
alteredq 已提交
54 
				background: #eee;
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
55 56 
				display: block;
			}
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
57 58 59 60 
		</style>
	</head>
	<body>
		<div id="container"></div>
M
Examples: Unified CSS.  
Mr.doob 已提交
61 
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
62 
		<div id="topmenu">
M
Examples: Unified CSS.  
Mr.doob 已提交
63 
			<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
64 
		</div>
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
65 66 
		<div id="menu"></div>
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
67 
		<script type="module">
M
Examples: Added padding after script tag.  
Mr.doob 已提交
68
M
Examples: Bring namespace back.  
Mr.doob 已提交
69 
			import * as THREE from '../build/three.module.js';
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
70 71 72 73 74 

			import { TrackballControls } from './jsm/controls/TrackballControls.js';
			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
			import { CSS3DRenderer, CSS3DObject, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
75 76 
			var camera, scene, renderer;
			var controls;
A
Added autospin to css3d_molecules (thanks to @mrdoob)  
alteredq 已提交
77 
			var root;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
78 79 

			var objects = [];
M
Examples: Bring namespace back.  
Mr.doob 已提交
80 81 82 83 84 
			var tmpVec1 = new THREE.Vector3();
			var tmpVec2 = new THREE.Vector3();
			var tmpVec3 = new THREE.Vector3();
			var tmpVec4 = new THREE.Vector3();
			var offset = new THREE.Vector3();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
85
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
86 87 
			var visualizationType = 2;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
88 
			var MOLECULES = {
M
css3d examples improvements.  
Mr.doob 已提交
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 
				"Ethanol": "ethanol.pdb",
				"Aspirin": "aspirin.pdb",
				"Caffeine": "caffeine.pdb",
				"Nicotine": "nicotine.pdb",
				"LSD": "lsd.pdb",
				"Cocaine": "cocaine.pdb",
				"Cholesterol": "cholesterol.pdb",
				"Lycopene": "lycopene.pdb",
				"Glucose": "glucose.pdb",
				"Aluminium oxide": "Al2O3.pdb",
				"Cubane": "cubane.pdb",
				"Copper": "cu.pdb",
				"Fluorite": "caf2.pdb",
				"Salt": "nacl.pdb",
				"YBCO superconductor": "ybco.pdb",
				"Buckyball": "buckyball.pdb",
				//"Diamond": "diamond.pdb",
				"Graphite": "graphite.pdb"
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
107 108 
			};
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
109 
			var loader = new PDBLoader();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
110 111 112 113 114 115 116 117 118 119 
			var colorSpriteMap = {};
			var baseSprite = document.createElement( 'img' );

			var menu = document.getElementById( "menu" );

			init();
			animate();

			function init() {
M
Examples: Bring namespace back.  
Mr.doob 已提交
120 
				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
A
Added autospin to css3d_molecules (thanks to @mrdoob)  
alteredq 已提交
121 
				camera.position.z = 1500;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
122
M
Examples: Bring namespace back.  
Mr.doob 已提交
123 
				scene = new THREE.Scene();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
124
M
Examples: Bring namespace back.  
Mr.doob 已提交
125 
				root = new THREE.Object3D();
A
Added autospin to css3d_molecules (thanks to @mrdoob)  
alteredq 已提交
126 127 
				scene.add( root );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
128 129 
				//
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
130 
				renderer = new CSS3DRenderer();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
131 132 133 134 135 
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.getElementById( 'container' ).appendChild( renderer.domElement );

				//
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
136 
				controls = new TrackballControls( camera, renderer.domElement );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
137 138 139 140 141 142 143 
				controls.rotateSpeed = 0.5;

				//

				baseSprite.onload = function () {

					loadMolecule( "models/molecules/caffeine.pdb" );
A
Some cleanup in css3d molecules example.  
alteredq 已提交
144 
					createMenu();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
145 146 147 148 149 150 151 152 153 154 155 156 157 

				};

				baseSprite.src = 'textures/sprites/ball.png';

				//

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

			}

			//
A
Some cleanup in css3d molecules example.  
alteredq 已提交
158 
			function generateButtonCallback( url ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
159
L
Fix linter errors  
Lewy Blue 已提交
160 
				return function () {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
161
A
Some cleanup in css3d molecules example.  
alteredq 已提交
162 
					loadMolecule( url );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
163
L
Fix linter errors  
Lewy Blue 已提交
164 
				};
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
165
A
Some cleanup in css3d molecules example.  
alteredq 已提交
166 
			}
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
167
A
Some cleanup in css3d molecules example.  
alteredq 已提交
168 
			function createMenu() {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
169
A
Some cleanup in css3d molecules example.  
alteredq 已提交
170 
				for ( var m in MOLECULES ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
171
A
Some cleanup in css3d molecules example.  
alteredq 已提交
172 173 174 
					var button = document.createElement( 'button' );
					button.innerHTML = m;
					menu.appendChild( button );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
175
L
Fix linter errors  
Lewy Blue 已提交
176 
					var url = "models/molecules/" + MOLECULES[ m ];
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
177
A
Some cleanup in css3d molecules example.  
alteredq 已提交
178 
					button.addEventListener( 'click', generateButtonCallback( url ), false );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
179 180 181 

				}
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
182 183 184 185 
				var b_a = document.getElementById( "b_a" );
				var b_b = document.getElementById( "b_b" );
				var b_ab = document.getElementById( "b_ab" );
L
Fix linter errors  
Lewy Blue 已提交
186 187 
				b_a.addEventListener( 'click', function () {
L
Fixed linter errors  
Lewy Blue 已提交
188 189 
					visualizationType = 0;
					showAtoms();
L
Fix linter errors  
Lewy Blue 已提交
190 191 192 193 

				} );
				b_b.addEventListener( 'click', function () {
L
Fixed linter errors  
Lewy Blue 已提交
194 195 
					visualizationType = 1;
					showBonds();
L
Fix linter errors  
Lewy Blue 已提交
196 197 198 199 

				} );
				b_ab.addEventListener( 'click', function () {
L
Fixed linter errors  
Lewy Blue 已提交
200 201 
					visualizationType = 2;
					showAtomsBonds();
L
Fix linter errors  
Lewy Blue 已提交
202 203 

				} );
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
204 205 206 207 208 209 210 211 212 213 214 

			}

			//

			function showAtoms() {

				for ( var i = 0; i < objects.length; i ++ ) {

					var object = objects[ i ];
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
215 
					if ( object instanceof CSS3DSprite ) {
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 

						object.element.style.display = "";
						object.visible = true;

					} else {

						object.element.style.display = "none";
						object.visible = false;

					}

				}

			}

			function showBonds() {

				for ( var i = 0; i < objects.length; i ++ ) {

					var object = objects[ i ];
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
237 
					if ( object instanceof CSS3DSprite ) {
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
238 239 240 241 242 243 244 

						object.element.style.display = "none";
						object.visible = false;

					} else {

						object.element.style.display = "";
M
Fixed molecules example still relying in object.properties.  
Mr.doob 已提交
245 
						object.element.style.height = object.userData.bondLengthFull;
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 
						object.visible = true;

					}

				}

			}

			function showAtomsBonds() {

				for ( var i = 0; i < objects.length; i ++ ) {

					var object = objects[ i ];

					object.element.style.display = "";
					object.visible = true;
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
263 
					if ( ! ( object instanceof CSS3DSprite ) ) {
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
264
M
Fixed molecules example still relying in object.properties.  
Mr.doob 已提交
265 
						object.element.style.height = object.userData.bondLengthShort;
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
266 267 268 269 270 

					}

				}
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
271 272 
			}
A
Some cleanup in css3d molecules example.  
alteredq 已提交
273 274 
			//
M
Simplified css3d_molecules example.  
Mr.doob 已提交
275 
			function colorify( ctx, width, height, color ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
276
M
Simplified css3d_molecules example.  
Mr.doob 已提交
277 
				var r = color.r, g = color.g, b = color.b;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
278 279 280 281 

				var imageData = ctx.getImageData( 0, 0, width, height );
				var data = imageData.data;
M
Simplified css3d_molecules example.  
Mr.doob 已提交
282 
				for ( var i = 0, l = data.length; i < l; i += 4 ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
283
M
Simplified css3d_molecules example.  
Mr.doob 已提交
284 285 286 
					data[ i + 0 ] *= r;
					data[ i + 1 ] *= g;
					data[ i + 2 ] *= b;
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 

				}

				ctx.putImageData( imageData, 0, 0 );

			}

			function imageToCanvas( image ) {

				var width = image.width;
				var height = image.height;

				var canvas = document.createElement( 'canvas' );

				canvas.width = width;
				canvas.height = height;

				var context = canvas.getContext( '2d' );
				context.drawImage( image, 0, 0, width, height );

				return canvas;

			}

			//

			function loadMolecule( url ) {

				for ( var i = 0; i < objects.length; i ++ ) {
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
317 318 
					var object = objects[ i ];
					object.parent.remove( object );
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
319
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
320 321 322 323 
				}

				objects = [];
M
PDBLoader: Fix css3d_molecules  
Mugen87 已提交
324 
				loader.load( url, function ( pdb ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
325
M
PDBLoader: Fix css3d_molecules  
Mugen87 已提交
326 327 328 329 
					var geometryAtoms = pdb.geometryAtoms;
					var geometryBonds = pdb.geometryBonds;
					var json = pdb.json;
M
Examples: Clean up  
Mugen87 已提交
330 331 332 333 
					geometryAtoms.computeBoundingBox();
					geometryAtoms.boundingBox.getCenter( offset ).negate();

					geometryAtoms.translate( offset.x, offset.y, offset.z );
W
Added transform methods to Geometry and BufferGeometry  
WestLangley 已提交
334 
					geometryBonds.translate( offset.x, offset.y, offset.z );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
335
M
PDBLoader: Fix css3d_molecules  
Mugen87 已提交
336 337 
					var positions = geometryAtoms.getAttribute( 'position' );
					var colors = geometryAtoms.getAttribute( 'color' );
M
PDBLoader: Switch to BufferGeometry  
Mugen87 已提交
338
M
Examples: Bring namespace back.  
Mr.doob 已提交
339 340 
					var position = new THREE.Vector3();
					var color = new THREE.Color();
M
PDBLoader: Switch to BufferGeometry  
Mugen87 已提交
341 342 343 344 345 346 347 348 349 350 

					for ( var i = 0; i < positions.count; i ++ ) {

						position.x = positions.getX( i );
						position.y = positions.getY( i );
						position.z = positions.getZ( i );

						color.r = colors.getX( i );
						color.g = colors.getY( i );
						color.b = colors.getZ( i );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
351
M
PDBLoader: Fix css3d_molecules  
Mugen87 已提交
352 353 
						var atom = json.atoms[ i ];
						var element = atom[ 4 ];
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
354
A
Some cleanup in css3d molecules example.  
alteredq 已提交
355 
						if ( ! colorSpriteMap[ element ] ) {
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
356 357 358 359 

							var canvas = imageToCanvas( baseSprite );
							var context = canvas.getContext( '2d' );
M
Simplified css3d_molecules example.  
Mr.doob 已提交
360 
							colorify( context, canvas.width, canvas.height, color );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
361 362 363 364 365 366 367 

							var dataUrl = canvas.toDataURL();

							colorSpriteMap[ element ] = dataUrl;

						}
T
Fix implicit variable declaration in css3d_molecules.html  
Tristan Valcke 已提交
368 
						var colorSprite = colorSpriteMap[ element ];
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
369 370 371 372 

						var atom = document.createElement( 'img' );
						atom.src = colorSprite;
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
373 
						var object = new CSS3DSprite( atom );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
374 
						object.position.copy( position );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
375 
						object.position.multiplyScalar( 75 );
A
Small optimization in CSS3D molecules example.  
alteredq 已提交
376 377 378 379 

						object.matrixAutoUpdate = false;
						object.updateMatrix();
A
Added autospin to css3d_molecules (thanks to @mrdoob)  
alteredq 已提交
380 
						root.add( object );
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
381 382 383 384 385 

						objects.push( object );

					}
M
PDBLoader: Switch to BufferGeometry  
Mugen87 已提交
386 
					positions = geometryBonds.getAttribute( 'position' );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
387
M
Examples: Bring namespace back.  
Mr.doob 已提交
388 389 
					var start = new THREE.Vector3();
					var end = new THREE.Vector3();
M
PDBLoader: Switch to BufferGeometry  
Mugen87 已提交
390 391 392 393 394 395 396 397 398 399 

					for ( var i = 0; i < positions.count; i += 2 ) {

						start.x = positions.getX( i );
						start.y = positions.getY( i );
						start.z = positions.getZ( i );

						end.x = positions.getX( i + 1 );
						end.y = positions.getY( i + 1 );
						end.z = positions.getZ( i + 1 );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
400 401 402 403 

						start.multiplyScalar( 75 );
						end.multiplyScalar( 75 );
M
Removed Vector* add() to addVectors() and addSelf() to add(). Same with sub,...  
Mr.doob 已提交
404 
						tmpVec1.subVectors( end, start );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
405 406 407 408 409 410 411 412 
						var bondLength = tmpVec1.length() - 50;

						//

						var bond = document.createElement( 'div' );
						bond.className = "bond";
						bond.style.height = bondLength + "px";
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
413 
						var object = new CSS3DObject( bond );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
414 
						object.position.copy( start );
M
Removed Vector* add() to addVectors() and addSelf() to add(). Same with sub,...  
Mr.doob 已提交
415 
						object.position.lerp( end, 0.5 );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
416
M
Fixed molecules example still relying in object.properties.  
Mr.doob 已提交
417 418 
						object.userData.bondLengthShort = bondLength + "px";
						object.userData.bondLengthFull = ( bondLength + 55 ) + "px";
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
419
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
420 421 
						//
M
Removed Vector* add() to addVectors() and addSelf() to add(). Same with sub,...  
Mr.doob 已提交
422 
						var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
423 424 
						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
M
Examples: Bring namespace back.  
Mr.doob 已提交
425 
						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
426 
						object.matrix = objMatrix;
W
Set quaternion instead of rotation  
WestLangley 已提交
427 
						object.quaternion.setFromRotationMatrix( object.matrix );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
428
A
Small optimization in CSS3D molecules example.  
alteredq 已提交
429 430 431 
						object.matrixAutoUpdate = false;
						object.updateMatrix();
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
432 433 434 435 436 437 438 439 440 441 
						root.add( object );

						objects.push( object );

						//

						var bond = document.createElement( 'div' );
						bond.className = "bond";
						bond.style.height = bondLength + "px";
M
Examples: Bring namespace back.  
Mr.doob 已提交
442 
						var joint = new THREE.Object3D( bond );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
443 
						joint.position.copy( start );
M
Removed Vector* add() to addVectors() and addSelf() to add(). Same with sub,...  
Mr.doob 已提交
444 
						joint.position.lerp( end, 0.5 );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
445 446 

						joint.matrix.copy( objMatrix );
W
Set quaternion instead of rotation  
WestLangley 已提交
447 
						joint.quaternion.setFromRotationMatrix( joint.matrix );
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
448
A
Small optimization in CSS3D molecules example.  
alteredq 已提交
449 450 451 
						joint.matrixAutoUpdate = false;
						joint.updateMatrix();
M
Examples: Ensure CSS examples use modules.  
Mugen87 已提交
452 
						var object = new CSS3DObject( bond );
L
Fix linter errors  
Lewy Blue 已提交
453 
						object.rotation.y = Math.PI / 2;
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
454
A
Small optimization in CSS3D molecules example.  
alteredq 已提交
455 456 457 
						object.matrixAutoUpdate = false;
						object.updateMatrix();
M
Fixed molecules example still relying in object.properties.  
Mr.doob 已提交
458 459 
						object.userData.bondLengthShort = bondLength + "px";
						object.userData.bondLengthFull = ( bondLength + 55 ) + "px";
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
460
M
Fixed molecules example still relying in object.properties.  
Mr.doob 已提交
461 
						object.userData.joint = joint;
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
462
A
Added bonds to CSS3D molecules example.  
alteredq 已提交
463 464 465 466 467 468 469 470 471 
						joint.add( object );
						root.add( joint );

						objects.push( object );

					}

					//console.log( "CSS3DObjects:", objects.length );
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
472 473 
					switch ( visualizationType ) {
L
Move statements to individual lines  
Lewy Blue 已提交
474 475 476 477 478 479 480 481 482 
						case 0:
							showAtoms();
							break;
						case 1:
							showBonds();
							break;
						case 2:
							showAtomsBonds();
							break;
A
Added buttons for toggling atoms and bonds in CSS3D molecules example.  
alteredq 已提交
483 484 485 

					}
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 
				} );


			}

			//

			function onWindowResize() {

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

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

			}

			function animate() {

				requestAnimationFrame( animate );
				controls.update();
A
Added autospin to css3d_molecules (thanks to @mrdoob)  
alteredq 已提交
507 508 509 510 511 512 513 
				var time = Date.now() * 0.0004;

				root.rotation.x = time;
				root.rotation.y = time * 0.7;

				render();
A
CSS3DRenderer: added molecules example.  
alteredq 已提交
514 515 516 517 518 519 520 521 522 523 524 525 
			}

			function render() {

				renderer.render( scene, camera );

			}

    </script>
  </body>

</html>