javascript 如何将gltf模型定位在三个平面几何体中的平面几何体瓦片图上，其中瓦片已使用多个平面几何体正确显示在三个平面中

velaa5lx  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(115)

此bounty已结束。此问题的答案可获得+50的声望奖励。奖励宽限期将在6小时后结束。Rajnikant Sharma正在寻找规范答案。

var c = 100;
rshgroup = new THREE.Group();
        facadegroup = new THREE.Group();
        console.log(rshgroup);
        var i=0;
        for (var row = 0; row < 3; row++) {
            for (var col = 0; col < 3; col++) {
                var txture = new THREE.TextureLoader().load("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzA\
AABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw1AUhU9TpSoVBTuIOGSoThZERRy1CkWoEGqFVh1MXvoHTRqSFBdHwbXg4M9i1cHFWVcH\
V0EQ/AFxc3NSdJES70sKLWJ8cHkf571zuO8+QKiXmWZ1jAOabpupRFzMZFfF0CvC6EY/1YzMLGNOkpLwXV/3CPD9Lsaz/O/9uXrVnMWA\
gEg8ywzTJt4gnt60Dc77xBFWlFXic+IxkxokfuS64vEb54LLAs+MmOnUPHGEWCy0sdLGrGhqxFPEUVXTKV/IeKxy3uKslaus2Sd/YTinr\
yxznWoYCSxiCRJEKKiihDJsxGjXSbGQovO4j3/I9UvkUshVAiPHAirQILt+8D/4PVsrPznhJYXjQOeL43yMAKFdoFFznO9jx2mcAMFn4Ep\
v+St1YOaT9FpLix4BfdvAxXVLU/aAyx1g8MmQTdmVglRCPg+8n9E3ZYGBW6BnzZtb8xynD0CaZpW8AQ4OgdECZa/7vLurfW7/3mnO7wdrXHK\
kGxJ8kAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+UMCRE4OBDcTzgAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4X\
AAAAFklEQVQI12N8cP8+AwMDEwMDAwMDAwAfkwKiW0UuOgAAAABJRU5ErkJggg==");

                txture.encoding = THREE.LinearEncoding;
                txture.needsUpdate = true;
                txture.magFilter = THREE.NearestFilter;
                TLF=THREE.LinearFilter;

                var mtrial = new THREE.MeshBasicMaterial({ map: txture});
                mtrial.map.minFilter = THREE.LinearFilter;
                
                mtrial.reflectivity=1;
                mtrial.refractionRatio=1;
                mtrial.opacity = 0.1;
                rstxt= txture;
                
                mtrial.name="mtrial_"+ row + "-" + col,
                rsmat= new THREE.TextureLoader();
                var geometry=new THREE.PlaneGeometry(c,c);
                    
                const plane = new THREE.Mesh( geometry, mtrial );
                plane.needsUpdate = true;
                plane.position.x =(c*col)-c;
                plane.position.y =-6;
                plane.position.z =(c*row)-c;

                plane.rotation.x = -Math.PI /2;
                
                plane.needsUpdate = true;
                //create a group and add the two cubes
                //These cubes can now be rotated / scaled etc as a group
                materialstjs.push(plane);
                rshgroup.add( plane);
                i++;
            }
        }

我有一个单独的函数来获取瓦片并用这些瓦片更新rshgroup的材质。在用新的图像更新瓦片材质后，我将rshgroup添加到threejs的场景中。

function PrepareTiledGround(){

lon0 = (Math.min(...facades_lon))
lat0 = (Math.min(...facades_lat))
lon1 = (Math.max(...facades_lon))
lat1 = (Math.max(...facades_lat))

var zoom        = 19;
var top_tile    = lat2tile(lat1, zoom)-1;
var left_tile   = lon2tile(lon0, zoom)-1;
var bottom_tile = lat2tile(lat0, zoom)+1;
var right_tile  = lon2tile(lon1, zoom)+1;
var width       = Math.abs(left_tile - right_tile) + 1;
var height      = Math.abs(top_tile - bottom_tile) + 1;
var resolution  = 156543.03 * Math.cos(lat0/180*Math.PI) / (2 ** zoom) *256 // meters/tile
var lon0_tile   = tile2lon(left_tile, zoom)
var lat0_tile   = tile2lat(bottom_tile+1, zoom) //  bottom_tile+1 to get bottom (left) corner
var y_offset_facade = 0.01
    
// Creation of Tiled Ground
// Parameters
var xmin = -haversineDistance([lat0,lon0],[lat0,lon0_tile]);
var zmin = -haversineDistance([lat0,lon0],[lat0_tile,lon0]) ;
var xmax = xmin + width*resolution;
var zmax = zmin + height*resolution;
var precision = {
    "w" : 2,
    "h" : 2
};
var subdivisions = {
    'h' : height,
    'w' : width
};

  if((subdivisions.h*subdivisions.w)>rshgroup.children.length){
    
     while ((rshgroup.children.length)<(subdivisions.h*subdivisions.w)) {
        // code block to be executed
        var newModel = materialstjs[0].clone();
    newModel.material=materialstjs[0].material.clone()

        rshgroup.add(newModel);

        rshgroup.updateMatrix();
        rshgroup.updateWorldMatrix(true,true);

    }
    var maxrow=subdivisions.h
    var maxcol=subdivisions.w
    var i=0

    var twidth=(xmax-xmin)/subdivisions.w;
    var theight=(zmax-zmin)/subdivisions.h;
    var c=256;
    //for (var row = subdivisions.h-1; row >=0 ; row--) {
    for (var row = 0; row <subdivisions.h ; row++) {
        for (var col = 0; col < subdivisions.w; col++) {
            rshgroup.children[i].material.name="mtrial_"+ row + "-" + col,
            rshgroup.children[i].position.x =(c*col)-c;
            rshgroup.children[i].position.y =0;
            rshgroup.children[i].position.z =(c*row)-c;
                            
            i++;
        }}

        }else if((subdivisions.h*subdivisions.w)<rshgroup.children.length){
        var diff=(rshgroup.children.length-(subdivisions.h*subdivisions.w));
        
        while ((rshgroup.children.length)>(subdivisions.h*subdivisions.w)) {
            rshgroup.children[rshgroup.children.length-1].remove();
            
        }

}
 var xTileBase = left_tile // lon2tile(lon0, zoom);
 var yTileBase = bottom_tile //lat2tile(lat0, zoom);
 i=0
 var c =256;

for (var row = subdivisions.h-1; row >=0 ; row--) {
    for (var col = 0; col < subdivisions.w; col++) {
const placeholder = rsmat.load("https://b.tile.openstreetmap.org/" + zoom + "/" + (xTileBase + col) + "/" + (yTileBase - row) + ".png", function ( texture ) {
        } );

        
        rshgroup.children[i].material.map=placeholder;
        
        rshgroup.children[i].material.toneMapped=false;
        rshgroup.children[i].material.fog = false;
        rshgroup.children[i].material.map.needsUpdate = true;
        rshgroup.children[i].material.needsUpdate = true
    
        i++;
    }
}

tBox.setFromObject( rshgroup ).getCenter( rshgroup.position ).multiplyScalar( - 1 );
var object1 = scenetjs.getObjectByName( "dot" );
 object1.position.set(0,0,0);

rshgroup.matrixAutoUpdate = true;
rshgroup.updateMatrix();

scenetjs.add(rshgroup);

renderertjs.render(scenetjs, cameratjs);

}

我有一个单独的功能来加载glb模型到场景，但我想纠正的位置和规模，使其apprear正确

function LoadModels(){
lon0 = (Math.min(...facades_lon))
lat0 = (Math.min(...facades_lat))
lon1 = (Math.max(...facades_lon))
lat1 = (Math.max(...facades_lat))

var zoom        = 19;
var top_tile    = lat2tile(lat1, zoom)-1;
var left_tile   = lon2tile(lon0, zoom)-1;
var bottom_tile = lat2tile(lat0, zoom)+1;
var right_tile  = lon2tile(lon1, zoom)+1;
var width       = Math.abs(left_tile - right_tile) + 1;
var height      = Math.abs(top_tile - bottom_tile) + 1;
var resolution  = 156543.03 * Math.cos(lat0/180*Math.PI) / (2 ** zoom) *256 // meters/tile
var lon0_tile   = tile2lon(left_tile, zoom)
var lat0_tile   = tile2lat(bottom_tile+1, zoom) // bottom_tile+1 to get bottom (left) corner

var subdivisions = {
    'h' : height,
    'w' : width
};
console.log(subdivisions);
var xmin = -haversineDistance([lat0,lon0],[lat0,lon0_tile]);
var zmin = -haversineDistance([lat0,lon0],[lat0_tile,lon0]) ;

var xmax = xmin + width*resolution;
var zmax = zmin + height*resolution;

var twidth=(xmax-xmin)/subdivisions.w;
var theight=(zmax-zmin)/subdivisions.h;
var mwidth=(xmax-xmin);
var mheight=(zmax-zmin);

var c=256;
var tratio=256/c;

var aratio=((c/twidth)+(c/theight))/2;

console.log(aratio);

var y_offset_facade = 0.01

console.log(facades);
facades.rootnodes = {}

var i=0;
for (const facade of facades){
    var x = Math.sign(lon0) * haversineDistance([lat0,lon0],[lat0,facade.facade_lon])
    var y = Math.sign(lat0) * haversineDistance([lat0,lon0],[facade.facade_lat,lon0])
    facades.rootnodes[facade.id] = new Object();
    
    loadertjs.load( facade.file_url, function ( gltf ) {
        
        //gltf.scene.scale.set(facade.scale,facade.scale,facade.scale);
        
        
        //gltf.scene.position.z=y+facade.offset_y;
        //gltf.scene.position.x=x+facade.offset_x;
        gltf.scene.position.y=y_offset_facade + facade.offset_z
        
        
        gltf.scene.scale.set(facade.scale*aratio, facade.scale*aratio, facade.scale*aratio);
        
        //gltf.scene.translateY= y_offset_facade + facade.offset_z;
        gltf.scene.rotateY=Math.PI;
        
        facades.rootnodes[facade.id].id = facade.id;
        facades.rootnodes[facade.id].detail_mapajax_url = facade.detail_mapajax_url;
        gltf.scene.userData = facades.rootnodes[facade.id];
        
        facadegroup.add(gltf.scene)
        
        renderertjs.render(scenetjs, cameratjs);
        
    } );
    i++;

}

scenetjs.fog = null;
renderertjs.fog = null;

scenetjs.add( facadegroup );

renderertjs.render(scenetjs, cameratjs);

}
我想实现如babylonjs截图所示

当前情况如三个屏幕截图

所示
我已经校正了比例，现在它出现在彼此的顶部

所有型号

均存在位移问题

JavaScript

1条答案

按热度按时间
rvpgvaaj

rvpgvaaj1#

要在切片图上定位gltf模型，可使用与定位切片相同的方法。首先，为gltf模型创建一个新组，方法与为切片创建组的方法类似然后，使用Three.js提供的GLTFLoader加载gltf模型。加载模型后，使用加载的几何体和材料为其创建新网格，并设置其位置、旋转和任何其他必要的属性。最后，将网格添加到GLTF模型的新组中。
下面是一个示例，说明如何执行此操作：

var loader = new THREE.GLTFLoader();

loader.load('model.gltf', function (gltf) {
    var model = gltf.scene;

    model.position.x = 0; // set the x position of the model
    model.position.y = 0; // set the y position of the model
    model.position.z = 0; // set the z position of the model

    modelgroup = new THREE.Group();
    modelgroup.add(model);
    scene.add(modelgroup);
});

有了这个设置，你应该可以根据需要在你的tilemap上放置gltf模型。如果你有任何问题或者需要进一步的帮助，请随时提出来!

赞(0）分享  回复(0）举报  2023-02-11
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com