快速上手

使用此工具前你需要了解的技能

• three.js 基本使用
• 各小程序 / 小游戏 ( 例如：微信小程序 ) 的开发流程及相应配置。
• rollup / vite 的基本使用

从模板开始

你可以选择 uni-app 或 weapp-vite 作为基础框架的模板，然后参照模板内包含基本的使用用例和插件配置进行开发。

如遇下载失败，你也可以手动到 github 代码仓库根据对应分支下载模板。

使用 uni

npx degit minisheeep/threejs-miniprogram-template#uni-ts my-uni-three

使用 weapp-vite

npx degit minisheeep/threejs-miniprogram-template#weapp-vite my-weapp-three

微信小游戏

npx degit minisheeep/threejs-miniprogram-template#wechat-game-ts my-minigame-three

如有其他需要集成的框架模板，你也可加群联系我们

已有项目集成

目前只支持在基于 rollup / vite 进行开发的项目中使用，后续会推出没有这个限制的版本。

首先需要在项目下的 .npmrc 文件添加以下配置，因为这些依赖包并没有发布在 npm 官方仓库中。

.npmrc

@minisheep:registry=https://npm.minisheep.cn

然后在命令行中执行以下命令：

pnpm

pnpm i @minisheep/mini-program-polyfill-core @minisheep/three-platform-adapter

npm

npm i @minisheep/mini-program-polyfill-core @minisheep/three-platform-adapter

yarn

yarn add @minisheep/mini-program-polyfill-core @minisheep/three-platform-adapter

它将会安装两个依赖，用于补全小程序执行环境缺失的一些 DOM / BOM / WEB API，和辅助开发的 rollup 插件。

详情请查看 mini-program-polyfill-core 和 three-platform-adapter 文档。

安装依赖后，首先你需要在你的 vite 或 rollup 配置文件中添加以下插件:

import threePlatformAdapter from '@minisheep/three-platform-adapter/plugin'; 
export default {
  plugins: [
    //...
    threePlatformAdapter() // 详细配置见使用文档
    //...
  ]
}

再根据对应小程序平台在项目入口按需添加以下代码：

wechat

import '@minisheep/mini-program-polyfill-core/wechat-polyfill'; // 微信专用
import { adapter } from '@minisheep/three-platform-adapter';
import { wechat } from '@minisheep/three-platform-adapter/wechat'; // 微信专用
// THREEGlobals 是插件中 prefixName 的默认值，你也可以改成你自己定义的
adapter.useAdapter(wechat).patch('THREEGlobals');

其他

//更多平台将在后续支持

然后你就能开始你的 three.js 开发之旅了。 不过与在 web 中进行开发相比，仍有一些小小的区别，请查看 下一篇。