将DIV悬停在ThreeJS对象上，保持其位置与3D世界同步

Question

如何将DIV放置在3D物体上方的2D空间中，以便当世界旋转时，DIV也随之移动。

注意: 3D对象是从模型中加载的，所以组内有组，然后是网格。

​

​

Answer 1

除了雪碧之外，如果您喜欢使用div，那么您也可以进行屏幕翻译。

如果obj是一个object3d，而渲染器、摄像机是定义和可用的，则函数中的x和y值可以传递给CSS：

function getScreenTranslation (obj) {

    var vector = new THREE.Vector3();
    var widthHalf = 0.5 * renderer.context.canvas.width;
    var heightHalf = 0.5 * renderer.context.canvas.height;

    var bbox = new THREE.BoundingBoxHelper(obj, 0xFFFFFF);

    bbox.update();

            bbox.updateMatrixWorld();
            bbox.updateMatrix();

    vector.setFromMatrixPosition(bbox.matrixWorld);
    vector.project(camera);
    vector.x = vector.x * widthHalf + widthHalf;
    vector.y = -(vector.y * heightHalf) + heightHalf;
    return {
            x: vector.x,
            y: vector.y
    };

}；

根据您的设置，当场景发生变化和对象移动时，您将需要更新div位置。您可以使用相机或控件来完成此操作。由于我的样板只使用控件输入来改变世界，所以我使用了一个change函数。

this.controls.addEventListener('change', my_change_event_function);

这里很难做一个例子，因为很难知道您管理的是什么div。但是，例如，我在jquery中管理一个3d对象的多维数组和相应的标签。

数组具有如下结构：[div，object3d，div，object3d]

控件上的change事件运行如下：

        if (labels !== undefined) {
                for (var i = 0; i < labels.length; i++) {
                        var position = getScreenTranslation(labels[i][1]);
                        labels[i][0].css({
                                left: position.x,
                                top: position.y
                        });
                }
        }

编辑工作小提琴：https://jsfiddle.net/dpe5r41g/