Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

192
Vistas
Cargando múltiples archivos gltf en Three.js que deberían convertirse en hipervínculos

js conociendo gente, a continuación puedes ver mi primer código de JavaScript. Me gustaría construir un sitio web con cuatro modelos gltf giratorios diferentes. Cada uno de ellos debe ser un hipervínculo. Hasta ahora, de alguna manera logré cargar dos de ellos y dejarlos rotar en el servidor en vivo. Pero estoy atascado con este error 'Error de tipo no detectado (en promesa): el pato no está definido'. ¿Como puedó resolver esté problema? ¿Y cómo puedo crear los enlaces? Estoy muy agradecido por tu ayuda.

 // variables for setup let container; let camera; let renderer; let scene; let box; let duck; let controls; function init(){ container = document.querySelector('.scene'); //create scene scene = new THREE.Scene(); const fov = 10; const aspect = container.clientWidth / container.clientHeight; const near = 0.1; const far = 900; // camera setup camera = new THREE.PerspectiveCamera(fov, aspect, near, far); camera.position.set(0, 30, 1); const ambient = new THREE.AmbientLight(0x404040, 3); scene.add(ambient); const light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.set(10,10,30); scene.add(light); //renderer renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(container.clientWidth, container.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); container.appendChild(renderer.domElement); controls = new THREE.OrbitControls (camera, renderer.domElement); //load model let loader = new THREE.GLTFLoader(); loader.load('./3d/duck.gltf', function(gltf){ scene.add(gltf.scene); duck = gltf.scene.children[0]; duck.position.set(0,0,0); animate(); }) loader.load('./3d/cube.gltf', function(gltf){ scene.add(gltf.scene); box = gltf.scene.children[0]; box.position.set(-2,0,0); animate(); }) } function animate(){ controls.update(); duck.rotation.x += 0.01 box.rotation.y += 0.01 requestAnimationFrame(animate); renderer.render(scene, camera); } init(); function onWindowResize () { camera.aspect = container.clientWidth / container.clientHeight; camera.updateProjectionMatrix(); renderer.setSize(container.clientWidth, container.clientHeight); } window.addEventListener('resize', onWindowResize);
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

El error ocurre en duck.rotation.x += 0.01 . Como la función loader.load es asíncrona, la línea duck = gltf.scene.children[0]; no se llama antes de la primera ejecución de animate() . En consecuencia, la variable de duck no está definida. Podrías evitarlo con

 if(duck) { duck.rotation.x += 0.01 }

En cuanto al hipervínculo:
No existe el concepto de enlaces en la escena three.js.
Las etiquetas de anclaje solo están disponibles en el DOM y no es un elemento estándar disponible en WebGL.
Deberá escribir un código para manejar los eventos del mouse, hacer clic y abrir la URL correspondiente.
El proceso es el siguiente:

  • Escuche los eventos de movimiento del mouse y cambie el cursor si se puede hacer clic en el elemento que se está desplazando
  • Escuche el clic del mouse y navegue hasta el enlace correspondiente al elemento en el que se hizo clic
  • Ambos requieren proyectar un rayo desde el puntero del mouse y verificar las intersecciones con la malla.

La documentación de three.js es bastante clara sobre el raycaster y las intersecciones con la malla https://threejs.org/docs/#api/en/core/Raycaster

Manifestación:
https://codepen.io/cdeep/pen/JjyjEdV

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda