How to decide rotation of a marker or pointer on a 3d .obj Object so that marker will look like it is pointing to some area of 3D object

I am looking something like this instead of globe imagine various other shapes of 3D object and marker coming outwards. Since my 3d object is not circle i cannot use the given code earth-pointer longitude latitude

On clicking a loaded .obj 3D model, there will a pointer rendered on a clicked position(raycaster is used). using three js geometry shapes i have created a pointer. that pointer will render on a clicked position. how to determine pointer’s rotation. (it should dynamically decide the rotation of the pointer)

Problem i am facing is :

using my code and in above picture if i determine common rotation

Circle 1. it is looking fine (front side of the tshirt or 3d object)
Circle 2: clicking on back side of tshrit pointers are rendering inside.
Circle 3: : Pointers are also going inside the tshirt.

here is the obj format of 3D model i have used
obj Tshirt

My Code:

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.rotateX(0.7);
            g2.rotateZ(0.9);
            g2.rotateY(1);
            this.scene.add(g2);
        }
    }
}

createPointer = () => {
    const material = new THREE.MeshPhongMaterial({ color: 'yellow' });
    const cone = new THREE.Mesh(new THREE.ConeBufferGeometry(config.radius, config.height, config.coneRadialSegment, config.coneHeightSegment, config.coneIsOpenEnded), material);
    cone.position.y = config.height * 0.5;
    cone.rotation.x = Math.PI;

    const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(config.sphereRadius, config.sphereWidthSegments, config.sphereHeightSegments), material);
    sphere.position.y = config.height * 0.95 + 0.2;
    return { cone, sphere }
}

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

How about new THREE.Points and Face Normal?
I’ll post some coding later.

1 Like

yes pls thankuuu

marker.position.copy(intersect.point);
marker.lookAt(intersect.point.clone().add(intersect.face.normal));

This worked for me.

1 Like

x3d_pin.html (120.9 KB)

OK, you have mouse and keyboard controls.
Mouse: hold down Crtl + click to add pin hold down Shift + click to remove pin.

Keyboard;
R to rotate camera
C to change pin color
P to add pin
U to remove pin
The keyboard controls are activated only if the mouse is hovering over canvas.

1 Like

wow great! thankuu :slight_smile: