Vanilla Three.js Course

0% completed

100%

Chapter 01

Getting started

Meet Adrian, Your Instructor
Get the Most Out of This Course
Access to a Private 24/7 Community
Environment Setup

Chapter 02

Introduction to 3D and Three.js

What is Three.js and Why Use It?
Setting Up Three.js — Your First Step into 3D Web
Basic Three.js Structure
Cameras
OrbitControls

Chapter 03

Transformations

Transformations
Position
Rotation
Scale.

Chapter 04

Meshes and Geometries

An Introduction to Meshes
Geometries
BoxGeometry
SphereGeometry
TorusGeometry
PlaneGeometry
Custom Geometry

Chapter 05

GUI (Graphical User Interface)

GUI (Graphical User Interface)
lil-gui library
Range (Slider)
Color Picker
Checkbox Controls
Folders
Dropdown (Select)

Chapter 06

Lights

Introduction to Lights
AmbientLight
DirectionalLight
PointLight
SpotLight
RectAreaLight
HemisphereLight
Final Lesson of Light

Chapter 07

Materials

Introduction to Materials
MeshBasicMaterial
MeshStandardMaterial
MeshPhysicalMaterial
MeshMatcapMaterial
MeshPhongMaterial
MeshToonMaterial

Chapter 08

Textures

Textures
Color/Albedo Map
Normal Map
Roughness Map/Gloss Map
Displacement Map
Metalness Map
Emissive Map
Specular Map
Mask Map
Environment Map

Chapter 09

Models

Let’s Talk About 3D Models
Add First Model
Change colors
🎛️ Adding GUI Controls for Each Mesh
Playing Model Animations
OBJLoader
Loading .obj + .mtl Models
FBXLoader
Loading FBX Models

Chapter 10

Animations

Basic Animation
GSAP & Three.js
Advanced Camera Animation with GSAP

Course

Dropdown (Select)

Welcome Back! In the previous lessons, we explored sliders, color pickers, checkboxes, and folders in

Now, let’s move on to another essential GUI feature—Dropdown (Select) Controls! ⬇️🎛️ Dropdowns allow users to select a value from a predefined list. This is useful for:

Switching between different materials.
Choosing a shape (cube, sphere, cylinder, etc.).
Selecting a texture or shading mode.
Toggling animation modes (linear, bounce, ease-in, ease-out).

By the end of this lesson, you’ll know how to add dropdown menus in and use them to switch between different object properties dynamically! 🚀

A dropdown (select) control allows users to choose from a list of predefined options.

In , we use:

gui.add(object, "property", [option1, option2, option3]);

Parameters:

object → The object containing the property to modify.
property → The property to update when an option is selected.
options (array or object) → A list of possible values.

Let’s create a dropdown to switch between different geometries (cube, sphere, cylinder).

Step 1: Define Available Shapes

const shapeOptions = { Cube: "cube", Sphere: "sphere", Cylinder: "cylinder" };

Step 2: Store the Selected Shape

const settings = { shape: "cube" };

Step 3: Add the Dropdown to the GUI

gui.add(settings, "shape", shapeOptions).onChange((value) => {
  scene.remove(cube); // Remove previous shape

  let geometry;
  if (value === "cube") geometry = new THREE.BoxGeometry();
  if (value === "sphere") geometry = new THREE.SphereGeometry(0.7, 32, 32);
  if (value === "cylinder") geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);

  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
});

✅ Now, selecting an option from the dropdown menu will replace the existing object with a new shape dynamically! 🔄

Let’s allow users to select different animation types.

Step 1: Define Animation Types

const animationOptions = {
  None: "none",
  Rotate: "rotate",
  Bounce: "bounce",
};
```js

#### Step 2: Store the Selected Animation
```js
const settings = { animation: "none" };

Step 3: Add the Dropdown to the GUI

gui.add(settings, "animation", animationOptions);

Step 4: Update the Animation in the Loop

function animate() {
  requestAnimationFrame(animate);

  if (settings.animation === "rotate") {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
  }

  if (settings.animation === "bounce") {
    cube.position.y = Math.sin(Date.now() * 0.002) * 2;
  }

  renderer.render(scene, camera);
}

animate();

✅ Now, selecting an animation type will apply a different movement style to the object! 🔄🔁

To keep the GUI panel clean, we can group dropdown menus inside a folder.

const dropdownFolder = gui.addFolder("Dropdown Controls");

dropdownFolder.add(settings, "shape", shapeOptions).onChange((value) => {
  scene.remove(cube);

  let geometry;
  if (value === "cube") geometry = new THREE.BoxGeometry();
  if (value === "sphere") geometry = new THREE.SphereGeometry(0.7, 32, 32);
  if (value === "cylinder") geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32);

  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
});

dropdownFolder.add(settings, "material", materialOptions).onChange((value) => {
  let newMaterial;

  if (value === "basic") newMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  if (value === "lambert") newMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  if (value === "phong") newMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });

  cube.material = newMaterial;
});

dropdownFolder.add(settings, "animation", animationOptions);

✅ Now, the Dropdown Controls folder will contain Shape, Material, and Animation selections! 📂🔽

In the next lesson, we’ll explore Buttons in , allowing users to trigger actions like resetting values or generating random colors! 🔘🚀

How did you manage to remove the blur property and reach here?

A

I used sheer determination and problem-solving skills.

B

I inspected the code, found the blur effect, and disabled it.

C

I randomly clicked buttons until something worked.

D

I have no idea, but I made it!

Test Your Knowledge, Level Up

Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.

Upgrade your account

0 Comments

"Please login to view comments"

Join the Conversation!

Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.

Upgrade your account

gui.add(settings, "shape", shapeOptions).onChange((value) => { scene.remove(cube); // Remove previous shape let geometry; if (value === "cube") geometry = new THREE.BoxGeometry(); if (value === "sphere") geometry = new THREE.SphereGeometry(0.7, 32, 32); if (value === "cylinder") geometry = new THREE.CylinderGeometry(0.5, 0.5, 1, 32); cube = new THREE.Mesh(geometry, material); scene.add(cube); });

function animate() { requestAnimationFrame(animate); if (settings.animation === "rotate") { cube.rotation.x += 0.01; cube.rotation.y += 0.01; } if (settings.animation === "bounce") { cube.position.y = Math.sin(Date.now() * 0.002) * 2; } renderer.render(scene, camera); } animate();