0
107
VistasTres js no encuentran imágenes
Creé una aplicación Vue Cli y estoy tratando de usar Three.js para representar objetos 3D allí.
El problema ocurre cuando trato de cargar una imagen para usarla como textura.
let scene = new Three.Scene(); const spaceTexture = new Three.TextureLoader().load( "@/assets/images/space-background.jpg" ); scene.background = spaceTexture;Y donde me sorprende que no sea un problema de importación o imagen porque normalmente puedo agregarlo al DOM:
<template> <div id="container"></div> <img src="@/assets/images/space-background.jpg" /> </template> 
No se que hacer, he cambiado a diversos tipos de camino y nada. No se que hacer.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Creo que deberías usar la palabra clave require en tu método de load :
<template> <div>Hey</div> </template> <script setup> import * as THREE from "three"; const scene = new THREE.Scene(); const spaceTexture = new THREE.TextureLoader().load( require("@/assets/img/space.jpeg") ); scene.background = spaceTexture; const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script>Estas líneas hacen el truco
const spaceTexture = new THREE.TextureLoader().load( require("@/assets/img/space.jpeg") );
·
Juan Pablo Isaza
Denunciar
Responde la pregunta