我正在使用Three.js,并尝试从Blender导入3D模型,同时还在使用Webpack。我正在尝试加载GLB文件,但无法使其正常工作。它现在将文件添加到构建的dist文件夹中,但未更改JavaScript文件中的文件路径。
以下是我的文件:
webpack配置
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
watch: true,
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.(png|jpe?g|gif|glb|gltf)$/i,
loader: 'file-loader',
options: {
publicPath: './',
},
},
{
test: /\.glb$/,
loader: '@vxna/gltf-loader',
options: { inline: true },
},
]
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html',
filename: './index.html'
})
]
}
我正在导入的 JavaScript 文件。
import * as THREE from 'three';
import gsap from "gsap";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import model from './fx.glb'
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
const renderer = new THREE.WebGLRenderer()
init()
const geometry= createShape()
scene.add(geometry)
const loader = new GLTFLoader()
loader.load('./fx.glb',(model)=>{
scene.add(model)
})
你有任何想法,我在这里做错了什么吗?
.gltf
文件可能引用了一个或多个.bin
文件 —— 不确定webpack是否也需要进行配置? - Don McCurdy{ test: /\.(glb|bin)$/, loader: 'file-loader', options: { esModule: false } }
- Jim