I am a software engineering student and i am developing a simple game. I want to add a feature where when i click on a door a floating tip pops up with the name of the rooom that it gives access to. My problem is that i am not being able to make the name of the room show correctly. I have an array with all the door Objects for the map.
const doorObjects=[];
console.log("LOG 1:");
for(let obj of intersectObjects){
doorObjects.push(obj.doorObject)
console.log(obj.doorData)
}
Here is my Raycaster config :
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(normalizedPointer, this.activeViewCamera.object);
After many tries and many fails i cleaned up some code to show here and decided to publish the results of what is giving me problems using logs.
MouseOver(event) {
console.log("LOG 0");
console.log(this.doors)
const pointer = {
x: event.clientX,
y: event.clientY
};
const normalizedPointer = {
x: (pointer.x / window.innerWidth) * 2 - 1,
y: -(pointer.y / window.innerHeight) * 2 + 1
};
if (this.activeViewCamera) {
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(normalizedPointer, this.activeViewCamera.object);
if (this.doors && this.doors.length > 0) {
const intersectObjects = this.doors
.filter(door => door && door.object)
.map(door => {
return {
doorObject: door.object,
doorData: door
};
});
const doorObjects=[];
console.log("LOG 1:");
for(let obj of intersectObjects){
doorObjects.push(obj.doorObject)
console.log(obj.doorData)
}
console.log("LOG 2");
for(let obj of intersectObjects){
console.log(obj.doorObject.uuid)
}
const intersects = raycaster.intersectObjects(doorObjects);
if (intersects.length > 0) {
console.log('Clicked on door');
const intersectedObject =intersects[0];
if (intersects[0].point) {
console.log('Intersected Door:', intersectedObject);
// Removendo instância anterior de FloatingText, se existir
this.removePreviousFloatingText();
const door = intersectObjects[0];
console.log(door.doorData.doorName);
const floatingTip = new FloatingText(door.doorData.doorName);
floatingTip.position.copy(intersects[0].point);
floatingTip.position.y=2.5;
this.scene3D.add(floatingTip);
// Armazenando a nova instância de FloatingText para referência futura
this.currentFloatingText = floatingTip;
}
}
}
}
}
Basicaly the first log its all good, the data is fine. In the second log i print the doors uuid's to check if the Raycaster catches either of them. When i print the Intersected Door the uuid is not the same as any of the ones printed before, therefore i cannot give the correct value to the text. The inicialization of the floatingText shown here is just a placeholder i left from previous failed atempts. These are my logs:
> LOG 1:
thumb_raiser.js:716 Door {doorName: 'A201', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}animations: (6) [AnimationClip, AnimationClip, AnimationClip, AnimationClip, AnimationClip, AnimationClip]animationsDoor: AnimationsDoor {states: Array(6), mixer: AnimationMixer, actionInProgress: false, actions: {…}, activeName: 'Close'}direction: 1.5707963267948966doorDirection: 0doorName: "A201"keyCodes: {open: 'KeyQ', close: 'KeyA'}keyStates: {open: false, close: false}loaded: trueobject: Group {isObject3D: true, uuid: '49f2d8ad-f897-4dfa-ba80-a50ad7e1211b', name: 'Scene', type: 'Group', parent: Scene, …}onError: ƒ (url, error)onLoad: ƒ (description)onProgress: ƒ (url, xhr)position: Vector3 {x: -7, y: 0, z: 0.5}scale: Vector3 {x: 0.35, y: 0.3, z: 0.2}url: "./app/visualization/assets/models/gltf/door/door.glb"[[Prototype]]: Object
thumb_raiser.js:716 Door {doorName: 'A202', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}animations: (6) [AnimationClip, AnimationClip, AnimationClip, AnimationClip, AnimationClip, AnimationClip]animationsDoor: AnimationsDoor {states: Array(6), mixer: AnimationMixer, actionInProgress: false, actions: {…}, activeName: 'Close'}direction: 0doorDirection: 0doorName: "A202"keyCodes: {open: 'KeyQ', close: 'KeyA'}keyStates: {open: false, close: false}loaded: trueobject: Group {isObject3D: true, uuid: '4dd07401-1345-457f-b8d7-13c243e7101f', name: 'Scene', type: 'Group', parent: Scene, …}onError: ƒ (url, error)onLoad: ƒ (description)onProgress: ƒ (url, xhr)position: Vector3 {x: -3.5, y: 0, z: 2}scale: Vector3 {x: 0.35, y: 0.3, z: 0.2}url: "./app/visualization/assets/models/gltf/door/door.glb"[[Prototype]]: Object
thumb_raiser.js:716 Door {doorName: 'A203', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A204', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A205', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A206', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A207', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A207A', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:716 Door {doorName: 'A209', url: './app/visualization/assets/models/gltf/door/door.glb', onLoad: ƒ, onProgress: ƒ, onError: ƒ, …}
thumb_raiser.js:718 LOG 2
thumb_raiser.js:720 49f2d8ad-f897-4dfa-ba80-a50ad7e1211b
thumb_raiser.js:720 4dd07401-1345-457f-b8d7-13c243e7101f
thumb_raiser.js:720 88519347-0f68-4e3a-88a5-0b9985a2e9e1
thumb_raiser.js:720 850d9229-f449-47e6-bbc3-ad52afa3af63
thumb_raiser.js:720 a965d4b6-810c-4630-9516-25ccd29a9e95
thumb_raiser.js:720 e5e97c8a-2330-4996-85dd-239f9f989f46
thumb_raiser.js:720 27b6874a-4ab6-4bc0-9505-0f61acda46f7
thumb_raiser.js:720 5d2de65a-f15a-49f5-b2d3-e8365802a9ef
thumb_raiser.js:720 28f3d206-1710-4239-b37f-a985342a9ca6
Intersected Door log:
{distance: 13.796226209011767, point: Vector3, object: Mesh, normal: Vector3, face: {…}, …}distance: 13.796226209011767face: {a: 548, b: 550, c: 552, normal: Vector3, materialIndex: 0}faceIndex: 1052normal: Vector3x: 0.022743974183307245y: -0.9983409562405192z: 0.05279468414005672[[Prototype]]: Objectobject: Meshanimations: Array(0)length: 0[[Prototype]]: Array(0)castShadow: truechildren: []length: 0[[Prototype]]: Array(0)frustumCulled: truegeometry: BufferGeometry {isBufferGeometry: true, uuid: 'c45fa2fe-d8bf-4bc7-8928-087cea6f074e', name: '', type: 'BufferGeometry', index: BufferAttribute, …}isMesh: trueisObject3D: truelayers: Layers {mask: 1}material: MeshStandardMaterial {isMaterial: true, uuid: '87fd3ee8-5344-48ed-ae0f-fef2efb9fce7', name: 'MAT_Handle', type: 'MeshStandardMaterial', blending: 1, …}alphaHash: falsealphaMap: nullalphaToCoverage: falseaoMap: nullaoMapIntensity: 1blendAlpha: 0blendColor: Color {isColor: true, r: 0, g: 0, b: 0}blendDst: 205blendDstAlpha: nullblendEquation: 100blendEquationAlpha: nullblendSrc: 204blendSrcAlpha: nullblending: 1bumpMap: nullbumpScale: 1clipIntersection: falseclipShadows: falseclippingPlanes: nullcolor: Color {isColor: true, r: 0.26188918948173523, g: 0.26188918948173523, b: 0.26188918948173523}colorWrite: truedefines: {STANDARD: ''}depthFunc: 3depthTest: truedepthWrite: truedisplacementBias: 0displacementMap: nulldisplacementScale: 1dithering: falseemissive: Color {isColor: true, r: 0, g: 0, b: 0}emissiveIntensity: 1emissiveMap: nullenvMap: nullenvMapIntensity: 1flatShading: falsefog: trueforceSinglePass: falseisMaterial: trueisMeshStandardMaterial: truelightMap: nulllightMapIntensity: 1map: nullmetalness: 1metalnessMap: nullname: "MAT_Handle"normalMap: nullnormalMapType: 0normalScale: Vector2 {x: 1, y: -1}opacity: 1polygonOffset: falsepolygonOffsetFactor: 0polygonOffsetUnits: 0precision: nullpremultipliedAlpha: falseroughness: 0.23342224955558777roughnessMap: nullshadowSide: nullside: 2stencilFail: 7680stencilFunc: 519stencilFuncMask: 255stencilRef: 0stencilWrite: falsestencilWriteMask: 255stencilZFail: 7680stencilZPass: 7680toneMapped: truetransparent: falsetype: "MeshStandardMaterial"userData: {}uuid: "87fd3ee8-5344-48ed-ae0f-fef2efb9fce7"version: 0vertexColors: falsevisible: truewireframe: falsewireframeLinecap: "round"wireframeLinejoin: "round"wireframeLinewidth: 1_alphaTest: 0_listeners: {dispose: Array(1)}id: 696alphaTest: (...)[[Prototype]]: Materialmatrix: Matrix4 {elements: Array(16)}matrixAutoUpdate: truematrixWorld: Matrix4 {elements: Array(16)}matrixWorldAutoUpdate: truematrixWorldNeedsUpdate: falsename: "Handle_Back_MAT_Handle_0"parent: Object3D {isObject3D: true, uuid: '4fdd964a-7ed4-470b-b78b-16bdf3cbdc4c', name: 'Handle_Back', type: 'Object3D', parent: Object3D, …}position: Vector3 {x: 0, y: 0, z: 0}quaternion: Quaternion {isQuaternion: true, _x: 0, _y: 0, _z: 0, _w: 1, …}receiveShadow: falserenderOrder: 0rotation: Euler {isEuler: true, _x: 0, _y: 0, _z: 0, _order: 'XYZ', …}scale: Vector3 {x: 1, y: 1, z: 1}type: "Mesh"up: Vector3 {x: 0, y: 1, z: 0}userData: {name: 'Handle_Back_MAT_Handle_0'}name: "Handle_Back_MAT_Handle_0"[[Prototype]]: Objectuuid: "91bc4f99-2d39-4dea-af12-f504834d312f"visible: trueid: 930modelViewMatrix: Matrix4 {elements: Array(16)}normalMatrix: Matrix3 {elements: Array(9)}[[Prototype]]: Object3Dconstructor: class Meshcopy: ƒ copy(source, recursive)getVertexPosition: ƒ getVertexPosition(index, target)raycast: ƒ raycast(raycaster, intersects)updateMorphTargets: ƒ updateMorphTargets()_computeIntersections: ƒ _computeIntersections(raycaster, intersects, rayLocalSpace)[[Prototype]]: EventDispatcherpoint: Vector3 {x: -0.08561339012164546, y: 1.0185910215622425, z: 2.009849786704623}x: -0.08561339012164546y: 1.0185910215622425z: 2.009849786704623[[Prototype]]: Object[[Prototype]]: Object
I have been stuck here for a very long time now i would love some help.