欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

程序员文章站 2022-05-02 20:03:48
...

1.引入包三个包

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
第三个是辅助控制缩放 移动的

2.在vue 组件内 import文件

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

3.在mound钩子函数内调用

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
文件

let that = this;
			this.windowHalfX = window.innerWidth / 2;
			this.windowHalfY = window.innerHeight / 2;

			let divs = document.createElement('div');
			this.container = document.querySelector('.Modal');
			this.container.appendChild(divs);
			// 场景
			this.scene = new THREE.Scene();
			// 相机
			this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
			this.camera.position.z = 1.5;
			// 灯光
			var light = new THREE.AmbientLight('#deebf7', 0.9); // soft white light
			this.scene.add(light);
			// 渲染器
			this.renderer = new THREE.WebGLRenderer();
			this.renderer.setSize(window.innerWidth, window.innerHeight);
			// this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
			divs.appendChild(this.renderer.domElement);

			var onProgress = function(xhr) {
				if (xhr.lengthComputable) {
					var percentComplete = (xhr.loaded / xhr.total) * 100;
					console.log(Math.round(percentComplete, 2) + '% downloaded');
				}
			};
			var onError = function(xhr) {
				console.log(xhr)
			};

			var MTLLoaders = new MTLLoader();
			var OBJLoaders = new OBJLoader();



			var textureLoader = new THREE.TextureLoader();
			MTLLoaders.load('https://xxxxxxxxx.com/18559677286/mesh.mtl', (materials) =>{
				console.log(materials);
				materials.preload();
				// OBJLoaders.setMaterials(materials)
				OBJLoaders.load(
					'https://xxxxxxxxx.com/18559677286/mesh.obj',
					(object)=> {
						console.log(object);
						// 设置旋转中心点
						object.children[0].geometry.computeBoundingBox();
						object.children[0].geometry.center();
						object.scale.set(3, 3, 3);
						object.position.y = 0;
						// this.scene.add(materials);
						this.scene.add(object);
						this.renderer.render(this.scene, this.camera);
						// requestAnimationFrame(anime);

						textureLoader.load('https://xxxxxxxxx/18559677286/mesh.png', (texture)=> {
							console.log(texture, object);
							object.children[0].material.map = texture;
							// object.children[1].material.map = texture;
							object.children[0].material.needsUpdate = true;
							// object.children[1].material.needsUpdate = true;
							this.scene.add(object);
							this.renderer.render(this.scene, this.camera);
						});
					},
					onProgress,
					onError
				);
			});

			window.addEventListener('resize', onWindowResize, false);
			const controls = new OrbitControls(this.camera, this.renderer.domElement)
			controls.enableDamping = true
			controls.dampingFactor = 0.25
			controls.enableZoom = false
			controls.addEventListener('change', render); //监听鼠标、键盘事件

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;
				this.camera.aspect = window.innerWidth / window.innerHeight;
				this.camera.updateProjectionMatrix();
				this.renderer.setSize(window.innerWidth, window.innerHeight);
			}

			function render() {
				that.camera.lookAt(that.scene.position);
				that.renderer.render(that.scene, that.camera);
			}
			render();

4.效果图

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

另:HTML页面使用three加载obj文件和mtl文件