Clase 02 - sphere

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 geometry = new THREE.SphereGeometry(1.0, 10, 10);
    const material = new THREE.MeshLambertMaterial({ color: '#FF00FF' });
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

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

    const materialFlat = new THREE.MeshLambertMaterial({ color: '#FF00FF' , flatShading: true});
    let mesh2 = new THREE.Mesh(geometry, materialFlat);
    mesh2.position.set(2.0, 0.0, 0.0);
    scene.add(mesh2);

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

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