Theree.js Primeros Pasos en modelado 3D en pagina Web | Creacion 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
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