首先看看效果图：
基于 threejs 的 3D 展厅
基于 threejs 开发的 3D 展厅，展品能够自在摆放。反对 gltf/glb 格局
github地址：https://github.com/mtsee/vr-hall
初始化实例
// 实例化const vr = new VR3DHall({ debugger: true, // 开启调试模式，开启调试模式后能够选中展品，缩放，旋转，位移，console.log中能够查看到数据 maxSize: 25, // 画框最大尺寸 movieHight: 1.5, container: document.getElementById("root"), // 容器 cameraOption: { // 初始视角 position: { 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, duration: 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: '名字', // 名字 * desc: '形容阐明', // 形容阐明 * url: '资源url', // 资源url * type: 'picture', // 'gltf' | 'picture' | 'dot'; // gltf模型，图画模型，图画要自定义画框 * boxColor: '#fff', // 画框色彩 * } */export const data = [ { id: "1", // 惟一标识 position: { 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: 0, z: 0 }, // 预览点的地位，挪动到这里，看向position name: "名字", // 名字 desc: "形容阐明", // 形容阐明 url: "/assets/pictures/1.jpg", // 资源url type: "picture", // 'gltf' | 'picture' | 'dot'; // gltf模型，图画模型，图画要自定义画框 boxColor: "#fff", // 画框色彩 },]; // 加载画框数据vr.loadItems(data);导览
// 切换到对应的展品ID的视角vr.viewItem(itemId);开启和敞开重力感应
开启敞开重力感应必须在 callback 后执行
// 开启重力感应vr.gravity.open(); // 敞开重力感应vr.gravity.close()