three.js GPU 实例化与自定义网格和材质答案

【问题标题】：three.js GPU Instantiation with custom mesh and materialthree.js GPU 实例化与自定义网格和材质
【发布时间】：2019-05-20 12:49:29
【问题描述】：

尝试实现 GPU 实例化，遵循instances/gpu three.js example。

但是，不知何故，我的尝试似乎没有加载任何内容：http://designs.playgami.com/webgl_loader_fbx3.html

（这里是非gpu实例化版本-http://designs.playgami.com/webgl_loader_fbx2.1.html）

这里特别是我试图只加载一次 fbx 模型，然后实例化。我正在尝试使用var object = new THREE.Mesh( geo ); 进行实例化，但不知何故这不起作用？

  function CreateCraneScape(texturearray,squareside,armyside){
                var total = texturearray.length;
                var halfside = Math.floor(squareside*0.5);

                loader.load( '/11272018-crane.fbx', function ( geo ) {
                    var k = 0;
                    // create cranes
                    for(var i=-halfside;i<=halfside;i++){
                        for(var j=-halfside;j<=halfside;j++){
                            var object = new THREE.Mesh( geo );
                            CraneApplyTexture(object,texturearray[k]); 
                            CranePosRot(object,i,j);
                            k++;
                        }   
                    }

                    // create army
                    
                    for(var i=-(halfside+armyside);i<=(halfside+armyside);i++){ 
                            for(var j=-(halfside+armyside);j<=(halfside+armyside);j++){ 
                                if(j<-halfside||j>halfside || (i<-halfside||i>halfside)){ 
                                    var object = new THREE.Mesh( geo );
                                    CraneApplyTexture(object,''); 
                                    CreatePosRot(object,i,j);
                                }
                            }   
                    }

                });
   }

【问题讨论】：

是否可以提供可编辑的示例？ jsfiddle、codepen、code sn-ps等
不确定我是否正确设置了这个 jsfiddle，基本上只是复制/粘贴完整链接而不是相对链接 - jsfiddle.net/yosun/qtsv59x3/2

标签： three.js

【解决方案1】：

显然 FBXLoader 不仅加载了网格几何体，而且实际上加载了整个 three.js 游戏对象。因此，网格实例化需要引用第一个孩子的几何形状。

geo = geo.children[0].geometry;

【讨论】：