0
295
Vistas¿Cómo renderizar un proyecto three.js?
Sigo este tutorial para principiantes de three.js y estoy atascado en la parte 2 porque no aparece nada en mi página web. Leí/vi otros tutoriales pero siempre me encuentro con el mismo problema.
Instalé three.js con el comando npm install three --save y el código está debajo.
<!DOCTYPE html> <html lang=”en”> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First three.js Project</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <script type="module" src="./js/app.js"></script> </body> </html> import * as THREE from '../node_modules/three/build/three.module.js'; import { TrackballControls } from '../node_modules/three/examples/jsm/controls/TrackballControls.js'; // Scene const scene = new THREE.Scene(); // Camera const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.6, 1200); camera.position.z = 5; // Renderer const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor("#233143"); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Make Canvas Responsive window.addEventListener('resize', () => { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); }) // Create Box const boxGeometry = new THREE.BoxGeometry(2, 2, 2); const boxMaterial = new THREE.MeshLambertMaterial({ color: 0xFFFFFF }); const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial); boxMesh.rotation.set(40, 0, 40); scene.add(boxMesh); const rendering = function () { requestAnimationFrame(rendering); // Constantly rotate box scene.rotation.z -= 0.005; scene.rotation.x -= 0.01; renderer.render(scene, camera); } rendering(); body { margin: 0px; height: 100vh; } canvas { display: block; }Definitivamente algo anda mal, pero ¿qué?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Primero, ejecute siempre el proyecto three.js en un servidor en vivo, no solo haciendo clic en index.html, segundo, mantenga la estructura del archivo como se muestra en la imagen. 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta