Three.js compatability (#85)

* add more compatability to three.js

* else-if for scene decomposition

Author: Lucas Crane

scenes/renderer-test/main.js

@@ -48,12 +48,15 @@ const tick = (time) => {
   requestAnimationFrame(tick);
 };
 
-const geo = new THREE.SphereBufferGeometry(4, 24, 24);
+const geo = new THREE.SphereBufferGeometry(1, 24, 24);
 
 function makeMesh() {
   const mat = new THREE.RayTracingMaterial();
   const mesh = new THREE.Mesh(geo, mat);
+
+  // test setting scale and position on mesh
   mesh.position.set(0, 4, 0);
+  mesh.scale.set(4, 4, 4);
   return mesh;
 }
 
@@ -205,9 +208,45 @@ function init() {
     model.add(mesh);
   }
 
+  // test box with .visible set to false
+  // should not be visible in the scene
+  {
+    const geo = new THREE.BoxBufferGeometry(5, 5, 5);
+    const mat = new THREE.MeshStandardMaterial();
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.set(0, 10, 0);
+    mesh.visible = false;
+    model.add(mesh);
+  }
+
+  let unreadyMat;
+  {
+    // Create a test (non-buffer) Geometry
+    const geo = new THREE.BoxGeometry(6, 6, 6);
+    const mat = new THREE.MeshStandardMaterial();
+    mat.roughness = 0.2;
+    mat.metalness = 0.0;
+    mat.color.set(0x993311);
+    unreadyMat = mat;
+    const mesh = new THREE.Mesh(geo, mat);
+    mesh.position.set(0, 3, 30);
+    model.add(mesh);
+  }
+
   scene.add(model);
 
-  THREE.DefaultLoadingManager.onLoad = tick;
+  THREE.DefaultLoadingManager.onLoad = () => {
+
+    // give material an unloaded async texture. the renderer should handle this
+    unreadyMat.map = new THREE.TextureLoader().load('diffuse.png');
+    unreadyMat.normalMap = new THREE.TextureLoader().load('normal.png');
+    const metalrough = new THREE.TextureLoader().load('metalrough.png');
+    unreadyMat.roughnessMap = metalrough;
+    unreadyMat.metalnessMap = metalrough;
+
+    THREE.DefaultLoadingManager.onLoad = undefined;
+    tick();
+  };
 }
 
 init();

src/renderer/decomposeScene.js

@@ -8,22 +8,22 @@ export function decomposeScene(scene) {
 
   scene.traverse(child => {
     if (child.isMesh) {
-      if (!child.geometry || !child.geometry.getAttribute('position')) {
-        console.warn(child, 'must have a geometry property with a position attribute');
+      if (!child.geometry) {
+        console.warn(child, 'must have a geometry property');
       }
       else if (!(child.material.isMeshStandardMaterial)) {
         console.warn(child, 'must use MeshStandardMaterial in order to be rendered.');
       } else {
         meshes.push(child);
       }
     }
-    if (child.isDirectionalLight) {
+    else if (child.isDirectionalLight) {
       directionalLights.push(child);
     }
-    if (child.isAmbientLight) {
+    else if (child.isAmbientLight) {
       ambientLights.push(child);
     }
-    if (child.isEnvironmentLight) {
+    else if (child.isEnvironmentLight) {
       if (environmentLights.length > 1) {
         console.warn(environmentLights, 'only one environment light can be used per scene');
       }

src/renderer/mergeMeshesToGeometry.js

@@ -9,7 +9,13 @@ export function mergeMeshesToGeometry(meshes) {
   const materialIndexMap = new Map();
 
   for (const mesh of meshes) {
-    const geometry = cloneBufferGeometry(mesh.geometry, ['position', 'normal', 'uv']);
+    if (!mesh.visible) {
+      continue;
+    }
+
+    const geometry = mesh.geometry.isBufferGeometry ?
+      cloneBufferGeometry(mesh.geometry, ['position', 'normal', 'uv']) : // BufferGeometry object
+      new BufferGeometry().fromGeometry(mesh.geometry); // Geometry object
 
     const index = geometry.getIndex();
     if (!index) {

src/renderer/texturesFromMaterials.js

@@ -31,7 +31,9 @@ function texturesFromMaterials(materials, textureName, textures) {
   const indices = [];
 
   for (const material of materials) {
-    if (!material[textureName]) {
+    const isTextureLoaded = material[textureName] && material[textureName].image;
+
+    if (!isTextureLoaded) {
       indices.push(-1);
     } else {
       let index = textures.length;