如何制作可点击的 CSS3DObject答案

【问题标题】：How to make a Clickable CSS3DObject如何制作可点击的 CSS3DObject
【发布时间】：2014-02-27 04:45:07
【问题描述】：

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

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 都不会接受点击事件。请指导。 :)

【问题讨论】：

另外，对于那些刚接触 TWEEN 和 3 JS 的人，请确保在动画/渲染函数中包含 TWEEN.update() 方法，否则您将看不到任何事情发生。
如果您已经在使用混合的 WebGLRender 场景，则另一种解决方案是在所述场景中创建一个与 CSS3DObject 具有相同位置/大小/旋转的对象，并将二。

标签： javascript html css three.js

【解决方案1】：

这是处理来自 CSS3DObject 的点击事件并访问元素的父对象的一种方法：

var object = new THREE.CSS3DObject( element );

element.parent = object;

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

three.js r.65

【讨论】：

【解决方案2】：

您是否尝试过 mousedown 和 mouseup 事件？查看我的示例：

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

});

【讨论】：

如果我将侦听器添加到文档而不是 CSS3DObject()，那么我可以获得 dom 元素的 event.target。但我想把它限制在 CSS3DObject() 中，这样我就可以轻松地利用 .position.z 属性。