Scribd
Upload
7 views

attachment_0

Uploaded by

RIGENIX FF
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

attachment_0

Uploaded by

RIGENIX FF
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Setup the project by crea ng a html file, a main.js file and then setup your package.

json file
Note – while linking your main.js file in the html document use type = “module” like this –

<script type="module" src="./main.js"></script>


Commands to setup your project –
npm init
npm install --save three
npm install --save-dev vite

Alternative – Use CDN links –

<script type="importmap">

{
"imports": {
"three": "https://unpkg.com/three@<version>/build/three.module.js",
"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
}
}
</script>

Import the three js library and some special functions from its dependency.
import * as Three from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';


// * orbit controls is a plugin that allows us to control the camera with the
mouse
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// * GLTFLoader is a plugin that allows us to load gltf files ( gl transmission


format ), it is an open format specification for efficient delivery and loading
of 3D content

To actually be able to display anything with three.js, we need three things: scene, camera and
renderer, so that we can render the scene with camera.

Create a new Scene –

const scence = new Three.Scene();


There are a few different cameras in three.js. For now, let's use a PerspectiveCamera.
Syntax - PerspectiveCamera(fov, aspect, near, far) - > fov — vertical field of view. aspect
— Camera frustum aspect ratio. objects further away from the camera than the value of
far or closer than near won't be rendered.
const camera = new Three.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);

render.setSize(window.innerWidth, window.innerHeight);
In addition to creating the renderer instance, we also need to set the size at which we
want it to render our app. It's a good idea to use the width and height of the area we
want to fill with our app - in this case, the width and height of the browser window. For
performance intensive apps, you can also give setSize smaller values, like
window.innerWidth/2 and window.innerHeight/2, which will make the app render at
quarter size.

Note - to keep the size of your app but render it at a lower resolution, we have a third argument
setSize with false as updateStyle
Example -

setSize(window.innerWidth/2, window.innerHeight/2, false);

Now we need to append in the html body

document.body.appendChild(render.domElement);

*********************** Setup Ends here *****************************************


Crea ng a Cube

To create a cube, we need a BoxGeometry. This is an object that contains all the points (ver ces)
and fill (faces) of the cube. We'll explore this more in the future.

const geometry = new THREE.BoxGeometry( 1, 1, 1 );


const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

In addi on to the geometry, we need a material to color it. Three.js comes with several
materials, but we'll s ck to the MeshBasicMaterial for now. All materials take an object of
proper es which will be applied to them. To keep things very simple, we only supply a color
a ribute of 0x00ff00, which is green. This works the same way that colors work in CSS or
Photoshop (hex colors).
The third thing we need is a Mesh. A mesh is an object that takes a geometry, and applies a
material to it, which we then can insert to our scene, and move freely around.
By default, when we call scene.add(), the thing we add will be added to the coordinates (0,0,0).
This would cause both the camera and the cube to be inside each other. To avoid this, we simply
move the camera out a bit.

Rendering the scene


If you copied the code from above into the HTML file we created earlier, you wouldn't be able to
see anything. This is because we're not actually rendering anything yet. For that, we need
what's called a render or animate loop.

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
This will create a loop that causes the renderer to draw the scene every me the screen is
refreshed (on a typical screen this means 60 mes per second).
Note - you might say "why don't we just create a setInterval ?" The thing is - we could, but
requestAnima onFrame has a number of advantages. Perhaps the most important one is that it
pauses when the user navigates to another browser tab, hence not was ng their precious
processing power and ba ery life.

So now the actual code should look like this


import * as Three from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new Three.Scene();


const camera = new Three.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 0.1, 1000);
const renderer = new Three.WebGLRenderer();

const geometry = new Three.BoxGeometry( 1, 1, 1 );


const material = new Three.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new Three.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;

function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

And your html page on the browser would look like this –
Animating the cube –

Add the following code right above the renderer.render call in your animate func on:

function animate() {
requestAnimationFrame( animate );

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}

You might also like