Console returns Failed to load resource: the server responded with a status of 404 (Not Found), Error: fetch for "http://localhost:3000/xxx/models/ToyCar.glb" responded with 404: Not Found when loading .glb file to website. Scene is loading, but model is not. Those are the only errors.
I’m using Webpack 5.68.0, Three.js and WordPress localy running on MAMP server.
I’ve downloaded 3D model from https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/ToyCar/glTF-Binary to be sure that there is no problem with it.
example.js:
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Scene
const scene = new THREE.Scene()
// Objects
// Materials
const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color(0xff0000)
// 3d-model
const loader = new GLTFLoader();
loader.load( 'models/ToyCar.glb', function ( gltf ) {
console.log(glft)
scene.add( gltf.scene );
}, undefined, function ( error ) {
console.error( error );
} );
// Lights
const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
/**
* Sizes
*/
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight
// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()
// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})
/**
* Camera
*/
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)
// Controls
// const controls = new OrbitControls(camera, canvas)
// controls.enableDamping = true
/**
* Renderer
*/
const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
/**
* Animate
*/
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// Update objects
// Update Orbital Controls
// controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
app.js:
import "./example.js";
webpack.config.js:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var path = require('path');
// change these variables to fit your project
const jsPath= './js';
const cssPath = './css';
const outputPath = 'dist';
const localDomain = 'http://localhost:8888/jakubtrz-portfolio';
const entryPoints = {
// 'app' is the output name, people commonly use 'bundle'
// you can have more than 1 entry point
'app': jsPath + '/app.js',
'style': cssPath + '/main.scss',
};
module.exports = {
entry: entryPoints,
output: {
path: path.resolve(__dirname, outputPath),
filename: '[name].js',
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
// Uncomment this if you want to use CSS Live reload
new BrowserSyncPlugin({
proxy: localDomain,
//files: [ outputPath + '/*.css' ]
files: ['style.css', 'js/**/*.js', '**/*.php'],
injectCss: true,
}, { reload: false, }),
],
module: {
rules: [
{
test: /.s?[c]ss$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /.sass$/i,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: { indentedSyntax: true }
}
}
]
},
// Loads all 3D model files; add more based on your needs
{
test: /.(obj|gltf|drc|mtl|glb)$/i,
use: {
loader: "file-loader",
options: {
outputPath: "models/",
name: "[name].[ext]",
esModule: false
}
}
},
]
},
};
