Skip to content

CSS2DRenderer: add z respecting #13959

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 30, 2018
Merged

CSS2DRenderer: add z respecting #13959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b28bc7b
CSS2DRenderer: respect z
yomotsu Apr 30, 2018
4f780dc
add an example for CSS2DRenderer
yomotsu Apr 30, 2018
3fb9d61
fix lint error
yomotsu Apr 30, 2018
412f58a
rename css2d renderer instance
yomotsu Apr 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/examples/renderers/CSS2DRenderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ <h1>[name]</h1>
<h2>Examples</h2>

<p>
[example:css2d_label]<br>
[example:webgl_loader_pdb molecules]
</p>

Expand Down
150 changes: 150 additions & 0 deletions examples/css2d_label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>three.js css2d - label</title>
<style>
body {
background-color: #000;
margin: 0;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
color: #FFF;
padding: 5px;
font-family: Monospace;
font-size: 13px;
text-align: center;
z-index: 1;
}

.label{
color: #FFF;
font-family: sans-serif;
padding: 2px;
background: rgba( 0, 0, 0, .6 );
}

a {
color: #000000;
}

</style>
</head>
<body>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>

<script src="../build/three.js"></script>

<script src="js/controls/OrbitControls.js"></script>

<script src="js/renderers/CSS2DRenderer.js"></script>

<script>

var camera, scene, renderer, labelRenderer;
var controls;
var clock = new THREE.Clock();
var textureLoader = new THREE.TextureLoader();

var earth, moon;

init();
animate();

function init() {

var EARTH_RADIUS = 1;
var MOON_RADIUS = 0.27;

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 10, 5, 20 );

controls = new THREE.OrbitControls( camera );

scene = new THREE.Scene();

scene2 = new THREE.Scene();

dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 1 );
scene.add( dirLight );

var axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

//

var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
var earthMaterial = new THREE.MeshPhongMaterial( {
specular: 0x333333,
shininess: 5,
map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
normalScale: new THREE.Vector2( 0.85, 0.85 )
} );
earth = new THREE.Mesh( earthGeometry, earthMaterial );
scene.add( earth );

var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
var moonMaterial = new THREE.MeshPhongMaterial( {
shininess: 5,
map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
} );
moon = new THREE.Mesh( moonGeometry, moonMaterial );
scene.add( moon );

//

var earthDiv = document.createElement( 'div' );
earthDiv.className = 'label';
earthDiv.textContent = 'Earth';
earthDiv.style.marginTop = '-1em';
var earthLabel = new THREE.CSS2DObject( earthDiv );
earthLabel.position.set( 0, EARTH_RADIUS, 0 );
earth.add( earthLabel );

var moonDiv = document.createElement( 'div' );
moonDiv.className = 'label';
moonDiv.textContent = 'Moon';
moonDiv.style.marginTop = '-1em';
var moonLabel = new THREE.CSS2DObject( moonDiv );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );

//

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = 0;
document.body.appendChild( labelRenderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

var elapsed = clock.getElapsedTime();

moon.position.set( Math.sin( elapsed ) * 5, 0, Math.cos( elapsed ) * 5 );

renderer.render( scene, camera );
labelRenderer.render( scene, camera );

}

</script>
</body>
</html>
3 changes: 3 additions & 0 deletions examples/files.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,9 @@ var files = {
"css3d_sprites",
"css3d_youtube"
],
"css2d": [
"css2d_label"
],
"canvas": [
"canvas_ascii_effect",
"canvas_camera_orthographic",
Expand Down
62 changes: 62 additions & 0 deletions examples/js/renderers/CSS2DRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ THREE.CSS2DRenderer = function () {
var viewMatrix = new THREE.Matrix4();
var viewProjectionMatrix = new THREE.Matrix4();

var cache = {
objects: new WeakMap()
};

var domElement = document.createElement( 'div' );
domElement.style.overflow = 'hidden';

Expand Down Expand Up @@ -79,6 +83,12 @@ THREE.CSS2DRenderer = function () {
element.style.oTransform = style;
element.style.transform = style;

var objectData = {
distanceToCameraSquared: getDistanceToSquared( camera, object )
};

cache.objects.set( object, objectData );

if ( element.parentNode !== domElement ) {

domElement.appendChild( element );
Expand All @@ -95,6 +105,57 @@ THREE.CSS2DRenderer = function () {

};

var getDistanceToSquared = function () {

var a = new THREE.Vector3();
var b = new THREE.Vector3();

return function ( object1, object2 ) {

a.setFromMatrixPosition( object1.matrixWorld );
b.setFromMatrixPosition( object2.matrixWorld );

return a.distanceToSquared( b );

};

}();

var filterAndFlatten = function ( scene ) {

var result = [];

scene.traverse( function ( object ) {

if ( object instanceof THREE.CSS2DObject ) result.push( object );

} );

return result;

};

var zOrder = function ( scene ) {

var sorted = filterAndFlatten( scene ).sort( function ( a, b ) {

var distanceA = cache.objects.get( a ).distanceToCameraSquared;
var distanceB = cache.objects.get( b ).distanceToCameraSquared;

return distanceA - distanceB;

} );

var zMax = sorted.length;

for ( var i = 0, l = sorted.length; i < l; i ++ ) {

sorted[ i ].element.style.zIndex = zMax - i;

}

};

this.render = function ( scene, camera ) {

scene.updateMatrixWorld();
Expand All @@ -105,6 +166,7 @@ THREE.CSS2DRenderer = function () {
viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, viewMatrix );

renderObject( scene, camera );
zOrder( scene );

};

Expand Down