Check out a free preview of the full Advanced Creative Coding with WebGL & Shaders course

The "Units & Scale" Lesson is part of the full, Advanced Creative Coding with WebGL & Shaders course featured in this preview video. Here's what you'd learn in this lesson:

Matt demonstrates how to add a property to a specific group of objects within a scene, and explains how to add units to realistically scale distance.


Transcript from the "Units & Scale" Lesson

>> Okay, now, we've got a scene with lots of helpers, you can always comment those out. One other thing that you might wanna do is, or let's say I'll leave them there for now, you can leave them in, it's up to you. One thing that you might also wanna do is let's say, if we think about sort of the sun, I mean, this is not at all accurate, but let's say we're looking at this.

And what we really want is more like this light to orbit around as well. So we can just do what we were doing before, which is instead of adding things to the scene, we could say maybe adding the light to the moonGroup and see how that changes things.

And now, we're gonna get something more like that. Or you might want it, maybe add a light with its own group and rotate that group independently. If you want it to get really accurate with like the solar system, you have to look into things like rotations, speed, and positions.

But the nice thing here is because we're just working with this world units, which are arbitrary units, they're not pixels. You could potentially say, okay, my Earth, let's say what is the radius of the Earth? It's this many miles, so you could potentially work entirely in miles for your units.

And when you create your mesh here, so your new mesh for the Earth, you could still use geometry as a scale of one which is the default scale when we create a new geometry here. But we could also say mesh.scale.setScalar and we could paste this in, which is the the number of miles.

But then all of our other units, things like the size of the moon, the position of the moon, they would also have to be in miles. So this is just to say that the units in Three.js, they're arbitrary, it's not necessarily pixels or anything like that, it's actually whatever units you want.

So typically, we work in meters, that's like a pretty common thing. Or if we're just doing these little sketches, we just work in these arbitrary sort of normalized range around zero to one, where zero would be really small one would be sort of a default size, and anything above one is just larger than the default size.

So if you wanted to make a game, I would work with a specific unit. So I would start working in meters, let's say. And then when you make a 3D model, let's say of a coffee cup, you can measure this out exactly, you can say it's this many centimeters high.

And because it's this many centimeters high, I'm gonna set the mesh to be this many centimeters high. And maybe I'll have to place it in the scene and if I just place it in the origin, it might get cut off just like our spheres getting cut off by the axis.

So you might have to move it up exactly so many centimeters. So that's just all to say that the units can be in meters, or it can be in miles, or it can be in whatever unit you want to work in. And so, yeah, if you wanted to make a solar system, you could basically just take all these numbers, plug them in, and you'd end up having to scroll lots because the distances between these plants are gonna be huge but that could be kind of fun.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now