基於threejs(webgl)的3D元宇宙雲展廳

饅頭發表於2023-02-25
JSWeb3D元宇宙

首先看看效果圖：

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

相關文章