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

The "Three Dimensional Thinking Q&A" Lesson is part of the full, Creative Coding with Canvas & WebGL course featured in this preview video. Here's what you'd learn in this lesson:

A question is asked about how ThreeJS handles intersecting objects.

Preview
Close

Transcript from the "Three Dimensional Thinking Q&A" Lesson

[00:00:01]
>> Mathew DesLauriers: Anyone running into anything? Any questions, comments?
>> Speaker 2: How does three.js decide what to do if objects are intercepting with each other?
>> Mathew DesLauriers: That's a good question. So the way it works is that it tries to replicate real life, basically. So if you see a cube in front of another cube, and then you rotate your camera around it so that you're doing a full circle, it will know based on the way it's rendering, it'll be like,oh, this cube is actually positioned in such a way that it should appear in front of the other cube.

[00:00:36]
So it's basically just using these XYZ positions that you give it. It's gonna end up placing everything in this real world space. And then, depending on where your camera is, the engine will figure out, okay, this cube is in front of the other one based on where you're looking from, where your vantage point is.

[00:00:54]
And there's ways of getting around that, there's actually ways of kinda hacking with that. So sometimes you want an object like, let's say you're in a game engine and you're building some cool field with grass and stuff like that. And then you want it to be when you look at the sun, you want there to be a lens flare effect.

[00:01:11]
And the lens flare effect might be a circle that's rendered with some transparency. And that actually, you have to disable depth testing, and you have to say that this circle was always appearing here no matter where my vantage point is. But generally, it will handle it for you as long as you position things in the right way.

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