#Magicavoxel rg renderer how to#

The directional light is shining from very far away with many parallel light rays all having a fixed angle. The word position here is a bit misleading, because it doesn’t mean that the light is coming from an exact position. The directional light has a similar setup, but it also has a position. The two lights we define work in an accumulative way so in this case we want the intensity to be around 0.5 for each. The intensity is a number between 0 and 1.

The color is usually white, but you can set any color. To set an ambient light we set a color and an intensity. The ambient light is shining from every direction, giving a base color for our geometry. We'll add two lights - an ambient light and a directional light.įirst, we add the ambient light. If there isn't any light, the mesh will remain in darkness.Ĭonst ambientLight = new THREE.AmbientLight(0xffffff, 0.6) A mesh with basic material doesn’t need any light, as the mesh will have the set color regardless of the light settings.īut the Lambert material and Phong material require light. So if you have your values in degrees you have to divide them by 180° then multiply by PI. It doesn't matter if you are using small numbers or big numbers, you just need to be consistent in your own world.įor the rotation we set the values in radians. Later if we want to animate objects in the 3D space we will mostly adjust these values.įor positioning we use the same units that we used for setting the size. Once we have a mesh we can also position it within the scene and set a rotation by each axis. But if we render a sphere, the difference is more obvious. If we render boxes and use directional light, the result won't change that much. It also depends on the light settings and the geometry if it has any real effect. This can help with realism but also costs in performance. The MeshPhongMaterial not only calculates the color by vertex but by each pixel. If you need more precision, there are more advanced materials. This will calculate the color of each vertex, which is practically each side. The simplest material that cares about light is the MeshLambertMaterial. It might not be the best option, though, as you can’t see the edges of the box. This material doesn't care about light at all, and each side will have the same color. The simplest one is the MeshBasicMaterial. The main difference between most of them is how they react to light. There are still different options for materials. In this example we are only going to set a color. Here we can define things like texture, color, or opacity. A material describes the appearance of an object. We can easily define a plane, a cylinder, a sphere, or even an icosahedron. There are other predefined geometries as well. You might think that we can't get far by defining boxes, but many games with minimalistic design use only a combination of boxes. We only have to set the width, height, and depth of the box and that’s it. The BoxGeometry is the most basic predefined option.

A geometry can be build from vertices or we can use a predefined one. (0, 0, 0) // Optional, 0,0,0 is the defaultĪ geometry is a rendered shape that we’re building - like a box. A mesh is a combination of a geometry and a material.Ĭonst geometry = new THREE.BoxGeometry(3, 1, 3) // width, height, depthĬonst material = new THREE.MeshLambertMaterial() Ĭonst mesh = new THREE.Mesh(geometry, material) Then we add our 3D box to the scene as a mesh. Scene.background = new THREE.Color(0x000000) // Optional, black is default If we don't set it, the default will be black. The scene object also has some properties, like the background color. This will be a container where we place our 3D objects and lights. Define the Scene Objectįirst, we have to define a scene.

#Magicavoxel rg renderer how to#

In this article, we'll go through how to place a 3D object in a scene, set up the lighting and a camera, and render the scene on a canvas. On the other hand, Three.js is like playing with Legos. We could use plain WebGL, but it's very complex and rather low level. Three.js uses WebGL under the hood to render 3D graphics. We'll render a 3D box, and while doing so we'll learn the fundamentals of Three.js.

In this tutorial, we will go through a very simple example. The whole thing is in JavaScript, so with some logic you can add animation, interaction, or even turn it into a game. Three.js is a library that we can use to render 3D graphics in the browser. If you have ever wanted to build a game with JavaScript, you might have come across Three.js.