1 Nov 2020

Getting start with Threejs ! Introduction to Basic Setting.


if you are getting start with Threejs First Time. Introduction to basic essential setting of Every Threejs Project.

if you are new to threejs. May be you are try work with Threejs first time. Probably some kind of tecnical difficulties can be there. Like :- Calling Threejs before window.onload. Providing wrong input to Threejs function.

Requirement

You should be familiar with Basic Knowledge of Coding. Atleast HTML, JAVASCRIPT & OPP(Object Orentation Programing).

Intial Setup of Threejs.

Important Threejs Library to your project. Threejs library file is hosted on threejs server. Or you can also import cdn link.
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js'></script>

Example

    <head>
    <base href="https://threejs.org/"/>
   <script src="build/three.min.js"></script>
   </head>
 
Create Threejs Application. Now create a script tag under html <body> section.
Example
<body>

<script>
window.onload = function (){

// Threejs code
         
}
</script>
<body>

window.onload event occurs when whole document resources is fully loaded. Here meant to you, The CDN link that you had imported above in Head Tag.

Threejs World's Object

Light , Camera , Scene , Action

var scene = new THREE.Scene();

The Scene Object keeps data for graphic creation. scene.add( Object3D ); method call to add.

var camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 1 , 2000 );

PerspectiveCamera is a types of cameras which helps you to simulate real world expresstion.
FOV - Frustum Of View, angle 60° degree
Ratio - Ratio of window.innerWidth by window.innerHeight.
Near - minimum rendring distance start from.
Far - rendring distance from camera position. How far can camera render the things.

var render = new THREE.WebGLRenderer({});

document.body.appendChild(renderer.domElement);

Webgl Rendering context object.
HTMLCanvasElement appends to you current DOM.


var light = new THREE.AmbientLight();
scebe.add(light);

light needed to be see an object.
Light, also Added to Scene Object.

var animate = function (){

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

animate();

animate function variable.
renderer.render( scene, camara) : WebGLRender Engine render or create graphics on basic of provided scene & camera object.
requestAnimationFrame(animate) : Provides maximum FPS(Frames Per Second) rate .
animate() : animate function variable called.

Compilation

Above given all the codes are compiled at place. see how it looks .

<DOCTYPE html>
<html>
<head>
    <base href="https://threejs.org/"/>
   <script src="build/three.min.js"></script>
   </head>
   
    <body>

<script>
window.onload = function (){

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 2000);

var renderer = new THREE.WebGLRenderer({});

document.body.appendChild(renderer.domElement);

var light = new THREE.AmbientLight();
scene.add(light);

var animate = function (){

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

animate();

}
</script>
</body>
</html>
Errors Fixing!

"Reference Error : THREE is not defined" is Thrown. Calling `THREE` before being Initilize. Check it. Haven't you called THREE under wndow.onload event.
Or may be any kind of network issue.


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE