如何制作一个可点击的CSS3DObject [英] How to make a Clickable CSS3DObject

问题描述

我正在使用三个JS CSS3DRenderer-试图使CSS3DObject在单击时更新它的position.z.这是我的代码:

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 );

无论出于何种原因，CSS3DObject都不会发生click事件.请指导.:)

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

推荐答案

这是一种处理CSS3DObject中的click事件并获得对该元素的父对象的访问的方法:

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

three.js r.65

这篇关于如何制作一个可点击的CSS3DObject的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！