更新记录

1.0.0（2024-11-30） 下载此版本

first commit

平台兼容性

简介

此组件仅为快速展示 3D 模型的 demo。 使用 vue3 + three-platformize实现。 仅支持微信小程序，其他小程需可以参考three-platformize官网

相关库github地址 vue、three.js、three-platformize

使用说明

插件命名原则导致需要组件拼接一个前缀，请直接下载示例工程

• 将 components 下的 threeJs 组件移动到自己项目 omponents 下
• 下载 three-platformize

npm i three-platformize@1.133.3

• 引入到组件和相关工具方法

<template>
  <view class="container">
    <!-- onload事件代表初始化完毕 -->
    <Stage @onload="onload"> </Stage>
  </view>
</template>

import * as THREE from "three-platformize";
import Stage from "@/components/threeJs/stage.vue";
import useThreeJs from "@/components/threeJs/index.js";

const {
  getInstance, // 获取canvas、camera、等实例
  centerAndScale, // 用于调整模型大小和位置
  setEnv, // 设置环境贴图
  screenshot, // 截图
} = useThreeJs();

const loadModel = () => {
  const { group, loader } = getInstance();
  // 如果是.gltf+.bin+texture 请手动转成glb，相关nodejs代码可以参考使用说明
  loader
    .load(
      "https://www.ccnihao.fun/public-resource/DamagedHelmet.gltf.glb",
      (p) => {
        // 这里是加载进度
        // 需要后台正确的设置Content-Length才会有进度
      }
    )
    .then((gltf) => {
      group.add(gltf.scene);
      // 居中并缩放到合适的位置
      centerAndScale();
    });
};

// 初始化完毕，开始设置环境贴图，并加载模型
const onload = async () => {
  console.log("onload");
  // 设置环境贴图，传入hdr文件在线地址即可
  await setEnv(
    "https://www.ccnihao.fun/public-resource/studio_small_09_1k.hdr",
    false
  );
  // 加载模型逻辑
  loadModel();
};

工具相关

• obj 转 glb

# 先安装obj2gltf
npm i obj2gltf

// nodejs
const obj2gltf = require("obj2gltf");
const fs = require("fs");
const path = require("path");

(async () => {
  // obj 2 glb
  const outPath = "需要导出的路径";
  const inPath = "需要转换的obj文件路径";
  const options = {
    binary: true, // 不传默认导出gltf
  };
  const glb = await obj2gltf(inPath, options);
  const outFile = path.join(
    outPath,
    `newmodel.${options.binary ? "glb" : "gltf"}`
  );
  if (options.binary) {
    fs.writeFileSync(outFile, glb);
  } else {
    const data = Buffer.from(JSON.stringify(glb));
    fs.writeFileSync(outFile, data);
  }
})();

• gltf 转 glb

# 先安装gltf-pipeline
npm i gltf-pipeline

// nodejs
const gltfPipeline = require("gltf-pipeline");
const fsExtra = require("fs-extra");
const path = require("path");
(() => {
  // gltf 2 glb
  const outPath = "需要导出的路径";
  const inPath = "需要转换的obj文件路径";
  const gltfToGlb = gltfPipeline.gltfToGlb;
  const gltf = fsExtra.readJsonSync(inPath);
  const dir = path.dirname(inPath);
  const options = { resourceDirectory: dir };
  gltfToGlb(gltf, options).then(function (results) {
    const outFile = path.join(outPath, `newmodel.glb`);
    fsExtra.writeFileSync(outFile, results.glb);
  });
})();

常见问题