My First Three.js Project

github: https://github.com/iris1114/threejs

demo: https://first-threejs-project.netlify.app/

1. Scene

The scene is a container for all objects, models, particles, lights, etc.

const scene = new THREE.Scene()

2. Objects

Mesh: Combines geometry and material to form a visible object.

Example: Create a green cube

• Geometry: Use BoxGeometry to specify size (parameters are width, height, and depth).
• Material: Use MeshBasicMaterial and set the color property.
• Combine and add to the scene.

const geometry = new THREE.BoxGeometry(1, 1, 1) // Create geometry
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
}) // Green and wireframe
const mesh = new THREE.Mesh(geometry, material) // Create mesh
scene.add(mesh) // Add to scene

3. Camera

The camera represents the observer's perspective. Use PerspectiveCamera to simulate perspective effects (close is big, far is small).

Key parameters:

• fov: Field of View, expressed in degrees (e.g., 75).
• aspect: Aspect Ratio, usually the width/height of the canvas.

Adjust position: To view objects, move the camera back along the z-axis.

const sizes = { width: 800, height: 600 } // Canvas size
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3 // Move camera back
scene.add(camera) // Add camera to scene

4. Renderer

The renderer's role is to render the scene from the camera's perspective onto the canvas.

Setup:

• Create a <canvas> element in HTML, e.g., <canvas class="webgl"></canvas>.
• Use WebGLRenderer to connect the canvas with the renderer and set the canvas size.

const canvas = document.querySelector('canvas.webgl') // Select canvas
const renderer = new THREE.WebGLRenderer({ canvas: canvas }) // Create renderer
renderer.setSize(sizes.width, sizes.height) // Set canvas size

5. First Render

Use the renderer.render method to pass the scene and camera:

renderer.render(scene, camera)

Note: If the camera and object positions overlap or are set incorrectly, the object may not be visible, and their positions need to be adjusted.

Summary Code

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  wireframe: true,
})
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
  width: 800,
  height: 600,
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({ canvas: canvas })
renderer.setSize(sizes.width, sizes.height)

// Render
renderer.render(scene, camera)

Others

• The default position of objects and the camera is the center of the scene (0, 0, 0).
• You can manipulate objects and the camera using position, rotation, and scale properties. Refer to this note.
• The canvas size is adjustable, and you can use the renderer's setSize to adjust it.