Following the three js tutorial, i manage to create out the cube.
First, create a folder name Javascript(to store the code files). Before that, open the link from
https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js.
Open the first link and copy the link to a new source code and name three.min.js.
<!doctype html>
<!DOCTYPE HTML>
<html>
<head>
<title>WebGL/Three.js: Particles</title>
<style>
body {
margin: 0px;
background-color: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<script src="Javascript/three.min.js"></script>
<script src="Javascript/particles.js"></script>
</body>
</html>
Then open a new file named particle.js and copy those code.
var camera;
var scene;
var renderer;
var cubeMesh;
var clock;
var deltaTime;
var particleSystem;
init();
animate();
function init() {
clock = new THREE.Clock(true);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 50;
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, -1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.CubeGeometry( 10, 10, 10);
var material = new THREE.MeshPhongMaterial( { color: 0x0033ff, specular: 0x555555, shininess: 30 } );
cubeMesh = new THREE.Mesh(geometry, material );
cubeMesh.position.z = -30;
scene.add( cubeMesh );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
deltaTime = clock.getDelta();
cubeMesh.rotation.x += 1 * deltaTime;
cubeMesh.rotation.y += 2 * deltaTime;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
Then, a cube is success appear!
Reference
Solutiondesign.com. (2016). WebGL and Three.js: Particles - Blog - sdg. [online] Available at: http://solutiondesign.com/blog/-/blogs/webgl-and-three-js-particles [Accessed 15 Jul. 2016].
Solutiondesign.com. (2016). Getting started with WebGL and Three.js - Blog - sdg. [online] Available at: http://solutiondesign.com/blog/-/blogs/getting-started-with-webgl-and-three-1 [Accessed 15 Jul. 2016].
