three js

Question 1

What is the npm command to add Three.js to your project?

Answer 1

Run

npm install three

Question 2

How do you import all core classes of Three.js using ES modules?

Answer 2

import * as THREE from 'three'

Question 3

How do you create a new scene in Three.js?

Answer 3

const scene = new THREE.Scene()

Question 4

What are the four essential elements needed to render a basic Three.js scene?

Answer 4

• a scene
• objects
• a camera
• a renderer.

Question 5

How do you create a red cube mesh in Three.js?

Answer 5

// Create geometry and material
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

// Combine to form a mesh and add to the scene
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

Question 6

How do you set up a PerspectiveCamera and position it to view the scene?

Answer 6

const sizes = { width: 800, height: 600 }
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3  // Move the camera backward
scene.add(camera)

Question 7

How do you initialize a WebGL renderer and attach it to a canvas in the HTML?

Answer 7

// Get the canvas element
const canvas = document.querySelector('canvas.webgl')

// Create the renderer and set its size
const renderer = new THREE.WebGLRenderer({ canvas: canvas })
renderer.setSize(sizes.width, sizes.height)

Question 8

How do you render the scene from the camera’s perspective?

Answer 8

Call the render method:

renderer.render(scene, camera)

Question 9

Why might the render show a black screen or only one side of the cube, and how can it be fixed?

Answer 9

The camera and object might be at the same position. Moving the camera back (e.g., setting camera.position.z = 3) ensures the object is visible.