Three.js - ¿Formas personalizadas?

Question

Soy nuevo en el three.js ... hasta ahora llegué a un punto en el que puedo crear formas y escena & reproducir con la vista de cámara.

En mi proyecto de las formas que he creado son esferas y que utilizan la imagen como textura para el material ....

Mi pregunta es cómo hacer que una forma personalizada (no esfera, rectángulo ...)? Por ejemplo, ¿cómo puedo crear media esfera?

Mi código de momento:

  // create texture 
    texture = THREE.ImageUtils.loadTexture('red.png');  

    // create a sphere shape   
    geometry = new THREE.SphereGeometry(50, 16, 16); 

    // give a shape red color 
    material = new THREE.MeshLambertMaterial({map: texture}); 

    // create an object 
    mesh = new THREE.Mesh(geometry, material); 

Answer 1

Hay varias maneras de utilizar la geometría en three.js, a partir de modelos de exportación a través de un editor 3D (como Blender, para lo cual un buen three.js exporter ya existe), a la creación de geometría desde cero.

Una manera sería crear una instancia de TRES.Geometría y agregar vértices, luego averiguar cómo se conectan para agregar índices faciales, pero esta no es una manera fácil de hacerlo. Yo sugeriría comenzando con las geometrías existentes (que se encuentra en el paquete de extras/geometrías) como THREE.CubeGeometry, THREE.CylinderGeometry, THREE.IcosahedronGeometry, THREE.OctahedronGeometry, etc.)

Además hay algunas clases que realmente agradables le permite generar extrusiones (THREE.ExtrudeGeometry) y tornos (THREE.LatheGeometry). Para extrusiones, vea esto example.

Mencionaste crear media esfera. Ese es un candidato ideal para usar LatheGeometry. Todo lo que necesita hacer es crear una ruta de medio círculo (como una matriz de instancias de Vector3) y pasarla al torno para que gire el semicírculo en 3D, una media esfera. He aquí un ejemplo:

var pts = [];//points array - the path profile points will be stored here 
var detail = .1;//half-circle detail - how many angle increments will be used to generate points 
var radius = 200;//radius for half_sphere 
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees) 
    pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z 
geometry = new THREE.LatheGeometry(pts, 12);//create the lathe with 12 radial repetitions of the profile 

Plug que la geometría en su malla y Bob de que el tío!

Opcionalmente se puede centrar la malla/pivote usando GeometryUtils:

THREE.GeometryUtils.center(geometry); 

Que se diviertan!