0
292
Visualizações¿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 Respostas
Responde à pergunta0
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
Relatório
Responde à pergunta