Javascript 使用DomeElement的THREE.js SphereGeometry全景热点

我已经使用

球面测量法

、

透视摄影机

和

CanvasTexture

创建了一个简单的WebGL 3D全景应用程序。现在，我希望通过在

球墨测量法的某些部分添加“热点”来使场景变得生动起来。我遇到的问题是理解如何更新各种
domeElements
，以便它们的位置反映更新后的
摄像机的位置

基本上，当
相机旋转时，各种
家庭元素将相对于相机旋转的方向移入和移出视野。我试着用返回的透视摄像机将一个
绝对的
定位到
位置，并
翻译
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)";

这也是理想效果的一个活生生的例子

解决此问题的最佳解决方案是什么？当我运行此命令时，我注意到
家庭元素
只会轻微移动；我还注意到，他们并没有真正考虑到他们在
球面测量法
中的位置（例如，被放置在
摄像机
的“后面”；非常复杂

我很乐意使用
THREE.js
引擎的任何插件，也愿意学习任何教程。非常感谢您提前回复

尝试将平面网格/网格设置为所需的点
复制css元素的位置（使用three.js cssObject创建的DoElement[如果您已经知道]）以及planemesh/mesh的位置
你会完成的！！
好的，问我自己的问题！我遇到了一些问题，但我已经找到了如何让CSS3d与三个.js WebGL场景混合在一起的方法

因此，我要做的第一件事就是更新我的THREE.js库；我运行的是早期下载的71，但我需要将它更新到Doob先生在示例中使用的库中。我还将我的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 );

}

var摄像机、场景、渲染器；
变量场景2，渲染器2；
风险值控制；
init（）；
制作动画（）；
函数init（）{
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（200200200200）；
控件=新的三个轨迹球控件（摄像头）；
场景=新的三个。场景（）；
scene2=新的三个场景（）；
var material=new THREE.MeshBasicMaterial（{color:0x000000，线框：true，线框线宽：1，side:THREE.DoubleSide}）；
//
对于（变量i=0；i<10；i++）{
var元素=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（元素）；
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；
场景2.添加（对象）；
var几何=新的三个平面几何（100100）；
var mesh=新的三个网格（几何体、材质）；
mesh.position.copy（object.position）；
mesh.rotation.copy（object.rotation）；
mesh.scale.copy（object.scale）；
场景。添加（网格）；
}
//
renderer=new THREE.WebGLRenderer（）；
renderer.setClearColor（0xF0）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
renderer2=新的三个.css3drender（）；
Renderr2.setSize（window.innerWidth、window.innerHeight）；
renderer2.DomeElement.style.position='absolute'；
renderer2.doElement.style.top=0；
document.body.appendChild（render2.doElement）；
}
函数animate（）{
请求动画帧（动画）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
渲染器2.渲染（场景2，摄影机）；
}

在完成这项工作后，我重新将
CSS3d场景
、
CSS3d对象
和
CSS3d渲染器
包含在场景中

祝其他人好运，希望这会有所帮助！
Hi@Severy_s，非常感谢你的回复！我试图找到一些关于如何使用
cssObject
的文档，但结果是空手而归。你有没有一个代码片段示例来解释如何使用它？我仍然有点困惑-抱歉！你好！在做了更多的研究之后，我再次感谢你现在了解你的答案-谢谢你的帮助！投票赞成。如果你不介意的话，请分享你的研究，你做了什么，你还发现了什么，你有一些好的链接，也许可以让我了解整个过程。谢谢你提供的任何相关信息。嗨@lindsay谢谢你的帮助他投了赞成票。我没有注意到你的评论，因为我仍然是StackOverflow中的一个noob。我也在尝试添加带有其他全景图链接的热点。你介意分享更多你是如何做到这一点的吗？也许你可以制作一个JSFIDLE吗？我是一个残忍的3JS初学者，并发布了这篇文章，我仍然在寻找好的示例或教程请帮助我更好地理解整件事。我将永远乐意自己理解并编写代码。如果可以的话