我通过遵循Discoverthreejs.com上的教程来学习如何使用Three.js。
我不担心通过three.js创建网格和几何体
问题是当我要加载来自搅拌器或其他设备的模型时。
我使用Blender 2.8创建模型并将其导出为.glb文件。我用gtlf查看器测试了文件，一切正常。
但是，一旦我想将Three.js模型导入我的网站，就会出现此错误：
我以为它来自我的模型，我试图将其导出为gltf或glb：相同的错误。
我下载了网上另一个可用的模型：相同的错误。
如果有帮助，我会使用parcel.js。
{
"name": "cedric_grvl","version": "1.0.0","description": "","main": "index.js","scripts": {
"clean": "rm -rf dist","dev": "parcel src/index.html --host 192.168.0.37 --open Firefox"
},"keywords": [],"author": "","license": "ISC","dependencies": {},"devDependencies": {
"autoprefixer": "^9.7.3","parcel-bundler": "^1.12.4","postcss-custom-properties": "^9.0.2","postcss-modules": "^1.4.1","postcss-preset-env": "^6.7.0","sass": "^1.23.7","three": "^0.111.0"
}
}
一切都在我的index.js中进行了测试。
这就是我所说的Three.js ：（在这里一切都很好）
*index.js*
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
这是Three.js的功能（教程）（都很好）
*index.js*
// these need to be accessed inside more than one function so we'll declare them first
let container;
let camera;
let controls;
let renderer;
let scene;
let mesh;
function init() {
container = document.querySelector( `[data-js="canvas"]` );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xFFFFFF );
createCamera();
createControls();
createLights();
createMeshes();
createRenderer();
// start the animation loop
renderer.setanimationLoop( () => {
update();
render();
} );
}
function createCamera() {
camera = new THREE.PerspectiveCamera(
35,// FOV
container.clientWidth / container.clientHeight,// aspect
0.1,// near clipping plane
100,// far clipping plane
);
camera.position.set( -4,4,10 );
}
function createControls() {
controls = new OrbitControls( camera,container );
}
function createLights() {
const ambientLight = new THREE.HemisphereLight(
0xddeeff,// sky color
0x202020,// ground color
5,// intensity
);
const mainLight = new THREE.DirectionalLight( 0xffffff,5 );
mainLight.position.set( 10,10,10 );
scene.add( ambientLight,mainLight );
}
function createMeshes() {
const geometry = new THREE.BoxBufferGeometry( 2,2,2 );
const material = new THREE.MeshStandardMaterial( { color: 0x800080 } );
mesh = new THREE.Mesh( geometry,material );
scene.add( mesh );
}
function createRenderer() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( container.clientWidth,container.clientHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;
renderer.physicallyCorrectLights = true;
container.appendChild( renderer.domElement );
}
// perform any updates to the scene,called once per frame
// avoid heavy computation here
function update() {
// Don't delete this function!
}
// render,or 'draw a still image',of the scene
function render() {
renderer.render( scene,camera );
}
// a function that will be called every time the window gets resized.
// It can get called a lot,so don't put any heavy computation in here!
function onWindowResize() {
// set the aspect ratio to match the new browser window aspect ratio
camera.aspect = container.clientWidth / container.clientHeight;
// update the camera's frustum
camera.updateProjectionmatrix();
// update the size of the renderer AND the canvas
renderer.setSize( container.clientWidth,container.clientHeight );
}
window.addEventListener( 'resize',onWindowResize );
// call the init function to set everything up
init();
问题在这里，也许我做错了。
const loader = new GLTFLoader();
const url = "./assets/models/test.glb";
// Here,'gltf' is the object that the loader returns to us
const onLoad = ( gltf ) => {
console.log( gltf );
};
loader.load( url,onLoad );
我一直在思考路径问题 我试过了：
'/src/assets/models/test.glb'
'assets/models/test.glb'
这是我的文件夹结构：
花点时间