How to Create a 3D Rotating Cube in Javascript | ThreeJS | Basic Explanation
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 :)
Auf dieser Seite können Sie das Online-Video How to Create a 3D Rotating Cube in Javascript | ThreeJS | Basic Explanation mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Major Mango 03 August 2019 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 12,245 Mal angesehen und es wurde von 153 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
