关于javascript:基于threejswebgl的3D元宇宙云展厅

首先看看效果图：

基于 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()