The three position-parameters are the X, Y, and Z coordinates. The rest will be in parallel to it.Īs the light rays are in parallel, and they shine from very far away, the exact coordinates don't matter here – rather, their proportions do. This specific light ray will shine from the position we define (200,500,300) to the 0,0,0 coordinate. Out of all the parallel rays we define one in particular. This position can be a bit confusing so let me explain. We set a position for this light that defines the direction of these light rays. The directional light shines from very far away with parallel light rays. The ambient light is shining from every direction, giving a base color for our geometry while the directional light simulates the sun. The intensity is a number between 0 and 1, and as both of them shine simultaneously we want these values somewhere around 0.5.Ĭonst ambientLight = new THREE.AmbientLight(0xffffff, 0.6) Ĭonst directionalLight = new THREE.DirectionalLight(0xffffff, 0.8) ĭ(200, 500, 300) We define both by setting a color and an intensity. We'll add two lights to the scene: an ambient light and a directional light. We are about to add a car to this scene, but first let's set up the lights, the camera, and the renderer. The scene is a container that contains all the 3D objects we want to display along with the lights. import * as THREE from "three" įirst, we need to define the scene. I used NPM to install it to my project then imported it at the beginning of the JavaScript file. Three.js is an external library, so first we need to add it to our project. And finally we are going to code textures with JavaScript and HTML Canvas. Then we'll learn how to define geometries and materials to create 3D objects. In this tutorial, we're going to put together a minimalistic car from boxes and learn how to map texture onto it.įirst, we'll set things up – we'll define the lights, the camera, and the renderer. We put together some boxes, add lights, define a camera, and Three.js renders the 3D image. Putting together a 3D scene in the browser with Three.js is like playing with Legos.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |