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);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:
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