devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js 3D模型导入问题及解决方式_document.body.appendchild(renderer.domelement);

作者：笔触狂放9 | 2024-02-16 17:57:12

赞

踩

document.body.appendchild(renderer.domelement);

three.js 3D模型导入问题及解决方式

在研究three.js的3D模型导入的时候，遇到一些报错问题，虽然试用了官方介绍（https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models）及网上搜到的一些参考，仍然不能正确实现3D模型的导入和使用。经过报错信息的追踪和调整验证，找到原因和解决方式，和库文件的校正和正确使用方法有关，本篇会以GLTFLoader模型为例介绍正确导入方式，也是各种模型导入遇到问题的分析解决参考。
在这里插入图片描述

关键原因及解决方式

要实现正确的3D模型导入，有一些关键的前提和设置：

  1. 文件的访问权限，需要给页面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为设计的页面。

  2. 理清three.js库文件的结构
    仍然通过node.js安装three模块

npm install --save three

  • 1

然后在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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
<!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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

涉及到3D模型导入，需要引入模型导入文件，如GLTFLoader.js，这个时候就要注意，模型导入文件也有两份，分别在如下两个目录里：
在这里插入图片描述
其中js目录里的文件，用于< script src="">方式引入，jsm目录里的文件，用于<script type="module“>及import方式。以GLTFLoader.js为例（在js和jsm目录的各自的loaders子目录里），分别为：
在这里插入图片描述
在这里插入图片描述
因此对应引入的方式，要选择正确的模型导入文件，而且和three.js与three.module.js的命名有区分不同，js和jsm目录里的文件名是相同的，要注意区分。

  1. 校正模型导入文件
    以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';

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

注意最后部分，这里是存在问题的，如上所述，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';

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

注意将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);

  • 1
  • 2
  • 3

在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);

  • 1
  • 2
  • 3
  • 4
  • 5

完整的范例代码

这个范例以导入的蛇的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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

请添加图片描述

范例下载地址：
https://download.csdn.net/download/hwytree/65899106

The last, enjoy 3D design！
–End–

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/95844
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号