ThreeJS Journey Notes

Random stuff from Bruno Simon's course, ThreeJS Journey

06 — Animations

Animations in Three.js work like stop motion — each time an object moves, you render the changes. Take a look at a few ways you can animate a yellow box below:

1 / 7

A yellow box, black background, no animation.

Click Next or the section dropdown above to view different ways of animating the box.

07 — Cameras

A camera is, as you can imagine, what you use to see the scene in Three.js.

1 / 6

Three.js has several different cameras that create different visual representations of a scene.

Click Next to begin viewing and understanding a few of them.

28 — Shaders

import styles from "./styles.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
};

const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.set(0.25, -0.25, 1);

const geometry = new THREE.PlaneGeometry(1, 1, 32, 32);
const material = new THREE.RawShaderMaterial({
  vertexShader: `uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;

attribute vec3 position;

void main() {
  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
  vec4 viewPosition = viewMatrix * modelPosition;
  vec4 projectionPosition = projectionMatrix * viewPosition;
  
  gl_Position = projectionPosition;
}`,
  fragmentShader: `precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
`
})
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const orbit = new OrbitControls(camera, renderer.domElement);
orbit.enableDamping = true;

orbit.update();

window.addEventListener("resize", function () {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  orbit.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

Open Sandbox

29 — Shader patterns

varying vec2 vUv;

void main() {
  // Pattern 0
  gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}

Open Sandbox

If you liked this and would like to hear when new content is published, please subscribe below.

If you have any feedback, found bugs, or just want to reach out, feel free to DM me on Twitter or send me an email.

Subscribe to Newt Interactive

You'll only get emails when I publish new content. No spam, unsubscribe any time.