具有自定义网格和材质的three.js GPU实例化 [英] three.js GPU Instantiation with custom mesh and material

问题描述

尝试实现 GPU 实例化，遵循 instances/gpu Three.js 示例.>

但是，不知何故，我的尝试似乎没有加载任何内容: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); 进行实例化，但不知何故不起作用?

 函数 CreateCraneScape(texturearray,squareside,armyside){var total = texturearray.length;var halfside = Math.floor(squareside*0.5);loader.load('/11272018-crane.fbx', 函数 (geo) {无功k = 0;//创建起重机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++;}}//创建军队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);}}}});}

解决方案

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

geo = geo.children[0].geometry;

Trying to implement GPU instantiation, following the instances/gpu three.js example.

However, somehow nothing seems to be loading in my attempt: http://designs.playgami.com/webgl_loader_fbx3.html

(here is the non-gpu instantiation version - http://designs.playgami.com/webgl_loader_fbx2.1.html)

Here's specifically where I am trying to load the fbx model just once, and then instantiate. I'm trying to instantiate using var object = new THREE.Mesh( geo );, but somehow that does not work?

  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);
                                }
                            }   
                    }

                });
   }

解决方案

Apparently FBXLoader does not load just the mesh geometry but actually the entire three.js game object. So, the mesh instantiation needed to reference the geometry of the first child.

geo = geo.children[0].geometry;

这篇关于具有自定义网格和材质的three.js GPU实例化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！