ThreeJS之模型引入

最新推荐文章于 2025-05-20 13:59:22 发布

原创最新推荐文章于 2025-05-20 13:59:22 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

可视化大屏专栏收录该内容

5 篇文章

订阅专栏

由于未提供博客具体内容，无法给出包含关键信息的摘要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="./lib/three.js"></script>
<script src="./lib/js/loaders/OBJLoader.js"></script>
<script src="./lib/js/loaders/MTLLoader.js"></script>
<script src="./lib/js/controls/OrbitControls.js"></script>
<script src="./lib/js/libs/stats.min.js"></script>
<script src="./lib/js/libs/dat.gui.min.js"></script>

	function initModel() {
				//辅助工具
				// var helper = new THREE.AxesHelper(50);
				// scene.add(helper);
     var texture = new THREE.TextureLoader().load("./assets/56.png");
				var OBJLoader = new THREE.OBJLoader(); //obj加载器
				var MTLLoader = new THREE.MTLLoader(); //材质文件加载器
				MTLLoader.load('./assets/Transparencybox.mtl', function(materials) {
					// 返回一个包含材质的对象MaterialCreator  
					console.log("材质", materials);
					materials.preload();
					//obj的模型会和MaterialCreator包含的材质对应起来
					OBJLoader.setMaterials(materials);

					OBJLoader.load('./assets/Transparencybox.obj', function(obj) {
						//加载完obj文件是一个场景组，遍历它的子元素，赋值纹理并且更新面和点的发现了
						obj.children.forEach(function(child) {
							child.geometry.computeFaceNormals();
							child.geometry.computeVertexNormals();
							
							 console.log( child.material)
							if (child.name == "Cube.1") {
								 let material=new THREE.MeshPhongMaterial({
								              map:texture
								            })
								child.material=material;
								child.material.transparent = true;
								//edges = new THREE.EdgesGeometry(child.geometry);
								// line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({
								// 	color: 'rgb(58,255,250)',
								// 	fog:true
								// }));
								// child.line = line
								// scene.add(line);
							} else {
								// || child.name == "Cube.1"
							// 	// child.material = new THREE.MeshLambertMaterial({ color: 0x009688 })
							// 	var skyBoxMaterial = new THREE.MeshBasicMaterial({
							// 		map: texture,
							// 		side: THREE.DoubleSide
							// 	});
							// 	var skyBox = new THREE.Mesh(child.geometry, skyBoxMaterial);
							// 	scene.add(skyBox);
							}
						})
						scene.add(obj); //返回的组对象插入场景中
					})
				})