先看效果图:基于threejs的3D展厅基于threejs开发的3D展厅,可以自由摆放展品。支持gltf/glb格式github地址:https://github.com/mtsee/vr-hallinitializationinstance//instantiateconstvr=newVR3DHall({debugger:true,//启用debug模式,启用debug后可以选择modeExhibits,scaling,rotation,displacement,数据可以在console.log中查看maxSize:25,//最大帧尺寸movieHight:1.5,container:document.getElementById("root"),//containercameraOption:{//初始视角位置:{x:0,y:1.5,z:0},lookAt:{x:3,y:1.5,z:3},},onClick:(item)=>{console.log("你点击",item);},});载重厅模型//载重厅模型vr.loadHall({url:"./assets/room1/msg.gltf",planeName:"meishu01",position:{x:2,y:-0.2,z:2},scale:1,onProgress:(p)=>{console.log("加载进度",p);},});加载其他模型和动画//加载机器人vr.loadGLTF({url:"./assets/robot/robot.glb",position:{x:0,y:0,z:0},rotation:{x:0,y:-Math.PI/2,z:0},scale:0.2,}).then((gltf)=>{//创建动画vr.createAnimate(gltf,{animateIndex:0,durati上:5});});加载展览数据/***帧数据*@params{*id:'',//唯一标识符*position:{x:0,y:0,z:0},//模型位置*rotation:{x:0,y:0,z:0},//旋转角度*view:{x:0,y:0,z:0},//预览点的位置,移到这里,看position*scale:{x:0,y:0,z:0},//缩放*name:'name',//name*desc:'description',//description*url:'resourceurl',//资源url*类型:“图片”,//“gltf”|'图片'|'点';//gltf模型,图片模型,图片需要自定义frame*boxColor:'#fff',//framecolor*}*/exportconstdata=[{id:"1",//uniqueidentifierposition:{x:-0.6593699553026159,y:1.3866967899666711,z:7.067726292206915,},scale:{x:0.025612307671229958,y:0.025612307671229958,z:0.025612307671229958,},rotation:{x:0,y:0,z:0},view:{x:0,y:point0,z:0},//预览位置,移动到这里,查看位置name:"name",//namedesc:"description",//描述url:"/assets/pictures/1.jpg",//资源urltype:"picture",//'gltf'|'p图片'|'点';//gltf模型,图片模型,图片需要自定义边框boxColor:"#fff",//边框颜色},];//加载帧数据vr.loadItems(data);Navigation//切换到对应展品ID的视角vr.viewItem(itemId);打开和关闭重力感应打开和关闭重力感应必须在回调后执行//打开重力感应vr.gravity.open();//关闭重力感应vr.gravity.close()
