在 3D 场景中创建网页的可点击 3D 渲染

Question

我正在尝试了解如何在 3d 场景 usign Three.js 中呈现网页，但我能找到的所有示例最终都呈现了您无法点击的内容。 我看过几年前的视频，显示渲染的页面是可点击的，但该代码不再有效。 这不再可能了吗？到目前为止，我得到的只是我需要创建一个 CSS3DObject 对象，但是任何尝试捕获它（或其子对象）上的点击事件都不会产生任何结果。

任何帮助/指导将不胜感激。

编辑：添加我尝试过的简单代码

 function createCssObject(w, h, position, rotation, url) {

var html = [

  '<div style="width:' + w + 'px; height:' + h + 'px;">',
  '<iframe src="' + url + '" width="' + w + '" height="' + h + '">',
  '</iframe>',
  '</div>'

].join('\n');

var div = document.createElement('div');

$(div).html(html);

var cssObject = new THREE.CSS3DObject(div);

cssObject.position.x = position.x;
cssObject.position.y = position.y;
cssObject.position.z = position.z;

cssObject.rotation.x = rotation.x;
cssObject.rotation.y = rotation.y;
cssObject.rotation.z = rotation.z;
cssObject.element.onclick = function() {
    console.log("element clicked!");
}

return cssObject;

更新 2：工作 jsfiddle https://jsfiddle.net/edkLLjcm/4/

Answer 1

如果您要在 OrbitControls 或 TrackballControls 中进行混音，您将不得不做一些巧妙的启用和​​禁用它们，以使您的网页变得可交互。 OrbitControls/TrackballControls 并没有办法知道某些事件是打算被你的 dom 元素吃掉的。

一种选择是根据键处理程序来切换它们，并使用一个键来切换鼠标光标的进出。将它们关闭后，您还需要确保您的应用程序本身没有占用相关事件，方法是确保您没有在处理程序中调用 event.preventDefault，并且您从处理程序你必须表明他们应该继续“冒泡”。我不记得确切的语义，要正确处理很麻烦，但你可以让它工作。

编辑：

我认为问题在于您将画布添加为 cssRenderers domElement 的子元素。

我改成：

document.body.appendChild(cssRenderer.domElement);
document.body.appendChild(glRenderer.domElement);
//cssRenderer.domElement.appendChild(glRenderer.domElement);

它似乎有效。

https://jsfiddle.net/edkLLjcm/8/