CODEWITHSUNDEEP
javascriptthree.js
Michaël
Michaël

Reputation: 599

three.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 :

enter image description 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

Upvotes: 1

Views: 360

Answers (2)

M -
M -

Reputation: 28462

Your codepen has a few mistakes:

  • You're never calling the animate() loop, so your raycaster never gets fired.
  • You're using this.raycaster, but this doesn't exist in your code, only raycaster.

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>

Upvotes: 0

Mugen87
Mugen87

Reputation: 31026

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.

Upvotes: 1

Related Questions