使用three.js加载.obj格式的3d文件_thress.js obj示例文件-优快云博客

本文链接：https://blog.youkuaiyun.com/MieTuBrother/article/details/110181418

qq群1003178873这些东西无法上传，加群后在群文件中

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/three.js"></script>
		<script src="js/OBJLoader.js"></script>
		<script src="js/MTLLoader.js"></script>
	</head>

	<body>
		<div>

			<script>
				function main(){
					initRender();//初始化渲染器
					initScene();//初始化相机
					initCamera();//初始化相机
					initModel();//向场景中添加.obj格式的模型
					animate();//更新画面
				}
				var renderer; //渲染器

				function initRender() {
					//创建渲染器，添加到dom当中, antialias（是否启用抗锯齿）
					renderer = new THREE.WebGLRenderer({
						antialias: true
					});
					//设置渲染器的尺寸
					renderer.setSize(window.innerWidth, window.innerHeight);
					//告诉渲染器需要阴影效果
					renderer.setClearColor(0xffffff);
					//将渲染器放置到页面当中
					document.body.appendChild(renderer.domElement);
				}
				
				var scene; //场景

				function initScene() {
					//创建场景
					scene = new THREE.Scene();
				}

				var camera; //相机

				function initCamera() {
					//创建相机，设置位置
					camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
					/*
			 PerspectiveCamera(fov?: number, aspect?: number, near?: number, far?: number)有四个参数，我做一下简单介绍，详情可自行查阅相关资料。
1.	fov:眼球张开的角度，0°时相当于闭眼。
2.	aspect:可视区域横纵比。
3.	near:眼睛能看到的最近垂直距离。
4.	far：眼睛能看到的最远垂直距离。
			*/
					//设置相机的位置
					camera.position.set(0, 40, 50);
					//暂时不知道有什么用，经测试删除后也没有影响，修改参数也没有影响
					//camera.lookAt(new THREE.Vector3(100, 50, 100));
				}

				function initModel() {

					//创建三维坐标轴，设置坐标轴延伸长度为50，红绿蓝-xyz
					var helper = new THREE.AxesHelper(50);
					//将三维坐标轴放入场景
					scene.add(helper);
					//创建mtl文件加载器
					var mtlLoader = new THREE.MTLLoader();
					//加载mtl文件，mtl文件中引用的图片路径需要改为相对路径
					mtlLoader.load('wb/3d/ChaHu.mtl', function(material) {
						//创建obj文件加载器
						var objLoader = new THREE.OBJLoader();
						//设置当前加载的纹理
						objLoader.setMaterials(material);
						//加载obj文件
						objLoader.load('wb/3d/ChaHu.obj', function(object) {
							//获取object文件中的第一个对象
							var wing1 = object.children[0];
							//设置不透明度
							wing1.material.opacity = 0.6;
							//设置是否透明
							wing1.material.transparent = true;
							//设置深度测试
							wing1.material.depthTest = false;
							//暂时不知道有什么用，经测试删除后也没有影响
							wing1.material.side = THREE.DoubleSide;
							scene.add(object);

						});
					});
				}
				//向场景中添加.obj格式的模型

				function animate() {
					//更新控制器
					//将场景对象和相机对象传入渲染器中完成图形渲染
					
					camera.position.set(0, 20, 100);//设置相机的x,y,z坐标,注意场景的左右是x，上下是y，前后是z
					//将函数放入动画处理函数中，该函数会根据情况调整调用频率，最终实现平滑动画的效果
					renderer.render(scene, camera);
					requestAnimationFrame(animate);
				}
				//更新画面
				main();
			</script>
		</div>
	</body>

</html>