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

Question

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

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

Answer 1

除了 sprite 之外，如果您出于任何原因更喜欢使用 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 位置。您可以使用相机或控件执行此操作。由于我的样板文件仅通过控件输入改变世界，因此我使用了更改事件函数。

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

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

数组具有以下结构: [[div, object3d],[div, object3d],[div, object3d],[div, object3d]]

控件上的更改事件运行以下内容:

        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
                        });
                }
        }

编辑工作 fiddle :https://jsfiddle.net/dpe5r41g/