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

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

javascript - 将鼠标悬停在ThreeJS对象上,以使其位置与3D世界保持同步-LMLPHP

最佳答案

除了精灵外,如果您出于某种原因更喜欢使用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 div中管理3D对象和相应标签的多维数组。

数组具有以下结构:
[[div,object3d],[div,object3d],[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/

关于javascript - 将鼠标悬停在ThreeJS对象上,以使其位置与3D世界保持同步,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39996726/

10-08 21:59
查看更多