three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

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

CSS

#webGL {
  
  
  /* 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 = window.innerWidth / 2
    h = window.innerHeight 

    container.style.width = w + 'px'
    container.style.height = h + 'px'

    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);

}