Question

我试图了解如何在3D场景中渲染网页以使用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/

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

1 个答案: