three.js - examples - three js particles

ThreeJs y Blender(usando colladaLoader): primer contacto

Question

¿Cómo puedo renderizar una escena exportada (con muchos objetos, cada uno con diferentes colores y diferentes propiedades, como la rotación alrededor de un eje en la escena) de Blender (con colladaLoader ->. Dae) en ThreeJs?

Answer 1

Entonces, el primer paso es aprender a crear una escena en tres J y aprender alguna característica con Blender. Cuando esté listo, cree su primer modelo y antes de exportar tenga esto en cuenta:

1. necesitas un objeto con vértices, así que si creas un texto con Blender, debes convertirlo a una malla, de lo contrario, tres J no lo renderizarán
2. asegúrese de elegir la opción de renderizado de Blender y no los ciclos; de lo contrario, la .dae que exporta no se procesará en tres js
3. Al aplicar una textura, use solo colores y materiales básicos (básico, phong y lambert); los otros no funcionarán con el colladaLoader
4. para ver si el objeto se renderizará con color en tres J con colladaLoader solo mira el objeto en Blender con modo de objeto (sólido): si es gris y no tiene el color que elijas, se representará en tres J de la misma manera
5. si aplicas el modificador ''solidify'' al objeto y luego en tresJs lo configuras en transparente, se representará como wireframed
6. si agrega varios objetos en la escena y los ''une'', las respectivas posiciones y rotaciones se respetarán en tres J, de lo contrario, no: por ejemplo, si desea renderizar una flor en el frasco (y esos objetos son diferentes archivos mezcladores que se anexan / unen en la escena), la flor no cabe en la botella en tres J, pero tendría una posición y rotación diferente a la de la botella
7. agrupar los objetos no resolverá esto: para ver la escena como la ves en Blender tienes que ''unir'' los objetos (con las consecuencias que esto conlleva) o cambiar manualmente de posición y rotación en tres Js las opciones de exportación .dae no asunto para la representación del objeto en tres J

y ahora, la parte que se refiere a tresJs:

asegúrese de importar el colladaLoader con:

<script src="jsLib/ColladaLoader.js"></script>

inserte este código en su función init () para que el cargador cargue su modelo .dae:

var loader = new THREE.ColladaLoader(); 
loader.options.convertUpAxis = true; 
loader.load( ''model.dae'', function ( collada ) { 
  // with this you can get the objects of the scene; the [0] is not the first object 
  // you display in blender in case of many objects (which means you didn''t join them) 
  var obj1 = collada.scene.children[0]; 
  // you can name the object so you can use it even out of the function, if you want 
  // animate it for example obj1.name = "daeObj1"; 
  // you can set here some material properties as trasparency 
  obj1.material.needsUpdate = true; 
  obj1.material.transparent = true; 
  obj1.material.opacity = 0.5; 
  obj1.hearth.material.wireframe = false; 
  // and now some position and rotation for good visualization 
  obj1.position.set(0, -5, -0.6); //x,z,y 
  obj1.rotation.set(0, 45, 0); 
  // and add the obj to the threeJs scene 
  scene.add(obj1); 
});

y algún código para la función animate () si desea actualizar algunos de sus objetos, con rotación, por ejemplo

scene.traverse (function (object) { 
   if (object.name === ''daeObj1'') { 
     object.rotation.z -= 0.01;
   }
 });

Espero que alguien se beneficie de esta publicación