0
197
Visualizaçõesthree.js — problema con gltf raycaster
Hice algunas formas simples en blender y las importé a mi escena. Funciona a las mil maravillas como se puede ver aquí:
Solo quiero obtener un archivo console.log() tan pronto como pase mi forma. pero no pasa nada y no sé por qué. Podría estar relacionado con mi archivo gltf porque probé con otro y funcionó.
También creé este codepen, pero parece imposible llamar a los archivos gltf: https://codepen.io/michaelgrc/pen/oNeMBGJ
Esto es lo que hay dentro de mi marco de animación de solicitud:
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)Y aquí está mi gltf: https://michaelg.fr/gltf/forme1.glb
¿Crees que está relacionado con mi archivo? Si es así, ¿sabe cuáles son las configuraciones correctas para exportar un archivo gltf de blender a three.js? Muchas gracias
2 Respostas
Responde à pergunta0
El problema es esta línea:
const interseca = this.raycaster.intersectObjects( myGltf, true);
intersectObjects() espera una matriz como primer parámetro. Pruebe con intersectObject() en su lugar. Asi que:
const interseca = this.raycaster.intersectObject( myGltf );
Además, el segundo parámetro es true por defecto.
0
Su codepen tiene algunos errores:
- Nunca estás llamando al bucle
animate(), por lo que tu raycaster nunca se dispara. - Está utilizando
this.raycaster, perothisno existe en su código, soloraycaster.
Aquí está su demostración con las correcciones:
<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>