使用 DOMElements 的三个.js SphereGeometry 全景热点

Question

我使用SphereGeometry、PerspectiveCamera 和CanvasTexture 创建了一个简单的WebGL 3D 全景应用程序。现在，我希望通过在SphereGeometry 的某些部分添加“热点”来使场景栩栩如生。我遇到的问题是了解如何更新各种DOMElements，以便它们的位置反映更新后的Camera 位置。

基本上，随着Camera 的旋转，各种DOMElements 会相对于相机旋转的方向进出视野。我尝试使用返回的PerspectiveCamera camera.rotation 将<div> absolute 定位到<canvas> 和translating X 和Y 位置，但它并没有真正起作用；这是我的 JS 和 CSS 实现：

CSS

#TestHotSpot {
    /* not sure if using margins is the best method to position hotspot */
    margin-top: 50px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
}

JavaScript

/** 
   CONFIG is my stored object variable; it contains the PerspectiveCamera instance 
   code is being called inside of my RequestAnimationFrame
**/

config.camera.updateProjectionMatrix();
config.controls.update(delta);

document.getElementById("TestHotSpot").style.transform = "translate("+ config.camera.rotation.x +"px, "+ config.camera.rotation.y +"px)";

Here 也是所需效果的一个活生生的例子。

解决此问题的最佳解决方案是什么？当我运行它时我注意到DOMElements 只会轻微移动；我还注意到他们并没有真正考虑到它们被放置在SphereGeometry 的哪个位置（例如，被定位在Camera 的“后面”；真的很复杂！

我很乐意为THREE.js 引擎使用任何插件，并遵循任何教程。非常感谢您提前回复！

Answer 1

1. 尝试将平面网格/网格设置到所需的点。
2. 复制 css 元素（使用 three.js cssObject [如果您已经知道的话] 创建的 domElements）的位置以及 planemesh/mesh 的位置。

你就完了！！

Answer 2

好的，插话我自己的问题！我遇到了一些问题，但我已经想出了如何让 CSS3d 与 THREE.js WebGL 场景混合。

所以我要做的第一件事就是更新我的 THREE.js 库；我从之前的下载中运行 71，但我需要将其更新到 Mr.Doob 在 this 示例中使用的库。我还将我的 CSS3d 库更新为同一个示例中包含的文件。

然后我用这个方法（在链接中指定的相同）创建了一个演示场景。

var camera, scene, renderer;

var scene2, renderer2;

var controls;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 200, 200, 200 );

    controls = new THREE.TrackballControls( camera );

    scene = new THREE.Scene();
    scene2 = new THREE.Scene();

    var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );

            //

    for ( var i = 0; i < 10; i ++ ) {

        var element = document.createElement( 'div' );
            element.style.width = '100px';
            element.style.height = '100px';
            element.style.opacity = 0.5;
            element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();

        var object = new THREE.CSS3DObject( element );
            object.position.x = Math.random() * 200 - 100;
            object.position.y = Math.random() * 200 - 100;
            object.position.z = Math.random() * 200 - 100;
            object.rotation.x = Math.random();
            object.rotation.y = Math.random();
            object.rotation.z = Math.random();
            object.scale.x = Math.random() + 0.5;
            object.scale.y = Math.random() + 0.5;
        scene2.add( object );

        var geometry = new THREE.PlaneGeometry( 100, 100 );
        var mesh = new THREE.Mesh( geometry, material );
            mesh.position.copy( object.position );
            mesh.rotation.copy( object.rotation );
            mesh.scale.copy( object.scale );
        scene.add( mesh );

    }

            //

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    renderer2 = new THREE.CSS3DRenderer();
    renderer2.setSize( window.innerWidth, window.innerHeight );
    renderer2.domElement.style.position = 'absolute';
    renderer2.domElement.style.top = 0;
    document.body.appendChild( renderer2.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    controls.update();

    renderer.render( scene, camera );
    renderer2.render( scene2, camera );

}

在完成该工作后，我将 CSS3d scene、CSS3d object 和 CSS3d renderer 重新用于我的场景中。

祝其他人好运，希望这会有所帮助！