You know, with javascript it's possible to create and manipulate 3d elements using three.js library.
in this tutorial, I'm going to show you how to build a simple 3d engine, that will display a cube and allow us, using the mouse to rotate and move the scene. so let's begin.
Get Started
first, we need to install three.js library in our folder, to do that just create a new js file and called three.js, then copy and paste this code: https://threejs.org/build/three.js
now that we have our library ready to use we need to create the index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="three.js"></script>
<script src="main.js"></script>
</body>
</html>
now create a new js file and call it main.js, in this file we are going to do the main functions for our app.
Create the scene
now let's create the 3d scene, camera, and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
now we will create our cube and add it to our scene
now we need to set the initial position of our camera
now let's render our scene
now if you open the browser and test the app, you will see that we have created a simple cube, but it's lack of some animation, so let's add the mouse event of our project
and that's it, 😀 now open the app and you will see it, pretty cool huh.
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x002500 } );
var cube = new THREE.Mesh( geometry, material );
var edges = new THREE.EdgesGeometry( geometry );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );
scene.add( cube );
now we need to set the initial position of our camera
camera.position.z = 5;
now let's render our scene
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
now if you open the browser and test the app, you will see that we have created a simple cube, but it's lack of some animation, so let's add the mouse event of our project
//adding the events
document.addEventListener('wheel',(e) => {
let zoom = e.deltaY * -0.01;
camera.position.z -= zoom;
});
let isdown = false;
let xc = 0;
let yc = 0;
document.addEventListener("mousedown",e =>{
isdown = true;
xc = e.clientX;
yc = e.clientY;
})
document.addEventListener("mousemove", e =>{
let x = e.clientX - xc;
let y = e.clientY - yc;
if(isdown){
scene.rotation.y +=( 0.0001 * x );
scene.rotation.x +=( -0.0001 * y );
}
})
document.addEventListener("mouseup", e=>{
isdown = false;
})
and that's it, 😀 now open the app and you will see it, pretty cool huh.
The full code
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial( { color: 0x002500 } );
var cube = new THREE.Mesh( geometry, material );
var edges = new THREE.EdgesGeometry( geometry );
var line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
//adding the events
document.addEventListener('wheel',(e) => {
let zoom = e.deltaY * -0.01;
camera.position.z -= zoom;
});
let isdown = false;
let xc = 0;
let yc = 0;
document.addEventListener("mousedown",e =>{
isdown = true;
xc = e.clientX;
yc = e.clientY;
})
document.addEventListener("mousemove", e =>{
let x = e.clientX - xc;
let y = e.clientY - yc;
if(isdown){
scene.rotation.y +=( 0.0001 * x );
scene.rotation.x +=( -0.0001 * y );
}
})
document.addEventListener("mouseup", e=>{
isdown = false;
})
Create a simple 3D engine using Javascript
Reviewed by Medics
on
May 25, 2020
Rating:
Reviewed by Medics
on
May 25, 2020
Rating:
No comments: