estaba siguiendo un tutorial y obtuve toda la escena trabajando en la etiqueta del cuerpo, luego intenté moverla dentro de un div, y ahora solo se renderizará la escena. No recibo ningún error y registré todo en la consola para asegurarme de que esté disponible para acceder. Pero no puedo ver por qué no se muestra nada.
// console.log ("Java Script is working!") // get div for 3D area const container = document.querySelector('#container') // console.log (container) var scene = new THREE.Scene() var camera = new THREE.PerspectiveCamera( 75, container.innerWidth / container.innerHeight, 0.1, 1000 ) camera.position.z = 3 var renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setClearColor('#0D1033') renderer.setSize(container.innerWidth, container.innerHeight) container.appendChild(renderer.domElement) container.addEventListener('resize', () => { renderer.setSize(container.innerWidth, container.innerHeight) camera.aspect = container.innerWidth / container.innerHeight camera.updateProjectionMatrix() }) var geometry = new THREE.BoxGeometry(10, 1, 1) var material = new THREE.MeshLambertMaterial({ color: 0x90e9f9, side: THREE.DoubleSide }) var mesh = new THREE.Mesh(geometry, material) scene.add(mesh) var light = new THREE.PointLight(0xffffff, 5, 500) light.position.set(10, 0, 25) scene.add(light) var render = function() { requestAnimationFrame(render) renderer.render(scene, camera) } console.log(mesh) console.log(camera) render() * { box-sizing: border-box; } body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; height: 100%; width: 100%; } #container { background-color: black; height: 100vh; } <!DOCTYPE html> <body> <div id="container"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script> <script src="main.js"></script> </body> </html>Estoy tratando de hacer que esto funcione primero, así que sé que puede funcionar antes de moverlo a mi proyecto principal, donde intento tener un espacio 3D dentro de un div en el sitio web, pero no ocupo la página completa.
Solo puede usar innerWidth y innerHeight en el objeto de window . Use clientWidth y clientHeight en su lugar:
const container = document.querySelector('#container') const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera( 75, container.clientWidth / container.clientHeight, 0.1, 1000 ) camera.position.z = 3 const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setClearColor('#0D1033') renderer.setSize(container.clientWidth, container.clientHeight) container.appendChild(renderer.domElement) container.addEventListener('resize', () => { renderer.setSize(container.clientWidth, container.clientHeight) camera.aspect = container.clientWidth / container.clientHeight camera.updateProjectionMatrix() }) const geometry = new THREE.BoxGeometry(10, 1, 1) const material = new THREE.MeshLambertMaterial({ color: 0x90e9f9, side: THREE.DoubleSide }) const mesh = new THREE.Mesh(geometry, material) scene.add(mesh) const light = new THREE.PointLight(0xffffff, 5, 500) light.position.set(10, 0, 25) scene.add(light) const render = function() { requestAnimationFrame(render) renderer.render(scene, camera) } render() * { box-sizing: border-box; } body { padding: 0; margin: 0; height: 100vh; } canvas { display: block; height: 100%; width: 100%; } #container { background-color: black; height: 100vh; } <script src="https://cdn.jsdelivr.net/npm/three@0.133.1/build/three.min.js"></script> <div id="container"> </div>