网站营销外包公司简介,网站设计电商运营,ppt中仿网站链接怎么做,wordpress 下拉菜单插件官方glTF模型案例
obj2gltf 的开发文档
第一步#xff1a;这里首先要将我们的.obj文件转换为.gltf文件
全局安装 npm install -g obj2gltf终端打开.obj文件所在的文件夹执行 obj2gltf -i model.obj -o model.gltf -t #xff08;-i model.obj对应你的obj文件的名字#x…官方glTF模型案例
obj2gltf 的开发文档
第一步这里首先要将我们的.obj文件转换为.gltf文件
全局安装 npm install -g obj2gltf终端打开.obj文件所在的文件夹执行 obj2gltf -i model.obj -o model.gltf -t -i model.obj对应你的obj文件的名字将生成gltf文件上传到阿里云(平常文件上传的地方我这里是阿里云)还要上传贴图照片这里的路径要注意(查看gltf里面的images的uri)我这里多加了一层路径textures比如gltf文件上传成功的路径是https://oos-cn.ctyunapi.cn/model/common/base/Block.gltf 那么在Block.gltf所在的目录下在建立一个textures文件夹里面就是放所有的贴图照片贴图照片的访问路径就是https://oos-cn.ctyunapi.cn/model/common/base/textures/Block_0_0.jpg。这里加载gltf.load()方法的时候会自己去访问
gltf文件部分内容如下 obj文件包含的内容如下:
实现代码如下
templatediv idcontainer stylewidth:100%;height:100%/div
/templatescript
export default {data() {return {}},mounted() {this.initMap()},methods: {initMap() {var map new AMap.Map(container, {viewMode: 3D,pitch: 30,rotation: 25,zoom: 16,center: [121.499809, 31.236666],// showBuildingBlock: false,// mapStyle: amap://styles/macaron,showIndoorMap: false});// 创建Object3DLayer图层var object3Dlayer new AMap.Object3DLayer();map.add(object3Dlayer);map.plugin([AMap.GltfLoader], function () {// var urlCity https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf;var urlCity https://oos-cn.ctyunapi.cn/model/common/base/2023-12-04/Block.gltf;// var urlCity /Block.gltfvar paramCity {position: new AMap.LngLat(121.499809, 31.233366), // 必须scale: 10, // 非必须默认1height: 1800, // 非必须默认0scene: 0, // 非必须默认0}var gltfObj new AMap.GltfLoader();gltfObj.load(urlCity, function (gltfCity) {// console.log(bb, gltfCity);gltfCity.setOption(paramCity);gltfCity.rotateY(180);gltfCity.rotateX(180);// gltfCity.rotateZ(120);object3Dlayer.add(gltfCity);});});},}
}
/scriptstyle
/style效果图
注意public下面的index.html要引入高德api 也可参考这篇文章 在高德地图上显示大疆智图导出的三维模型
