I'm working on a threejs project where I'm trying to load a GLTF file containing geometric shapes. I am writing a logic to get info, for now just the name, of the shapes that I click within the GLTF file. For now, I am just using console.log() to print the name of the shape I have clicked. I also want a side navigation bar to appear with the name of the component, I have a simple OpenNav() function for the navigation bar, as shown below. I now want to use the HTML header tag to display found[index].object.name (the component's name). I am kind of stuck here. How do I achieve this?
<div id = "mySidenav" class = "sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<h2>Hello world!</h2>
</div>
<script src = "three.js"></script>
<script type = "module" src = "index.js"></script>
<script>
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
click event function in index.js
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
}
window.addEventListener('click', event => {
// enables object selection
clickMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
clickMouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// enables different object selection
raycaster.setFromCamera( clickMouse, camera );
//checking mesh objects the ray are intersecting with
const found = raycaster.intersectObjects( scene.children );
// console.log(found);
// console.log(found[0]);
if(found.length > 0){
// console.log(found);
for (let index = 0; index < found.length; index++) {
if (found[index].object.name === "Cone") {
console.log(found[index].object.name);
openNav();
}
}
}
})
Ok i have it.
window.addEventListener('click', event => {
// enables object selection
clickMouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
clickMouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// enables different object selection
raycaster.setFromCamera( clickMouse, camera );
//checking mesh objects the ray are intersecting with
const found = raycaster.intersectObjects( scene.children );
// console.log(found);
// console.log(found[0]);
if(found.length > 0){
// console.log(found);
for (let index = 0; index < found.length; index++) {
if (found[index].object.name === "Cone") {
console.log(found[index].object.name);
openNav();
}
}
}
})function Listener(listener, mesh, callback) {
let objects = [mesh];
let raycaster = new THREE.Raycaster();
let mouse = { x: 0, y: 0 };
renderer.domElement.addEventListener(listener, raycast, false);
function raycast(e) {
mouse.x = (e.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(e.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
let intersects = raycaster.intersectObjects(objects, true);
let intersect = intersects[0];
if (typeof intersect !== "undefined") {
callback(e, intersect);
}
}
}
for (let i = 0; i < scene.children.length; i++) {
Listener('click', scene.children[i], (e, intersect) => {
let object = intersect.object;
if (object.name === 'Cone') {
openNav();
}
});
}
Be gentle i'm 13 :)