three.js 3D模型导入问题及解决方式
在研究three.js的3D模型导入的时候，遇到一些报错问题，虽然试用了官方介绍（https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models）及网上搜到的一些参考，仍然不能正确实现3D模型的导入和使用。经过报错信息的追踪和调整验证，找到原因和解决方式，和库文件的校正和正确使用方法有关，本篇会以GLTFLoader模型为例介绍正确导入方式，也是各种模型导入遇到问题的分析解决参考。
关键原因及解决方式
要实现正确的3D模型导入，有一些关键的前提和设置：
-
文件的访问权限，需要给页面js要引用的ES6模块化文件等提供可访问的权限，官方的介绍在https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally 。
这里采用node.js文件服务器的方式，即:
注意不要用npm install http-server -g的方式，改为npm install http-server --save的方式，随工程目录走比较好。然后在工程目录执行http-server . -p 8000即开启如下的文件访问服务器。
注意这个文件访问服务器是比较简单的一种，只对运行此服务器的当前目录支持比较好，所以后面相关的html文件，js文件以及模型文件都要放在工程根目录，不要分子目录放置。这里不介绍用其它可配置服务器实现如express等以实现分目录放置，非关键因素。后面通过chrome浏览器输入如http://127.0.0.1:8000/demo.html的方式即可进行页面访问,这里demo.html为设计的页面。 -
理清three.js库文件的结构
仍然通过node.js安装three模块
npm install --save three
然后在node_modules里找到three模块进入，
其中build里有三个文件，是three的主文件：
其中three.js是html文件里通过< script src=" ">方式引入所用的文件；而three.module.js是通过<script type="module“>及import方式所用的文件，不能混用。
下面是两种方式实现three.js引入的官方例程方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="./three.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
animate();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from "./three.module.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
animate();
</script>
</body>
</html>
涉及到3D模型导入，需要引入模型导入文件，如GLTFLoader.js，这个时候就要注意，模型导入文件也有两份，分别在如下两个目录里：
其中js目录里的文件，用于< script src="">方式引入，jsm目录里的文件，用于<script type="module“>及import方式。以GLTFLoader.js为例（在js和jsm目录的各自的loaders子目录里），分别为：
因此对应引入的方式，要选择正确的模型导入文件，而且和three.js与three.module.js的命名有区分不同，js和jsm目录里的文件名是相同的，要注意区分。
- 校正模型导入文件
以import方式进行导入时，jsm里的模型导入文件如GLTFLoader.js，前面部分会先对three的部分进行引入：
import {
AnimationClip,
Bone,
Box3,
BufferAttribute,
BufferGeometry,
ClampToEdgeWrapping,
Color,
DirectionalLight,
DoubleSide,
FileLoader,
FrontSide,
Group,
ImageBitmapLoader,
InterleavedBuffer,
InterleavedBufferAttribute,
Interpolant,
InterpolateDiscrete,
InterpolateLinear,
Line,
LineBasicMaterial,
LineLoop,
LineSegments,
LinearFilter,
LinearMipmapLinearFilter,
LinearMipmapNearestFilter,
Loader,
LoaderUtils,
Material,
MathUtils,
Matrix4,
Mesh,
MeshBasicMaterial,
MeshPhysicalMaterial,
MeshStandardMaterial,
MirroredRepeatWrapping,
NearestFilter,
NearestMipmapLinearFilter,
NearestMipmapNearestFilter,
NumberKeyframeTrack,
Object3D,
OrthographicCamera,
PerspectiveCamera,
PointLight,
Points,
PointsMaterial,
PropertyBinding,
Quaternion,
QuaternionKeyframeTrack,
RGBFormat,
RepeatWrapping,
Skeleton,
SkinnedMesh,
Sphere,
SpotLight,
TangentSpaceNormalMap,
Texture,
TextureLoader,
TriangleFanDrawMode,
TriangleStripDrawMode,
Vector2,
Vector3,
VectorKeyframeTrack,
sRGBEncoding
} from 'three';
注意最后部分，这里是存在问题的，如上所述，three.js对应的文件，不是import方式，并且如果不是有路径管理的机制存在，也不能直接改为from ‘three.module’, 而要改为完整的相对路径from ‘./three.module.js’ ，这部分导入功能才正常，否则会有如下报错：
因此用于import方式的GLTFLoader.js文件，前面部分需要更正为：
import {
AnimationClip,
Bone,
Box3,
BufferAttribute,
BufferGeometry,
ClampToEdgeWrapping,
Color,
DirectionalLight,
DoubleSide,
FileLoader,
FrontSide,
Group,
ImageBitmapLoader,
InterleavedBuffer,
InterleavedBufferAttribute,
Interpolant,
InterpolateDiscrete,
InterpolateLinear,
Line,
LineBasicMaterial,
LineLoop,
LineSegments,
LinearFilter,
LinearMipmapLinearFilter,
LinearMipmapNearestFilter,
Loader,
LoaderUtils,
Material,
MathUtils,
Matrix4,
Mesh,
MeshBasicMaterial,
MeshPhysicalMaterial,
MeshStandardMaterial,
MirroredRepeatWrapping,
NearestFilter,
NearestMipmapLinearFilter,
NearestMipmapNearestFilter,
NumberKeyframeTrack,
Object3D,
OrthographicCamera,
PerspectiveCamera,
PointLight,
Points,
PointsMaterial,
PropertyBinding,
Quaternion,
QuaternionKeyframeTrack,
RGBFormat,
RepeatWrapping,
Skeleton,
SkinnedMesh,
Sphere,
SpotLight,
TangentSpaceNormalMap,
Texture,
TextureLoader,
TriangleFanDrawMode,
TriangleStripDrawMode,
Vector2,
Vector3,
VectorKeyframeTrack,
sRGBEncoding
} from './three.module.js';
注意将three.module.js和GLTFLoader.js拷贝出来放在工程根目录，并将GLTFLoader.js进行校正。
4.校正loader导入方式
官方的导入方式介绍：
然而，实际导入时报错，打开用于import导入方式的GLTFLoader.js文件，看最后面部分为：
再看文件里GLTFLoader的定义是class：
因此，直接将类通过import { GLTFLoader } from 方式引入是容易有问题的，要调整引入方式为：
import * as GLTFLOADER from "./GLTFLoader.js";
const tdm_loader = new GLTFLOADER.GLTFLoader();
console.log("three dimension model loader: ",tdm_loader);
在chrome的控制台可以看到GLTFLoader已正确加载：
4.校正模型特征加载层级
这里以加载一条蛇的3D模型作说明，将这条蛇的geometry取出来用，官方案例的另一个模型是以gltf.scene.children[ 0 ].geometry来获得geometry，然后我们对于这条蛇的gltf导入结构进行查看，geometry所在的层次更深一些：
因此根据实际情况，要用gltf.scene.children[0].children[0].geometry才能访问到这个geometry。这部分代码如下：
tdm_loader.load('./Snake.gltf', function (gltf){
console.log("loaded model: ", gltf);
const geometry = gltf.scene.children[0].children[0].geometry;
console.log("used geometry: ", geometry);
完整的范例代码
这个范例以导入的蛇的3D模型为外形进行旋转，其它部分与官方three基本范例保持一致，便于分析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from "./three.module.js";
import * as GLTFLOADER from "./GLTFLoader.js";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const tdm_loader = new GLTFLOADER.GLTFLoader();
console.log("three dimension model loader: ",tdm_loader);
tdm_loader.load('./Snake.gltf', function (gltf){
console.log("loaded model: ", gltf);
const geometry = gltf.scene.children[0].children[0].geometry;
console.log("used geometry: ", geometry);
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const py = new THREE.Mesh( geometry, material );
scene.add(py);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
py.rotation.x += 0.01;
py.rotation.y += 0.01;
}
animate();
}, function (xhr){
console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
},function (error){
console.error(error);
});
</script>
</body>
</html>
范例下载地址：
https://download.csdn.net/download/hwytree/65899106
The last, enjoy 3D design！
–End–
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
