I'm using THREE JS CSS3DRenderer - trying to make a CSS3DObject update it's position.z on click. Here's my code:

var element = document.createElement( "div" );
element.style.width = "90px";
element.style.height = "120px";
element.style.backgroundColor = "#5C6167";
//
var object = new THREE.CSS3DObject( element );
object.position.x = 0;
object.position.y = 0;
object.position.z = 100;
object.addEventListener( 'click', function ( event ) {
new TWEEN.Tween( object.position ).to( {z: 200}, 500 ).easing( TWEEN.Easing.Quadratic.Out).start();
});
scene.add( object );

For whatever reason the CSS3DObject will not take a click event. Guidance please. :)

I'm using THREE JS CSS3DRenderer - trying to make a CSS3DObject update it's position.z on click. Here's my code:

var element = document.createElement( "div" );
element.style.width = "90px";
element.style.height = "120px";
element.style.backgroundColor = "#5C6167";
//
var object = new THREE.CSS3DObject( element );
object.position.x = 0;
object.position.y = 0;
object.position.z = 100;
object.addEventListener( 'click', function ( event ) {
new TWEEN.Tween( object.position ).to( {z: 200}, 500 ).easing( TWEEN.Easing.Quadratic.Out).start();
});
scene.add( object );

For whatever reason the CSS3DObject will not take a click event. Guidance please. :)

• javascript
• html
• css
• three.js

• Also for those of you new to TWEEN and Three JS make sure to have TWEEN.update() method in your animate/render function or else you won't see anything happen. – tonejac Commented Feb 3, 2014 at 20:34
• An alternative solution to this, if you're already using a blended WebGLRender'ed scene, is to create an object in said scene that has the same position/size/rotation as the CSS3DObject and link the two. – andrewb Commented May 10, 2016 at 5:55

2 Answers 2

Here is one way to handle a click event from a CSS3DObject, and get access to the element's parent object:

var object = new THREE.CSS3DObject( element );

element.parent = object;

object.element.onclick = function() { this.parent.position.y += 10; };

three.js r.65

Have you try with mousedown and mouseup event? See my sample:

var mouseDown = false,
    mouseX = 0,
    mouseY = 0;

function onMouseDown(evt) {
    evt.preventDefault();

    mouseDown = true;
    mouseX = evt.clientX;
    mouseY = evt.clientY;
}

function onMouseUp(evt) {
    evt.preventDefault();

    mouseDown = false;
}

function addMouseHandler(canvas) {
    canvas.addEventListener('mousedown', onMouseDown, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
}

$(document).ready(function () {
    var canvas= document.getElementById("canvas");

    addMouseHandler(canvas);

});