0
288
ViewsHow to render a three.js project?
I follow this three.js beginners tutorial and I'm stuck at part 2 because nothing is rendering on my web page. I read / watched other tutorials but I'm facing the same problem everytime.
I installed three.js with the npm install three --save command and the code is below.
<!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;
}
Something is definitely wrong, but what?
·
Juan Pablo Isaza
1 answers
Answer question0
First always run three.js project in a live server not just by clicking index.html second keep file structure same as shown in image. 
·
Juan Pablo Isaza
Report
Answer question