使用three.js載入.obj格式的3d檔案

MieTuBrother發表於2020-11-26
JSOBJ3D

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>

相關文章