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