更新记录

1.0.4（2024-12-03） 下载此版本

页面还是乱，在修改一次

• 修复电脑端无法加载模型问题 目前测试下来是因为utils/loader.js 使用了uni.downloadFile 而pc端无法使用uni.downloadFile下载模型，原因未知

  const getHttpGltf = async (url, callback) => {
  // .......
  // 注释以下代码
  // const tempFilePath = await loadFile(url, callback) // 2024-12-3 目前pc小程序无法使用uni.downloadFile下载模型
  // .......
  }

• 修复切换模型时缩放错误 有人问如何切换模型，写示例发现的错误，在index.js中centerAndScale

  
  const centerAndScale = () => {
  const {
      group,
      camera,
      scene
  } = getInstance()
  // 新增，初始化一下
  group.position.set(0, 0, 0) // 需要复位一下，否则切换模型位置会不对
  group.scale.set(1, 1, 1) // 需要复位一下，否则切换模型位置会不对
  
  const boundingBox = new THREE.Box3().setFromObject(group);
  // .......
  }

- 新增切换模型示例
修改了index.vue中的loadModel方法

1.0.3（2024-12-03） 下载此版本

，上次更新页面全乱了，重新更新一下

• 修复电脑端无法加载模型问题 目前测试下来是因为utils/loader.js 使用了uni.downloadFile 而pc端无法使用uni.downloadFile下载模型，原因未知

  const getHttpGltf = async (url, callback) => {
  // .......
  // 注释以下代码
  // const tempFilePath = await loadFile(url, callback) // 2024-12-3 目前pc小程序无法使用uni.downloadFile下载模型
  // .......
  }

• 修复切换模型时缩放错误 有人问如何切换模型，写示例发现的错误，在index.js中centerAndScale

  
  const centerAndScale = () => {
  const {
      group,
      camera,
      scene
  } = getInstance()
  // 新增，初始化一下
  group.position.set(0, 0, 0) // 需要复位一下，否则切换模型位置会不对
  group.scale.set(1, 1, 1) // 需要复位一下，否则切换模型位置会不对
  
  const boundingBox = new THREE.Box3().setFromObject(group);
  // .......
  }

- 新增切换模型示例
修改了index.vue中的loadModel方法

1.0.2（2024-12-03） 下载此版本

• 修复电脑端无法加载模型问题 目前测试下来是因为utils/loader.js 使用了uni.downloadFile 而pc端无法使用uni.downloadFile下载模型，原因未知

const getHttpGltf = async (url, callback) => { // ....... // 注释以下代码 // const tempFilePath = await loadFile(url, callback) // 2024-12-3 目前pc小程序无法使用uni.downloadFile下载模型 // ....... }

- 修复切换模型时缩放错误
有人问如何切换模型，写示例发现的错误，在index.js中centerAndScale

```js
const centerAndScale = () => {
    const {
        group,
        camera,
        scene
    } = getInstance()
    // 新增，初始化一下
    group.position.set(0, 0, 0) // 需要复位一下，否则切换模型位置会不对
    group.scale.set(1, 1, 1) // 需要复位一下，否则切换模型位置会不对

    const boundingBox = new THREE.Box3().setFromObject(group);
    // .......
}

• 新增切换模型示例 修改了index.vue中的loadModel方法

平台兼容性

简介

此组件仅为快速展示 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);
  });
})();

常见问题

• ios端bounce特性问题

  // 在ios端即使页面尺寸刚好是100vw * 100vh 没有滚动条情况，也会出现拖动回弹的情况（就是页面可以拖动然后松开手指回到初始为止）
  // 这时在pages.json中对应的page添加disableScroll即可
  {
  "pages": [
      {
          "path": "pages/index/index",
          "style": {
              "navigationBarTitleText": "threeJs",
              "navigationStyle": "custom", // 隐藏原生导航栏
              "enablePullDownRefresh": false, // 禁止下拉刷新
              "disableScroll": true // 在内容刚好沾满屏幕的时候，ios设备可以拖动然后立马回弹，有些情况不是很好用。禁止ios页面回弹（bounce效果）
          }
      }
  ]
  }