Clase 02 - triangle

by pancha00

HTML

<script type="importmap">
{
"imports": {
  "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
  "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
}
}
</script>
<canvas id="canvas" ></canvas>

CSS

body {
	  margin: 0;
    padding: 0;
}

canvas {
  display: block;
}

canvas {
  width: 100%;
  height:  100vh;
  display: block;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let scene, camera, mesh;
let controls;

init();


function createGeometry() {
    let vertices = [
        0.0, 0.0, 0.0, //
        1.0, 0.0, 0.0, //
        0.5, 1.0, 0.0
    ];
    let index = [
        0, 1, 2, //
    ]
    
    const vertexBuffer = new THREE.BufferAttribute(new Float32Array(vertices), 3);
    let geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', vertexBuffer);
    geometry.setIndex(index);
    
    const material = new THREE.MeshLambertMaterial({ color: '#FF00FF' });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

function createCamera() {
    const aspect = canvas.clientWidth / canvas.clientHeight;
    camera = new THREE.PerspectiveCamera(60, aspect, 0.1, 100);
    camera.position.set(5, 5, 5);
    scene.add(camera);
}

function createLight() {
    const light = new THREE.AmbientLight(0xFFFFFF, 0.5);
    scene.add(light);

    const pointLight = new THREE.PointLight(0xff00ff, 1);
    pointLight.position.set(0, 0.5, 1.0);
    scene.add(pointLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 0, 0);
    directionalLight.target.position.set(0, 0, 0);

    scene.add(directionalLight.target);
    camera.add(directionalLight);

}


/** Updates the elements of the scene before the call to render */
function update() {

}

/** Creates the scene and initalizes the elements in it **/
function init() {
    const canvas = document.querySelector('#canvas');

    scene = new THREE.Scene();
    scene.background = new THREE.Color('#aaa');

    createCamera();
    createGeometry();
    createLight();

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    //renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize(canvas.clientWidth,...