0
188
Visualizaçõesthree.js — gltf raycaster issue
I made some simples shapes in blender and I imported them on my scene. It works like a charm as you can see here :
I just want to get a console.log() as soon as I hover my shape. but nothing happen and I don't know why. It might be related to my gltf file because I tried with another and it worked.
I also created this codepen but it seems impossible to call gltf files on it : https://codepen.io/michaelgrc/pen/oNeMBGJ
Here's what's inside my request animation frame :
raycaster.setFromCamera(mouse, camera)
const intersects = this.raycaster.intersectObjects( myGltf, true);
for ( let i = 0; i < intersects.length; i ++ ) {
console.log("OKAY")
}
renderer.render(scene, camera)
And here's my gltf : https://michaelg.fr/gltf/forme1.glb
Do you think it's related to my file? If so, do you know what are the correct settings to export a gltf file from blender to three.js ? Thanks a lot
2 Respostas
Responde à pergunta0
The problem is this line:
const intersects = this.raycaster.intersectObjects( myGltf, true);
intersectObjects() expects an array as the first parameter. Try with intersectObject() instead. So:
const intersects = this.raycaster.intersectObject( myGltf );
Besides, the second parameter is true by default.
0
Your codepen has a few mistakes:
- You're never calling the
animate()loop, so your raycaster never gets fired. - You're using
this.raycaster, butthisdoesn't exist in your code, onlyraycaster.
Here's your demo with the fixes:
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three";
import { GLTFLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/GLTFLoader";
const scene = new THREE.Scene();
const W = window.innerWidth;
const H = window.innerHeight;
const aspectRatio = W/H;
const listOfObjects = [];
let myGltf;
const raycaster = new THREE.Raycaster()
const mouse = new THREE.Vector2(-2. -2)
window.addEventListener('mousemove', (event) =>
{
mouse.x = event.clientX / W * 2 - 1
mouse.y = - (event.clientY / H) * 2 + 1
})
const camera = new THREE.OrthographicCamera(-0.5 * aspectRatio, 0.5 * aspectRatio, 0.5, -0.5, -10, 10);
const renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize( W, H );
document.body.appendChild( renderer.domElement );
// test to see something
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(0.1, 0.2), new THREE.MeshNormalMaterial());
scene.add(mesh)
renderer.render(scene, camera)
function animate() {
requestAnimationFrame(animate)
raycaster.setFromCamera(mouse, camera)
const intersects = raycaster.intersectObjects( scene.children, true);
for ( let i = 0; i < intersects.length; i ++ ) {
console.log("OKAY")
}
renderer.render(scene, camera)
}
animate()
</script>