ThreeJS之模型引入

<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); //返回的组对象插入场景中
					})
				})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js引入模型,需要先将模型转换为Three.js可识别的模型格式,如JSON、OBJ、FBX等。常用的转换工具有Blender、Maya、3ds Max等。 以下是一个简单的例子,展示如何使用Three.js引入一个OBJ格式的模型: ```html <!DOCTYPE html> <html> <head> <title>Import Model</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three-obj-loader@2.0.0/src/ThreeOBJLoader.js"></script> <script> const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const loader = new THREE.OBJLoader(); loader.load( // resource URL 'path/to/model.obj', // called when resource is loaded function (object) { scene.add(object); }, // called when loading is in progresses function (xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // called when loading has errors function (error) { console.log('An error happened'); } ); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 在这个例子中,我们使用了Three.js的OBJLoader来加载OBJ格式的模型。我们先创建了一个场景、相机和渲染器,然后创建了一个OBJLoader对象,并使用它的load()方法加载模型文件。当模型加载完成后,我们将模型添加到场景中。最后,在每一帧更新时,我们调用渲染器的render()方法来渲染场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值