123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104 |
- /**
- * @author mrdoob / http://mrdoob.com/
- */
- THREE.CSS2DObject = function ( element ) {
- THREE.Object3D.call( this );
- this.element = element;
- this.element.style.position = 'absolute';
- this.addEventListener( 'removed', function ( event ) {
- if ( this.element.parentNode !== null ) {
- this.element.parentNode.removeChild( this.element );
- }
- } );
- };
- THREE.CSS2DObject.prototype = Object.create( THREE.Object3D.prototype );
- THREE.CSS2DObject.prototype.constructor = THREE.CSS2DObject;
- //
- THREE.CSS2DRenderer = function () {
- console.log( 'THREE.CSS2DRenderer', THREE.REVISION );
- var _width, _height;
- var _widthHalf, _heightHalf;
- var vector = new THREE.Vector3();
- var viewMatrix = new THREE.Matrix4();
- var viewProjectionMatrix = new THREE.Matrix4();
- var domElement = document.createElement( 'div' );
- domElement.style.overflow = 'hidden';
- this.domElement = domElement;
- this.setSize = function ( width, height ) {
- _width = width;
- _height = height;
- _widthHalf = _width / 2;
- _heightHalf = _height / 2;
- domElement.style.width = width + 'px';
- domElement.style.height = height + 'px';
- };
- var renderObject = function ( object, camera ) {
- if ( object instanceof THREE.CSS2DObject ) {
- vector.setFromMatrixPosition( object.matrixWorld );
- vector.applyMatrix4( viewProjectionMatrix );
- var element = object.element;
- var style = 'translate(-50%,-50%) translate(' + ( vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - vector.y * _heightHalf + _heightHalf ) + 'px)';
- element.style.WebkitTransform = style;
- element.style.MozTransform = style;
- element.style.oTransform = style;
- element.style.transform = style;
- if ( element.parentNode !== domElement ) {
- domElement.appendChild( element );
- }
- }
- for ( var i = 0, l = object.children.length; i < l; i ++ ) {
- renderObject( object.children[ i ], camera );
- }
- };
- this.render = function ( scene, camera ) {
- scene.updateMatrixWorld();
- if ( camera.parent === null ) camera.updateMatrixWorld();
- camera.matrixWorldInverse.getInverse( camera.matrixWorld );
- viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) );
- viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );
- renderObject( scene, camera );
- };
- };
|