最近在研究 3D gltf glb 瀏覽的功能,網路上抓 cdn 有時版本功能不符預期
或是 meshopt draco ktx2 問題造成無法顯示
研究自行編譯 three.js 方法大概如下
git clone https://github.com/mrdoob/three.js.git
cd three.js
git checkout r155
npm install -g rollup
npm install
npm run build
mkdir dist
cp build/three.min.js dist/
# KTX2Loader
npx rollup examples/jsm/loaders/KTX2Loader.js --file dist/KTX2Loader.js --format iife
# DRACOLoader
npx rollup examples/jsm/loaders/DRACOLoader.js --file dist/DRACOLoader.js --format iife
# OrbitControls
npx rollup examples/jsm/controls/OrbitControls.js --file dist/OrbitControls.js --format iife
# GLTFLoader
npx rollup examples/jsm/loaders/GLTFLoader.js --file dist/GLTFLoader.js --format iife
# MeshoptDecoder
npx rollup examples/jsm/libs/meshopt_decoder.module.js --file dist/meshopt_decoder.js --format iife
將 libs 拷貝過來
cp examples/jsm/libs dist/ -R
編修
dist/KTX2Loader.js
dist/DRACOLoader.js
dist/OrbitControls.js
dist/GLTFLoader.js
第一行改成
(function (THREE) {
最後幾行改成
//exports.DRACOLoader = DRACOLoader;
// 掛到 THREE
THREE.DRACOLoader = DRACOLoader;
})(THREE);
然後把 three. 全取代成 THREE.
把 dist 搬出去改到 three.js/r155 就可以使用裡面的 cdn 資料,如
<script src="/inc/javascript/three.js/r155/three.min.js"></script>
<script src="/inc/javascript/three.js/r155/OrbitControls.js"></script>
<script src="/inc/javascript/three.js/r155/GLTFLoader.js"></script>
<script src="/inc/javascript/three.js/r155/DRACOLoader.js"></script>
<script src="/inc/javascript/three.js/r155/KTX2Loader.js"></script>
<script src="/inc/javascript/three.js/r155/meshopt_decoder.js"></script>