Theree.js Primeros Pasos en modelado 3D en pagina Web | Creación de un punto

Definiciones Basicas

Geometría: Conjunto de vértices, que hacen la posible la representación de un elemento gráfico.

Material: Es la textura de la geometría que en conjunto forman la malla.

Malla: es un objeto o elemento gráfico en 3d.

Camara

Parámetros de la clase Camara

• fov: Angulo del Campo de vision
• aspect: La relación de aspecto de tronco con camara.
• near: Distancia Cercan de plano
• far: Distancia lejana de plano

Perpectivas del entorno

Se tienen unos parámetros de ubicación donde la reacion de aspecto(Aspect Ratio) se obtiene de la división variables

Jugar con lo estas variables que dan el campo de vision permitiendo la delimitacion de lo cerca y lo lejos que va estar la cámara para ver todo el escenario.

Escenario: Dónde se maneja todos los elementos que la cámara puede observar, los modelos 3D se añaden en el escenario y la cámara también para observar los elementos.

Ejemplo de cámara en escenario

Ejemplo de un PUNTO

Preparacion

Antes de comenzar cualquier proyecto es necesario tener unas cosas preparadas como quien rederiza en el documento html lo que se va a programar para ello se hace lo siguiente:

Los primero es necesario crear el render

var render = new THREE.WebGLRenderer();

Tambien se le cambia el valor pro defecto del tamaño

rener.setSize(800,600);

y ahora lo que se hace es añadir el renderer al div html

document.getElementById("obj3d").appendChild(render.domElement);

Crear entorno

Primero habiendo preparado todo lo primero que se hace es crear la escena

var escena = new THREE.Scene();

Luego se crea la camara

var camara = new THREE.PerspectiveCamera();

y se le añade una profundidad par que se pueda ver el punto

camara.position.z = 30;

y por ultimo se añade la camara al aescena

escena.add(camara);

Lo ultimo seria la creacion del objeto PUNTO, el que se vera en el escenario

/creacion de la geometria
var geometria = new THREE.Geometry();

//creacion del vector de un punto
var vectorPunto = new THREE.Vector3(10,0,0);

//añadir como vectice de la geometria un el vector del punto
geometria.vertices.push(vectorPunto);

//creacion el materia de la particula
var materialParticula = new THREE.ParticleBasicMaterial({color:0XFF0000});

//creando la particula a modelar a partir de la geometria y el material
var particulaObj = new THREE.ParticleSystem(geometria,materialParticula);

//Se alade el objeto de la particula al escenario
escena.add(particulaObj);

//se renderiza la escena
renderer.render(escena,camara);


El ejemplo completo se vería asi