如何决定标记或指针在 3d .obj 对象上的旋转，以便标记看起来像是指向 3D 对象的某个区域

Question

我看起来像这样 (https://jsfiddle.net/xg1o4ekr/378/) 而不是地球，想象各种其他形状的 3D 对象和标记向外出现。由于我的 3d 对象不是圆形，我不能使用上面给出的代码 单击加载的 .obj 3D 模型时，将在单击位置上呈现一个指针（使用 raycaster）。使用三个 js 几何形状，我创建了一个指针。该指针将呈现在单击的位置。如何确定指针的旋转。 （它应该动态决定指针的旋转）

onMouseClick = (event) => {
    event.preventDefault();

    // calculate objects intersecting the picking ray
    var intersects = this.getIntersects(event.layerX, event.layerY);
    if (intersects.length > 0) {
        var res = intersects.filter(function (res) {
            return res && res.object;
        })[0];
        if (res && res.object) {
            this.selectedObject = res.object;
            console.log(res);
            const Pointer = this.createPointer();
            var g2 = new THREE.Group();
            g2.add(Pointer.cone);
            g2.add(Pointer.sphere);
            g2.position.set(res.point.x, res.point.y, res.point.z);
            //g2.rotation.set(res.point.x, res.point.y, res.point.z); //not working fine

            g2.rotateX(0.7);
            g2.rotateZ(0.9);
            g2.rotateY(1);// not working fine
            this.scene.add(g2);
        }
    }
}

getIntersects = (x, y) => {
    x = (x / this.width) * 2 - 1;
    y = - (y / this.height) * 2 + 1;
    this.mouseVector.set(x, y);
    this.raycaster.setFromCamera(this.mouseVector, this.camera);
    return this.raycaster.intersectObject(this.group, true);
}

Answer 1

有趣的问题。这里已经很晚了，所以我无法尝试代码，但这可能有帮助吗？

你点击的对象有法线吗？ 您可以在 intersets[0].face.normal（或 .vertexNormals）中找到它。 您可以将指针与它对齐..

var normal = intersects[0].face.normal:
var axis = new THREE.Vector3(0, 1, 0); //(or maybe -1? i'm not sure, play around)
g2.quaternion.setFromUnitVectors(axis, normal);

如果您想将指针设置在距表面一定距离处；

var distance = 4;
g2.position.add( normal.multiplyScalar(distance) );

另外，与其每次都创建一个指针，不如只创建一次然后做pointer.clone()？