three.js ~ example ~ Mr.doob

2012-01-05 ~

by apbln

JavaScript

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

init();
animate();

function init() {

    scene = new THREE.Scene();

        const fov = 75;
    const aspect = 2;  // the canvas default
    const near = 0.1;
    const far = 100;
     camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 5;

		const geometry = new THREE.Geometry();
    geometry.vertices.push(
    //good vertices
  new THREE.Vector3(-1, -1,  0),  // 0
  new THREE.Vector3( 1, -1,  0),  // 1
  new THREE.Vector3(-1,  1,  0),  // 2
  new THREE.Vector3( 1,  1,  0),  // 3
  // wrong vertices
  new THREE.Vector3(-0.5, -0.5,  0),  // 4
  new THREE.Vector3( 0,  1,  0),  // 5
  new THREE.Vector3( 1, -1,  0),  // 6
);

geometry.faces.push(
     
     new THREE.Face3(0, 5, 2),
     new THREE.Face3(0, 1, 5),
     new THREE.Face3(3, 5, 1),
     
  );
    material = new THREE.MeshBasicMaterial();

    mesh = new THREE.Mesh(geometry, material);
    
    function makeInstance(geometry, color, x) {
    const material = new THREE.MeshBasicMaterial({color});

    const cube = new THREE.Mesh(geometry);
    scene.add(cube);

    cube.position.x = x;
    return cube;
  }
 const cubes = [
    makeInstance(geometry, 0x44FF44,  0),
  ];
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}