three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<div id="webGL"></div>

CSS

#webGL {
  
  
  /* FOR OFFSETTING */
  position: absolute;
  
  top: 20px;
  left: 20px;
  
  /* SET SPECIFIC SIZE */
  width: 200px;
  height: 200px;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh;
var w, h;

init();
animate();

function init() {

		let container = document.querySelector('#webGL');

		w = container.clientWidth
		h = container.clientHeight

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, w / h, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);


    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xFFFF00))
    renderer.setSize(w, h);

		container.append(renderer.domElement);




		// Cube
    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

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

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}