THREE.js - Practica 1

Utilizando los pasos de el post anterior: https://gvtgraficacion.blogspot.com/2019/11/threejs.html

Puntos básicos para esta y todas las practicas de THREE.js
Primero se crearon las carpetas necesarias dentro de la carpeta de la practica:

• css
• js

Dentro de la carpeta  css se creo un default.css con el código base de los margenes, después se creo el index.html a la altura de las carpetas, en este index se escribió el titulo y la exportación de los js, así como el Div que contendrá la salida del script.

Para esta practica
Se utilizaron de la carpeta raíz de THREE.js:

• jquery-3.4.1.min.js
• three.js

Se comenzó a crear el script dentro de la carpeta js con el nombre de script.js, 

• En este documento se inicio la función primeramente:

$(function init() {

• Dentro de ella de comenzó con la creación de la escena 

var scene = new THREE.Scene();

• Crear el render y fijar el tamaño

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);

• Mostrar los ejes

var axes = new THREE.AxesHelper(20);
scene.add(axes);

• Crear un plano

var planeGeometry = new THREE.PlaneGeometry(60, 20);
var planeMaterial=new THREE.MeshBasicMaterial({color:0xAAAAAA});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);

• Rotar y posicionar el plano

plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);

• Agregar el plano al escenario

scene.add(plane);

• Se agrego un cubo para lo cual se creo, posiciono y se agrego al escenario

var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
var cubeMaterial = new THREE.MeshBasicMaterial({color:0xFF0000, wireframe:true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-4,3,0);
scene.add(cube);

• De igual manera que el cubo se agrego una esfera

var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777FF, wireframe:true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(20,4,2);
scene.add(sphere);

• También un cilindro

var cylinderGeometry = new THREE.CylinderGeometry(3, 3, 10, 10);
var cylinderMaterial = new THREE.MeshBasicMaterial( {color: 0xFFFF00, wireframe:true});
var cylinder = new THREE.Mesh(cylinderGeometry, cylinderMaterial);
cylinder.position.set(6,6,2);
scene.add(cylinder);

• Se posiciona la cámara

camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);

• Agregar la salida del render al elemento html

document.getElementById("webgl-output").appendChild(renderer.domElement);

• Se renderiza la escena y se cierra la llave

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