Skip to content

Commit d79e3dc

Browse files
mrdoobmrdoob
committed
Removed Projected dependency in CSS3DRenderer.
1 parent 9bfc3f1 commit d79e3dc

1 file changed

Lines changed: 74 additions & 70 deletions

File tree

‎examples/js/renderers/CSS3DRenderer.js‎

Lines changed: 74 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -34,36 +34,36 @@ THREE.CSS3DRenderer = function () {
3434

3535
var _width, _height;
3636
var _widthHalf, _heightHalf;
37-
var _projector = new THREE.Projector();
3837

39-
var _tmpMatrix = new THREE.Matrix4();
38+
var matrix = new THREE.Matrix4();
4039

41-
this.domElement = document.createElement( 'div' );
40+
var domElement = document.createElement( 'div' );
41+
domElement.style.overflow = 'hidden';
4242

43-
this.domElement.style.overflow = 'hidden';
43+
domElement.style.WebkitTransformStyle = 'preserve-3d';
44+
domElement.style.WebkitPerspectiveOrigin = '50% 50%';
4445

45-
this.domElement.style.WebkitTransformStyle = 'preserve-3d';
46-
this.domElement.style.WebkitPerspectiveOrigin = '50% 50%';
46+
domElement.style.MozTransformStyle = 'preserve-3d';
47+
domElement.style.MozPerspectiveOrigin = '50% 50%';
4748

48-
this.domElement.style.MozTransformStyle = 'preserve-3d';
49-
this.domElement.style.MozPerspectiveOrigin = '50% 50%';
49+
domElement.style.oTransformStyle = 'preserve-3d';
50+
domElement.style.oPerspectiveOrigin = '50% 50%';
5051

51-
this.domElement.style.oTransformStyle = 'preserve-3d';
52-
this.domElement.style.oPerspectiveOrigin = '50% 50%';
52+
domElement.style.transformStyle = 'preserve-3d';
53+
domElement.style.perspectiveOrigin = '50% 50%';
5354

54-
this.domElement.style.transformStyle = 'preserve-3d';
55-
this.domElement.style.perspectiveOrigin = '50% 50%';
55+
this.domElement = domElement;
5656

57-
// TODO: Shouldn't it be possible to remove cameraElement?
57+
var cameraElement = document.createElement( 'div' );
5858

59-
this.cameraElement = document.createElement( 'div' );
59+
cameraElement.style.WebkitTransformStyle = 'preserve-3d';
60+
cameraElement.style.MozTransformStyle = 'preserve-3d';
61+
cameraElement.style.oTransformStyle = 'preserve-3d';
62+
cameraElement.style.transformStyle = 'preserve-3d';
6063

61-
this.cameraElement.style.WebkitTransformStyle = 'preserve-3d';
62-
this.cameraElement.style.MozTransformStyle = 'preserve-3d';
63-
this.cameraElement.style.oTransformStyle = 'preserve-3d';
64-
this.cameraElement.style.transformStyle = 'preserve-3d';
64+
domElement.appendChild( cameraElement );
6565

66-
this.domElement.appendChild( this.cameraElement );
66+
this.cameraElement = cameraElement;
6767

6868
this.setSize = function ( width, height ) {
6969

@@ -73,11 +73,11 @@ THREE.CSS3DRenderer = function () {
7373
_widthHalf = _width / 2;
7474
_heightHalf = _height / 2;
7575

76-
this.domElement.style.width = width + 'px';
77-
this.domElement.style.height = height + 'px';
76+
domElement.style.width = width + 'px';
77+
domElement.style.height = height + 'px';
7878

79-
this.cameraElement.style.width = width + 'px';
80-
this.cameraElement.style.height = height + 'px';
79+
cameraElement.style.width = width + 'px';
80+
cameraElement.style.height = height + 'px';
8181

8282
};
8383

@@ -110,7 +110,7 @@ THREE.CSS3DRenderer = function () {
110110
epsilon( elements[ 15 ] ) +
111111
')';
112112

113-
}
113+
};
114114

115115
var getObjectCSSMatrix = function ( matrix ) {
116116

@@ -135,77 +135,81 @@ THREE.CSS3DRenderer = function () {
135135
epsilon( elements[ 15 ] ) +
136136
')';
137137

138-
}
138+
};
139139

140-
this.render = function ( scene, camera ) {
140+
var renderObject = function ( object, camera ) {
141141

142-
var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
142+
if ( object instanceof THREE.CSS3DObject ) {
143143

144-
this.domElement.style.WebkitPerspective = fov + "px";
145-
this.domElement.style.MozPerspective = fov + "px";
146-
this.domElement.style.oPerspective = fov + "px";
147-
this.domElement.style.perspective = fov + "px";
144+
if ( object instanceof THREE.CSS3DSprite ) {
148145

149-
var objects = _projector.projectScene( scene, camera, false ).objects;
146+
// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
150147

151-
var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) + " translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
148+
matrix.copy( camera.matrixWorldInverse );
149+
matrix.transpose();
150+
matrix.copyPosition( object.matrixWorld );
151+
matrix.scale( object.scale );
152152

153-
this.cameraElement.style.WebkitTransform = style;
154-
this.cameraElement.style.MozTransform = style;
155-
this.cameraElement.style.oTransform = style;
156-
this.cameraElement.style.transform = style;
153+
matrix.elements[ 3 ] = 0;
154+
matrix.elements[ 7 ] = 0;
155+
matrix.elements[ 11 ] = 0;
156+
matrix.elements[ 15 ] = 1;
157157

158-
for ( var i = 0, il = objects.length; i < il; i ++ ) {
158+
style = getObjectCSSMatrix( matrix );
159159

160-
var object = objects[ i ].object;
160+
} else {
161161

162-
if ( object instanceof THREE.CSS3DObject ) {
162+
style = getObjectCSSMatrix( object.matrixWorld );
163163

164-
var element = object.element;
164+
}
165165

166-
if ( object instanceof THREE.CSS3DSprite ) {
166+
var element = object.element;
167167

168-
// http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
168+
element.style.WebkitTransform = style;
169+
element.style.MozTransform = style;
170+
element.style.oTransform = style;
171+
element.style.transform = style;
169172

170-
_tmpMatrix.copy( camera.matrixWorldInverse );
171-
_tmpMatrix.transpose();
172-
_tmpMatrix.copyPosition( object.matrixWorld );
173-
_tmpMatrix.scale( object.scale );
173+
if ( element.parentNode !== cameraElement ) {
174174

175-
_tmpMatrix.elements[ 3 ] = 0;
176-
_tmpMatrix.elements[ 7 ] = 0;
177-
_tmpMatrix.elements[ 11 ] = 0;
178-
_tmpMatrix.elements[ 15 ] = 1;
175+
cameraElement.appendChild( element );
179176

180-
style = getObjectCSSMatrix( _tmpMatrix );
177+
}
181178

182-
} else {
179+
}
183180

184-
style = getObjectCSSMatrix( object.matrixWorld );
181+
for ( var i = 0, l = object.children.length; i < l; i ++ ) {
185182

186-
}
183+
renderObject( object.children[ i ], camera );
187184

188-
/*
189-
element.style.WebkitBackfaceVisibility = 'hidden';
190-
element.style.MozBackfaceVisibility = 'hidden';
191-
element.style.oBackfaceVisibility = 'hidden';
192-
element.style.backfaceVisibility = 'hidden';
193-
*/
185+
}
194186

195-
element.style.WebkitTransform = style;
196-
element.style.MozTransform = style;
197-
element.style.oTransform = style;
198-
element.style.transform = style;
187+
};
199188

200-
if ( element.parentNode !== this.cameraElement ) {
189+
this.render = function ( scene, camera ) {
201190

202-
this.cameraElement.appendChild( element );
191+
var fov = 0.5 / Math.tan( THREE.Math.degToRad( camera.fov * 0.5 ) ) * _height;
203192

204-
}
193+
domElement.style.WebkitPerspective = fov + "px";
194+
domElement.style.MozPerspective = fov + "px";
195+
domElement.style.oPerspective = fov + "px";
196+
domElement.style.perspective = fov + "px";
205197

206-
}
198+
scene.updateMatrixWorld();
207199

208-
}
200+
if ( camera.parent === undefined ) camera.updateMatrixWorld();
201+
202+
camera.matrixWorldInverse.getInverse( camera.matrixWorld );
203+
204+
var style = "translate3d(0,0," + fov + "px)" + getCameraCSSMatrix( camera.matrixWorldInverse ) +
205+
" translate3d(" + _widthHalf + "px," + _heightHalf + "px, 0)";
206+
207+
cameraElement.style.WebkitTransform = style;
208+
cameraElement.style.MozTransform = style;
209+
cameraElement.style.oTransform = style;
210+
cameraElement.style.transform = style;
211+
212+
renderObject( scene, camera );
209213

210214
};
211215

0 commit comments

Comments
 (0)