How to make a Clickable CSS3DObject

css, html, javascript, three.js

Solution

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

Problem

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. :)

Original source