├── Makefile
├── README.md
├── examples
├── basic.html
├── images
│ ├── dices-transparent.png
│ ├── glass-sphere-with-transparency_153267809.jpg
│ ├── mercury-transparent.png
│ └── screenshot-threex-transparency-512x512.jpg
└── vendor
│ └── three.js
│ ├── build
│ └── three.min.js
│ └── examples
│ └── js
│ └── controls
│ └── OrbitControls.js
└── threex.transparency.js
/Makefile:
--------------------------------------------------------------------------------
1 | # makefile to automatize simple operations
2 |
3 | server:
4 | python -m SimpleHTTPServer
5 |
6 | deploy:
7 | # assume there is something to commit
8 | # use "git diff --exit-code HEAD" to know if there is something to commit
9 | # so two lines: one if no commit, one if something to commit
10 | git commit -a -m "New deploy" && git push -f origin HEAD:gh-pages && git reset HEAD~
11 |
12 | install:
13 | git submodule update --init
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | threex.transparency
2 | ===================
3 |
4 | threex.transparency is a [three.js games extension](http://www.threejsgames.com/extensions/) to easily handle transparency. Transparency is a tricky business in Webgl, but this extension makes it approachable. It is worth trying. Do you remember the transparency between the leaves of a tree in 3D games? Well, with this extension you will be able to add it to your own game. You can also make clouds appear transparent in the sky you have created for your game. It is easy to include and it gives a nice polish finish, a professional touch.
5 |
6 | Show Don't Tell
7 | ===============
8 | * [examples/basic.html](http://jeromeetienne.github.io/threex.transparency/examples/basic.html)
9 | \[[view source](https://github.com/jeromeetienne/threex.transparency/blob/master/examples/basic.html)\] :
10 | It shows a basic usage of this extension.
11 |
12 | A Screenshot
13 | ============
14 | [](http://jeromeetienne.github.io/threex.transparency/examples/basic.html)
15 |
16 | How To Install It
17 | =================
18 |
19 | You can install it via script tag
20 |
21 | ```html
22 |
23 | ```
24 |
25 | Or you can install with [bower](http://bower.io/), as you wish.
26 |
27 | ```bash
28 | bower install threex.transparency
29 | ```
30 |
31 | ## How To Use It ?
32 |
33 | The algo is well described in this
34 | [opengl tutorial about transparency](http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-10-transparency/). We just adapt it to fit three.js.
35 | First you setup all the objects that you want to be transparent
36 |
37 | ```
38 | THREEx.Transparency.init(objects)
39 | ```
40 |
41 | It will change the ```THREE.Material``` to make it support transparent.
42 | Second you need to update all your objects at every frame.
43 |
44 | ```
45 | THREEx.Transparency.update(objects, camera)
46 | ```
47 |
--------------------------------------------------------------------------------
/examples/basic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
109 |
--------------------------------------------------------------------------------
/examples/images/dices-transparent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromeetienne/threex.transparency/9cdc95589a4c4ad2a394b875eaebb41292d87ea8/examples/images/dices-transparent.png
--------------------------------------------------------------------------------
/examples/images/glass-sphere-with-transparency_153267809.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromeetienne/threex.transparency/9cdc95589a4c4ad2a394b875eaebb41292d87ea8/examples/images/glass-sphere-with-transparency_153267809.jpg
--------------------------------------------------------------------------------
/examples/images/mercury-transparent.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromeetienne/threex.transparency/9cdc95589a4c4ad2a394b875eaebb41292d87ea8/examples/images/mercury-transparent.png
--------------------------------------------------------------------------------
/examples/images/screenshot-threex-transparency-512x512.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jeromeetienne/threex.transparency/9cdc95589a4c4ad2a394b875eaebb41292d87ea8/examples/images/screenshot-threex-transparency-512x512.jpg
--------------------------------------------------------------------------------
/examples/vendor/three.js/examples/js/controls/OrbitControls.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author qiao / https://github.com/qiao
3 | * @author mrdoob / http://mrdoob.com
4 | * @author alteredq / http://alteredqualia.com/
5 | * @author WestLangley / http://github.com/WestLangley
6 | * @author erich666 / http://erichaines.com
7 | */
8 | /*global THREE, console */
9 |
10 | ( function () {
11 |
12 | function OrbitConstraint ( object ) {
13 |
14 | this.object = object;
15 |
16 | // "target" sets the location of focus, where the object orbits around
17 | // and where it pans with respect to.
18 | this.target = new THREE.Vector3();
19 |
20 | // Limits to how far you can dolly in and out ( PerspectiveCamera only )
21 | this.minDistance = 0;
22 | this.maxDistance = Infinity;
23 |
24 | // Limits to how far you can zoom in and out ( OrthographicCamera only )
25 | this.minZoom = 0;
26 | this.maxZoom = Infinity;
27 |
28 | // How far you can orbit vertically, upper and lower limits.
29 | // Range is 0 to Math.PI radians.
30 | this.minPolarAngle = 0; // radians
31 | this.maxPolarAngle = Math.PI; // radians
32 |
33 | // How far you can orbit horizontally, upper and lower limits.
34 | // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
35 | this.minAzimuthAngle = - Infinity; // radians
36 | this.maxAzimuthAngle = Infinity; // radians
37 |
38 | // Set to true to enable damping (inertia)
39 | // If damping is enabled, you must call controls.update() in your animation loop
40 | this.enableDamping = false;
41 | this.dampingFactor = 0.25;
42 |
43 | ////////////
44 | // internals
45 |
46 | var scope = this;
47 |
48 | var EPS = 0.000001;
49 |
50 | // Current position in spherical coordinate system.
51 | var theta;
52 | var phi;
53 |
54 | // Pending changes
55 | var phiDelta = 0;
56 | var thetaDelta = 0;
57 | var scale = 1;
58 | var panOffset = new THREE.Vector3();
59 | var zoomChanged = false;
60 |
61 | // API
62 |
63 | this.getPolarAngle = function () {
64 |
65 | return phi;
66 |
67 | };
68 |
69 | this.getAzimuthalAngle = function () {
70 |
71 | return theta;
72 |
73 | };
74 |
75 | this.rotateLeft = function ( angle ) {
76 |
77 | thetaDelta -= angle;
78 |
79 | };
80 |
81 | this.rotateUp = function ( angle ) {
82 |
83 | phiDelta -= angle;
84 |
85 | };
86 |
87 | // pass in distance in world space to move left
88 | this.panLeft = function() {
89 |
90 | var v = new THREE.Vector3();
91 |
92 | return function panLeft ( distance ) {
93 |
94 | var te = this.object.matrix.elements;
95 |
96 | // get X column of matrix
97 | v.set( te[ 0 ], te[ 1 ], te[ 2 ] );
98 | v.multiplyScalar( - distance );
99 |
100 | panOffset.add( v );
101 |
102 | };
103 |
104 | }();
105 |
106 | // pass in distance in world space to move up
107 | this.panUp = function() {
108 |
109 | var v = new THREE.Vector3();
110 |
111 | return function panUp ( distance ) {
112 |
113 | var te = this.object.matrix.elements;
114 |
115 | // get Y column of matrix
116 | v.set( te[ 4 ], te[ 5 ], te[ 6 ] );
117 | v.multiplyScalar( distance );
118 |
119 | panOffset.add( v );
120 |
121 | };
122 |
123 | }();
124 |
125 | // pass in x,y of change desired in pixel space,
126 | // right and down are positive
127 | this.pan = function ( deltaX, deltaY, screenWidth, screenHeight ) {
128 |
129 | if ( scope.object instanceof THREE.PerspectiveCamera ) {
130 |
131 | // perspective
132 | var position = scope.object.position;
133 | var offset = position.clone().sub( scope.target );
134 | var targetDistance = offset.length();
135 |
136 | // half of the fov is center to top of screen
137 | targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );
138 |
139 | // we actually don't use screenWidth, since perspective camera is fixed to screen height
140 | scope.panLeft( 2 * deltaX * targetDistance / screenHeight );
141 | scope.panUp( 2 * deltaY * targetDistance / screenHeight );
142 |
143 | } else if ( scope.object instanceof THREE.OrthographicCamera ) {
144 |
145 | // orthographic
146 | scope.panLeft( deltaX * ( scope.object.right - scope.object.left ) / screenWidth );
147 | scope.panUp( deltaY * ( scope.object.top - scope.object.bottom ) / screenHeight );
148 |
149 | } else {
150 |
151 | // camera neither orthographic or perspective
152 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
153 |
154 | }
155 |
156 | };
157 |
158 | this.dollyIn = function ( dollyScale ) {
159 |
160 | if ( scope.object instanceof THREE.PerspectiveCamera ) {
161 |
162 | scale /= dollyScale;
163 |
164 | } else if ( scope.object instanceof THREE.OrthographicCamera ) {
165 |
166 | scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom * dollyScale ) );
167 | scope.object.updateProjectionMatrix();
168 | zoomChanged = true;
169 |
170 | } else {
171 |
172 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
173 |
174 | }
175 |
176 | };
177 |
178 | this.dollyOut = function ( dollyScale ) {
179 |
180 | if ( scope.object instanceof THREE.PerspectiveCamera ) {
181 |
182 | scale *= dollyScale;
183 |
184 | } else if ( scope.object instanceof THREE.OrthographicCamera ) {
185 |
186 | scope.object.zoom = Math.max( this.minZoom, Math.min( this.maxZoom, this.object.zoom / dollyScale ) );
187 | scope.object.updateProjectionMatrix();
188 | zoomChanged = true;
189 |
190 | } else {
191 |
192 | console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
193 |
194 | }
195 |
196 | };
197 |
198 | this.update = function() {
199 |
200 | var offset = new THREE.Vector3();
201 |
202 | // so camera.up is the orbit axis
203 | var quat = new THREE.Quaternion().setFromUnitVectors( object.up, new THREE.Vector3( 0, 1, 0 ) );
204 | var quatInverse = quat.clone().inverse();
205 |
206 | var lastPosition = new THREE.Vector3();
207 | var lastQuaternion = new THREE.Quaternion();
208 |
209 | return function () {
210 |
211 | var position = this.object.position;
212 |
213 | offset.copy( position ).sub( this.target );
214 |
215 | // rotate offset to "y-axis-is-up" space
216 | offset.applyQuaternion( quat );
217 |
218 | // angle from z-axis around y-axis
219 |
220 | theta = Math.atan2( offset.x, offset.z );
221 |
222 | // angle from y-axis
223 |
224 | phi = Math.atan2( Math.sqrt( offset.x * offset.x + offset.z * offset.z ), offset.y );
225 |
226 | theta += thetaDelta;
227 | phi += phiDelta;
228 |
229 | // restrict theta to be between desired limits
230 | theta = Math.max( this.minAzimuthAngle, Math.min( this.maxAzimuthAngle, theta ) );
231 |
232 | // restrict phi to be between desired limits
233 | phi = Math.max( this.minPolarAngle, Math.min( this.maxPolarAngle, phi ) );
234 |
235 | // restrict phi to be betwee EPS and PI-EPS
236 | phi = Math.max( EPS, Math.min( Math.PI - EPS, phi ) );
237 |
238 | var radius = offset.length() * scale;
239 |
240 | // restrict radius to be between desired limits
241 | radius = Math.max( this.minDistance, Math.min( this.maxDistance, radius ) );
242 |
243 | // move target to panned location
244 | this.target.add( panOffset );
245 |
246 | offset.x = radius * Math.sin( phi ) * Math.sin( theta );
247 | offset.y = radius * Math.cos( phi );
248 | offset.z = radius * Math.sin( phi ) * Math.cos( theta );
249 |
250 | // rotate offset back to "camera-up-vector-is-up" space
251 | offset.applyQuaternion( quatInverse );
252 |
253 | position.copy( this.target ).add( offset );
254 |
255 | this.object.lookAt( this.target );
256 |
257 | if ( this.enableDamping === true ) {
258 |
259 | thetaDelta *= ( 1 - this.dampingFactor );
260 | phiDelta *= ( 1 - this.dampingFactor );
261 |
262 | } else {
263 |
264 | thetaDelta = 0;
265 | phiDelta = 0;
266 |
267 | }
268 |
269 | scale = 1;
270 | panOffset.set( 0, 0, 0 );
271 |
272 | // update condition is:
273 | // min(camera displacement, camera rotation in radians)^2 > EPS
274 | // using small-angle approximation cos(x/2) = 1 - x^2 / 8
275 |
276 | if ( zoomChanged ||
277 | lastPosition.distanceToSquared( this.object.position ) > EPS ||
278 | 8 * ( 1 - lastQuaternion.dot( this.object.quaternion ) ) > EPS ) {
279 |
280 | lastPosition.copy( this.object.position );
281 | lastQuaternion.copy( this.object.quaternion );
282 | zoomChanged = false;
283 |
284 | return true;
285 |
286 | }
287 |
288 | return false;
289 |
290 | };
291 |
292 | }();
293 |
294 | };
295 |
296 |
297 | // This set of controls performs orbiting, dollying (zooming), and panning. It maintains
298 | // the "up" direction as +Y, unlike the TrackballControls. Touch on tablet and phones is
299 | // supported.
300 | //
301 | // Orbit - left mouse / touch: one finger move
302 | // Zoom - middle mouse, or mousewheel / touch: two finger spread or squish
303 | // Pan - right mouse, or arrow keys / touch: three finter swipe
304 |
305 | THREE.OrbitControls = function ( object, domElement ) {
306 |
307 | var constraint = new OrbitConstraint( object );
308 |
309 | this.domElement = ( domElement !== undefined ) ? domElement : document;
310 |
311 | // API
312 |
313 | Object.defineProperty( this, 'constraint', {
314 |
315 | get: function() {
316 |
317 | return constraint;
318 |
319 | }
320 |
321 | } );
322 |
323 | this.getPolarAngle = function () {
324 |
325 | return constraint.getPolarAngle();
326 |
327 | };
328 |
329 | this.getAzimuthalAngle = function () {
330 |
331 | return constraint.getAzimuthalAngle();
332 |
333 | };
334 |
335 | // Set to false to disable this control
336 | this.enabled = true;
337 |
338 | // center is old, deprecated; use "target" instead
339 | this.center = this.target;
340 |
341 | // This option actually enables dollying in and out; left as "zoom" for
342 | // backwards compatibility.
343 | // Set to false to disable zooming
344 | this.enableZoom = true;
345 | this.zoomSpeed = 1.0;
346 |
347 | // Set to false to disable rotating
348 | this.enableRotate = true;
349 | this.rotateSpeed = 1.0;
350 |
351 | // Set to false to disable panning
352 | this.enablePan = true;
353 | this.keyPanSpeed = 7.0; // pixels moved per arrow key push
354 |
355 | // Set to true to automatically rotate around the target
356 | // If auto-rotate is enabled, you must call controls.update() in your animation loop
357 | this.autoRotate = false;
358 | this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
359 |
360 | // Set to false to disable use of the keys
361 | this.enableKeys = true;
362 |
363 | // The four arrow keys
364 | this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
365 |
366 | // Mouse buttons
367 | this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
368 |
369 | ////////////
370 | // internals
371 |
372 | var scope = this;
373 |
374 | var rotateStart = new THREE.Vector2();
375 | var rotateEnd = new THREE.Vector2();
376 | var rotateDelta = new THREE.Vector2();
377 |
378 | var panStart = new THREE.Vector2();
379 | var panEnd = new THREE.Vector2();
380 | var panDelta = new THREE.Vector2();
381 |
382 | var dollyStart = new THREE.Vector2();
383 | var dollyEnd = new THREE.Vector2();
384 | var dollyDelta = new THREE.Vector2();
385 |
386 | var STATE = { NONE : - 1, ROTATE : 0, DOLLY : 1, PAN : 2, TOUCH_ROTATE : 3, TOUCH_DOLLY : 4, TOUCH_PAN : 5 };
387 |
388 | var state = STATE.NONE;
389 |
390 | // for reset
391 |
392 | this.target0 = this.target.clone();
393 | this.position0 = this.object.position.clone();
394 | this.zoom0 = this.object.zoom;
395 |
396 | // events
397 |
398 | var changeEvent = { type: 'change' };
399 | var startEvent = { type: 'start' };
400 | var endEvent = { type: 'end' };
401 |
402 | // pass in x,y of change desired in pixel space,
403 | // right and down are positive
404 | function pan( deltaX, deltaY ) {
405 |
406 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
407 |
408 | constraint.pan( deltaX, deltaY, element.clientWidth, element.clientHeight );
409 |
410 | }
411 |
412 | this.update = function () {
413 |
414 | if ( this.autoRotate && state === STATE.NONE ) {
415 |
416 | constraint.rotateLeft( getAutoRotationAngle() );
417 |
418 | }
419 |
420 | if ( constraint.update() === true ) {
421 |
422 | this.dispatchEvent( changeEvent );
423 |
424 | }
425 |
426 | };
427 |
428 | this.reset = function () {
429 |
430 | state = STATE.NONE;
431 |
432 | this.target.copy( this.target0 );
433 | this.object.position.copy( this.position0 );
434 | this.object.zoom = this.zoom0;
435 |
436 | this.object.updateProjectionMatrix();
437 | this.dispatchEvent( changeEvent );
438 |
439 | this.update();
440 |
441 | };
442 |
443 | function getAutoRotationAngle() {
444 |
445 | return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
446 |
447 | }
448 |
449 | function getZoomScale() {
450 |
451 | return Math.pow( 0.95, scope.zoomSpeed );
452 |
453 | }
454 |
455 | function onMouseDown( event ) {
456 |
457 | if ( scope.enabled === false ) return;
458 |
459 | event.preventDefault();
460 |
461 | if ( event.button === scope.mouseButtons.ORBIT ) {
462 |
463 | if ( scope.enableRotate === false ) return;
464 |
465 | state = STATE.ROTATE;
466 |
467 | rotateStart.set( event.clientX, event.clientY );
468 |
469 | } else if ( event.button === scope.mouseButtons.ZOOM ) {
470 |
471 | if ( scope.enableZoom === false ) return;
472 |
473 | state = STATE.DOLLY;
474 |
475 | dollyStart.set( event.clientX, event.clientY );
476 |
477 | } else if ( event.button === scope.mouseButtons.PAN ) {
478 |
479 | if ( scope.enablePan === false ) return;
480 |
481 | state = STATE.PAN;
482 |
483 | panStart.set( event.clientX, event.clientY );
484 |
485 | }
486 |
487 | if ( state !== STATE.NONE ) {
488 |
489 | document.addEventListener( 'mousemove', onMouseMove, false );
490 | document.addEventListener( 'mouseup', onMouseUp, false );
491 | scope.dispatchEvent( startEvent );
492 |
493 | }
494 |
495 | }
496 |
497 | function onMouseMove( event ) {
498 |
499 | if ( scope.enabled === false ) return;
500 |
501 | event.preventDefault();
502 |
503 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
504 |
505 | if ( state === STATE.ROTATE ) {
506 |
507 | if ( scope.enableRotate === false ) return;
508 |
509 | rotateEnd.set( event.clientX, event.clientY );
510 | rotateDelta.subVectors( rotateEnd, rotateStart );
511 |
512 | // rotating across whole screen goes 360 degrees around
513 | constraint.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
514 |
515 | // rotating up and down along whole screen attempts to go 360, but limited to 180
516 | constraint.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
517 |
518 | rotateStart.copy( rotateEnd );
519 |
520 | } else if ( state === STATE.DOLLY ) {
521 |
522 | if ( scope.enableZoom === false ) return;
523 |
524 | dollyEnd.set( event.clientX, event.clientY );
525 | dollyDelta.subVectors( dollyEnd, dollyStart );
526 |
527 | if ( dollyDelta.y > 0 ) {
528 |
529 | constraint.dollyIn( getZoomScale() );
530 |
531 | } else if ( dollyDelta.y < 0 ) {
532 |
533 | constraint.dollyOut( getZoomScale() );
534 |
535 | }
536 |
537 | dollyStart.copy( dollyEnd );
538 |
539 | } else if ( state === STATE.PAN ) {
540 |
541 | if ( scope.enablePan === false ) return;
542 |
543 | panEnd.set( event.clientX, event.clientY );
544 | panDelta.subVectors( panEnd, panStart );
545 |
546 | pan( panDelta.x, panDelta.y );
547 |
548 | panStart.copy( panEnd );
549 |
550 | }
551 |
552 | if ( state !== STATE.NONE ) scope.update();
553 |
554 | }
555 |
556 | function onMouseUp( /* event */ ) {
557 |
558 | if ( scope.enabled === false ) return;
559 |
560 | document.removeEventListener( 'mousemove', onMouseMove, false );
561 | document.removeEventListener( 'mouseup', onMouseUp, false );
562 | scope.dispatchEvent( endEvent );
563 | state = STATE.NONE;
564 |
565 | }
566 |
567 | function onMouseWheel( event ) {
568 |
569 | if ( scope.enabled === false || scope.enableZoom === false || state !== STATE.NONE ) return;
570 |
571 | event.preventDefault();
572 | event.stopPropagation();
573 |
574 | var delta = 0;
575 |
576 | if ( event.wheelDelta !== undefined ) {
577 |
578 | // WebKit / Opera / Explorer 9
579 |
580 | delta = event.wheelDelta;
581 |
582 | } else if ( event.detail !== undefined ) {
583 |
584 | // Firefox
585 |
586 | delta = - event.detail;
587 |
588 | }
589 |
590 | if ( delta > 0 ) {
591 |
592 | constraint.dollyOut( getZoomScale() );
593 |
594 | } else if ( delta < 0 ) {
595 |
596 | constraint.dollyIn( getZoomScale() );
597 |
598 | }
599 |
600 | scope.update();
601 | scope.dispatchEvent( startEvent );
602 | scope.dispatchEvent( endEvent );
603 |
604 | }
605 |
606 | function onKeyDown( event ) {
607 |
608 | if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
609 |
610 | switch ( event.keyCode ) {
611 |
612 | case scope.keys.UP:
613 | pan( 0, scope.keyPanSpeed );
614 | scope.update();
615 | break;
616 |
617 | case scope.keys.BOTTOM:
618 | pan( 0, - scope.keyPanSpeed );
619 | scope.update();
620 | break;
621 |
622 | case scope.keys.LEFT:
623 | pan( scope.keyPanSpeed, 0 );
624 | scope.update();
625 | break;
626 |
627 | case scope.keys.RIGHT:
628 | pan( - scope.keyPanSpeed, 0 );
629 | scope.update();
630 | break;
631 |
632 | }
633 |
634 | }
635 |
636 | function touchstart( event ) {
637 |
638 | if ( scope.enabled === false ) return;
639 |
640 | switch ( event.touches.length ) {
641 |
642 | case 1: // one-fingered touch: rotate
643 |
644 | if ( scope.enableRotate === false ) return;
645 |
646 | state = STATE.TOUCH_ROTATE;
647 |
648 | rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
649 | break;
650 |
651 | case 2: // two-fingered touch: dolly
652 |
653 | if ( scope.enableZoom === false ) return;
654 |
655 | state = STATE.TOUCH_DOLLY;
656 |
657 | var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
658 | var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
659 | var distance = Math.sqrt( dx * dx + dy * dy );
660 | dollyStart.set( 0, distance );
661 | break;
662 |
663 | case 3: // three-fingered touch: pan
664 |
665 | if ( scope.enablePan === false ) return;
666 |
667 | state = STATE.TOUCH_PAN;
668 |
669 | panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
670 | break;
671 |
672 | default:
673 |
674 | state = STATE.NONE;
675 |
676 | }
677 |
678 | if ( state !== STATE.NONE ) scope.dispatchEvent( startEvent );
679 |
680 | }
681 |
682 | function touchmove( event ) {
683 |
684 | if ( scope.enabled === false ) return;
685 |
686 | event.preventDefault();
687 | event.stopPropagation();
688 |
689 | var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
690 |
691 | switch ( event.touches.length ) {
692 |
693 | case 1: // one-fingered touch: rotate
694 |
695 | if ( scope.enableRotate === false ) return;
696 | if ( state !== STATE.TOUCH_ROTATE ) return;
697 |
698 | rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
699 | rotateDelta.subVectors( rotateEnd, rotateStart );
700 |
701 | // rotating across whole screen goes 360 degrees around
702 | constraint.rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
703 | // rotating up and down along whole screen attempts to go 360, but limited to 180
704 | constraint.rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
705 |
706 | rotateStart.copy( rotateEnd );
707 |
708 | scope.update();
709 | break;
710 |
711 | case 2: // two-fingered touch: dolly
712 |
713 | if ( scope.enableZoom === false ) return;
714 | if ( state !== STATE.TOUCH_DOLLY ) return;
715 |
716 | var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
717 | var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
718 | var distance = Math.sqrt( dx * dx + dy * dy );
719 |
720 | dollyEnd.set( 0, distance );
721 | dollyDelta.subVectors( dollyEnd, dollyStart );
722 |
723 | if ( dollyDelta.y > 0 ) {
724 |
725 | constraint.dollyOut( getZoomScale() );
726 |
727 | } else if ( dollyDelta.y < 0 ) {
728 |
729 | constraint.dollyIn( getZoomScale() );
730 |
731 | }
732 |
733 | dollyStart.copy( dollyEnd );
734 |
735 | scope.update();
736 | break;
737 |
738 | case 3: // three-fingered touch: pan
739 |
740 | if ( scope.enablePan === false ) return;
741 | if ( state !== STATE.TOUCH_PAN ) return;
742 |
743 | panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
744 | panDelta.subVectors( panEnd, panStart );
745 |
746 | pan( panDelta.x, panDelta.y );
747 |
748 | panStart.copy( panEnd );
749 |
750 | scope.update();
751 | break;
752 |
753 | default:
754 |
755 | state = STATE.NONE;
756 |
757 | }
758 |
759 | }
760 |
761 | function touchend( /* event */ ) {
762 |
763 | if ( scope.enabled === false ) return;
764 |
765 | scope.dispatchEvent( endEvent );
766 | state = STATE.NONE;
767 |
768 | }
769 |
770 | function contextmenu( event ) {
771 |
772 | event.preventDefault();
773 |
774 | }
775 |
776 | this.dispose = function() {
777 |
778 | this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
779 | this.domElement.removeEventListener( 'mousedown', onMouseDown, false );
780 | this.domElement.removeEventListener( 'mousewheel', onMouseWheel, false );
781 | this.domElement.removeEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox
782 |
783 | this.domElement.removeEventListener( 'touchstart', touchstart, false );
784 | this.domElement.removeEventListener( 'touchend', touchend, false );
785 | this.domElement.removeEventListener( 'touchmove', touchmove, false );
786 |
787 | document.removeEventListener( 'mousemove', onMouseMove, false );
788 | document.removeEventListener( 'mouseup', onMouseUp, false );
789 |
790 | window.removeEventListener( 'keydown', onKeyDown, false );
791 |
792 | }
793 |
794 | this.domElement.addEventListener( 'contextmenu', contextmenu, false );
795 |
796 | this.domElement.addEventListener( 'mousedown', onMouseDown, false );
797 | this.domElement.addEventListener( 'mousewheel', onMouseWheel, false );
798 | this.domElement.addEventListener( 'DOMMouseScroll', onMouseWheel, false ); // firefox
799 |
800 | this.domElement.addEventListener( 'touchstart', touchstart, false );
801 | this.domElement.addEventListener( 'touchend', touchend, false );
802 | this.domElement.addEventListener( 'touchmove', touchmove, false );
803 |
804 | window.addEventListener( 'keydown', onKeyDown, false );
805 |
806 | // force an update at start
807 | this.update();
808 |
809 | };
810 |
811 | THREE.OrbitControls.prototype = Object.create( THREE.EventDispatcher.prototype );
812 | THREE.OrbitControls.prototype.constructor = THREE.OrbitControls;
813 |
814 | Object.defineProperties( THREE.OrbitControls.prototype, {
815 |
816 | object: {
817 |
818 | get: function () {
819 |
820 | return this.constraint.object;
821 |
822 | }
823 |
824 | },
825 |
826 | target: {
827 |
828 | get: function () {
829 |
830 | return this.constraint.target;
831 |
832 | },
833 |
834 | set: function ( value ) {
835 |
836 | console.warn( 'THREE.OrbitControls: target is now immutable. Use target.set() instead.' );
837 | this.constraint.target.copy( value );
838 |
839 | }
840 |
841 | },
842 |
843 | minDistance : {
844 |
845 | get: function () {
846 |
847 | return this.constraint.minDistance;
848 |
849 | },
850 |
851 | set: function ( value ) {
852 |
853 | this.constraint.minDistance = value;
854 |
855 | }
856 |
857 | },
858 |
859 | maxDistance : {
860 |
861 | get: function () {
862 |
863 | return this.constraint.maxDistance;
864 |
865 | },
866 |
867 | set: function ( value ) {
868 |
869 | this.constraint.maxDistance = value;
870 |
871 | }
872 |
873 | },
874 |
875 | minZoom : {
876 |
877 | get: function () {
878 |
879 | return this.constraint.minZoom;
880 |
881 | },
882 |
883 | set: function ( value ) {
884 |
885 | this.constraint.minZoom = value;
886 |
887 | }
888 |
889 | },
890 |
891 | maxZoom : {
892 |
893 | get: function () {
894 |
895 | return this.constraint.maxZoom;
896 |
897 | },
898 |
899 | set: function ( value ) {
900 |
901 | this.constraint.maxZoom = value;
902 |
903 | }
904 |
905 | },
906 |
907 | minPolarAngle : {
908 |
909 | get: function () {
910 |
911 | return this.constraint.minPolarAngle;
912 |
913 | },
914 |
915 | set: function ( value ) {
916 |
917 | this.constraint.minPolarAngle = value;
918 |
919 | }
920 |
921 | },
922 |
923 | maxPolarAngle : {
924 |
925 | get: function () {
926 |
927 | return this.constraint.maxPolarAngle;
928 |
929 | },
930 |
931 | set: function ( value ) {
932 |
933 | this.constraint.maxPolarAngle = value;
934 |
935 | }
936 |
937 | },
938 |
939 | minAzimuthAngle : {
940 |
941 | get: function () {
942 |
943 | return this.constraint.minAzimuthAngle;
944 |
945 | },
946 |
947 | set: function ( value ) {
948 |
949 | this.constraint.minAzimuthAngle = value;
950 |
951 | }
952 |
953 | },
954 |
955 | maxAzimuthAngle : {
956 |
957 | get: function () {
958 |
959 | return this.constraint.maxAzimuthAngle;
960 |
961 | },
962 |
963 | set: function ( value ) {
964 |
965 | this.constraint.maxAzimuthAngle = value;
966 |
967 | }
968 |
969 | },
970 |
971 | enableDamping : {
972 |
973 | get: function () {
974 |
975 | return this.constraint.enableDamping;
976 |
977 | },
978 |
979 | set: function ( value ) {
980 |
981 | this.constraint.enableDamping = value;
982 |
983 | }
984 |
985 | },
986 |
987 | dampingFactor : {
988 |
989 | get: function () {
990 |
991 | return this.constraint.dampingFactor;
992 |
993 | },
994 |
995 | set: function ( value ) {
996 |
997 | this.constraint.dampingFactor = value;
998 |
999 | }
1000 |
1001 | },
1002 |
1003 | // backward compatibility
1004 |
1005 | noZoom: {
1006 |
1007 | get: function () {
1008 |
1009 | console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
1010 | return ! this.enableZoom;
1011 |
1012 | },
1013 |
1014 | set: function ( value ) {
1015 |
1016 | console.warn( 'THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
1017 | this.enableZoom = ! value;
1018 |
1019 | }
1020 |
1021 | },
1022 |
1023 | noRotate: {
1024 |
1025 | get: function () {
1026 |
1027 | console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
1028 | return ! this.enableRotate;
1029 |
1030 | },
1031 |
1032 | set: function ( value ) {
1033 |
1034 | console.warn( 'THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
1035 | this.enableRotate = ! value;
1036 |
1037 | }
1038 |
1039 | },
1040 |
1041 | noPan: {
1042 |
1043 | get: function () {
1044 |
1045 | console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
1046 | return ! this.enablePan;
1047 |
1048 | },
1049 |
1050 | set: function ( value ) {
1051 |
1052 | console.warn( 'THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
1053 | this.enablePan = ! value;
1054 |
1055 | }
1056 |
1057 | },
1058 |
1059 | noKeys: {
1060 |
1061 | get: function () {
1062 |
1063 | console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
1064 | return ! this.enableKeys;
1065 |
1066 | },
1067 |
1068 | set: function ( value ) {
1069 |
1070 | console.warn( 'THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
1071 | this.enableKeys = ! value;
1072 |
1073 | }
1074 |
1075 | },
1076 |
1077 | staticMoving : {
1078 |
1079 | get: function () {
1080 |
1081 | console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
1082 | return ! this.constraint.enableDamping;
1083 |
1084 | },
1085 |
1086 | set: function ( value ) {
1087 |
1088 | console.warn( 'THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
1089 | this.constraint.enableDamping = ! value;
1090 |
1091 | }
1092 |
1093 | },
1094 |
1095 | dynamicDampingFactor : {
1096 |
1097 | get: function () {
1098 |
1099 | console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
1100 | return this.constraint.dampingFactor;
1101 |
1102 | },
1103 |
1104 | set: function ( value ) {
1105 |
1106 | console.warn( 'THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
1107 | this.constraint.dampingFactor = value;
1108 |
1109 | }
1110 |
1111 | }
1112 |
1113 | } );
1114 |
1115 | }() );
1116 |
--------------------------------------------------------------------------------
/threex.transparency.js:
--------------------------------------------------------------------------------
1 | var THREEx = THREEx || {}
2 |
3 | /**
4 | * namespace for the extension
5 | * @type {Object}
6 | */
7 | THREEx.Transparency = {};
8 |
9 | /**
10 | * init transparency of a object recursivly
11 | * @param {THREE.Object3D[]} objects the object which are transparent
12 | */
13 | THREEx.Transparency.init = function(objects){
14 | objects.forEach(function(object){
15 | object.material.transparent = true
16 | object.material.depthWrite = false
17 | });
18 | }
19 |
20 | /**
21 | * update the object for transparency rendering
22 | * @param {THREE.Object3D[]} objects the objects which are transparent
23 | * @param {THREE.Camera} camera the camera used for rendering
24 | */
25 | THREEx.Transparency.update = function(objects, camera){
26 | // update camera matrices
27 | camera.updateMatrixWorld()
28 | camera.matrixWorldInverse.getInverse( camera.matrixWorld )
29 |
30 | var screenMatrix= new THREE.Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)
31 | var position = new THREE.Vector3()
32 |
33 | // traverse the object
34 | objects.forEach(function(object){
35 | // update the matrixWorld of the object and its children
36 | object.updateMatrixWorld()
37 | // compute its position in screen space
38 | position.setFromMatrixPosition( object.matrixWorld );
39 | position.applyProjection( screenMatrix );
40 | // use the position.x as renderDepth
41 | object.renderOrder = -position.z;
42 | })
43 | }
44 |
45 |
46 |
--------------------------------------------------------------------------------