/** * @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.applyProjection( 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 === undefined ) camera.updateMatrixWorld(); camera.matrixWorldInverse.getInverse( camera.matrixWorld ); viewMatrix.copy( camera.matrixWorldInverse.getInverse( camera.matrixWorld ) ); viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix ); renderObject( scene, camera ); }; };