How to Create a 3D Rotating Cube in Javascript | ThreeJS | Basic Explanation

Published: 03 August 2019
on channel: Major Mango

12,245

153

How to Create a 3D Rotating Cube in Javascript, using ThreeJS!
In this video you will find a detailed explanation for beginners to the world of 3D Rendering using the WebGL Library ThreeJS.

ThreeJS is a Javascript Library which makes it simple to use WebGL components in our web applications.

Download the ~500KB ThreeJS library:
https://github.com/mrdoob/three.js/tr...

Like the video to support future videos. Subscribe to know more interesting stuff about the coding world.

Here is the finished Javascript code from the Video:
-START OF CODE-

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75, window.innerWidth/window.innerHeight,
0.5, 1000
);
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//Cube
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({color: 0x00aaff});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate(){
requestAnimationFrame(animate);

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render(scene, camera);
}

animate();

-END OF CODE-

Subscribe to the channel :)

On this page of the site you can watch the video online How to Create a 3D Rotating Cube in Javascript | ThreeJS | Basic Explanation with a duration of hours minute second in good quality, which was uploaded by the user Major Mango 03 August 2019, share the link with friends and acquaintances, this video has already been watched 12,245 times on youtube and it was liked by 153 viewers. Enjoy your viewing!