1000字范文 > HTML版的使用three.js加载obj和mtl文件并上贴图

HTML版的使用three.js加载obj和mtl文件并上贴图

时间：2021-05-16 13:19:36

效果图

全部代码

<!DOCTYPE html><html lang="en"><head><title>three.js webgl - loaders - OBJ MTL loader</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style></style></head><body><script src="jszip-master/dist/jszip.js"></script><script src="jszip-master/vendor/FileSaver.js"></script><script src="https://qdds666.oss-cn-/18559677286/three.min.js"></script><script src="https://qdds666.oss-cn-/18559677286/MTLLoader.js"></script><script src="https://qdds666.oss-cn-/18559677286/OBJMTLLoader.js"></script><script src="https://qdds666.oss-cn-/18559677286/OrbitControls.js"></script><script>console.log(THREE)// const ZipFiles = []// JSZipUtils.getBinaryContent('/AI//8/19/zip/6972277f46c24ac5a184167c2d930c7c.zip', function(err, data) {//if(err) {// throw err; // or handle err//}//JSZip.loadAsync(data).then(function (e) {// console.error(e)// for(let [i,j] of Object.entries(e.files)){// console.log(j)// // e.file(j.name).async("string").then(function (data) {// // ZipFiles.push(data)// // console.log(data)// // });// // if (JSZip.support.uint8array) {// // zip.file("hello.txt").async("uint8array").then(function (data) {// //// 使用二进制数组存储文本内容// // });// // }// }//});// });// let FN = ()=>{// new Promise((RES,REJ)=>{// RES({// OBJ:// })// })// }var container, stats;var camera, scene, renderer;var mouseX = 0,mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;init();// animate();function init() {container = document.createElement('div');document.body.appendChild(container);camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);camera.position.z = 1.5; //̹��40scene = new THREE.Scene();var light = new THREE.AmbientLight("#deebf7", 0.9); // soft white lightscene.add(light);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) {};var loader = new THREE.OBJMTLLoader();var textureLoader = new THREE.TextureLoader();loader.load('https://qdds666.oss-cn-/18559677286/mesh.obj', 'https://qdds666.oss-cn-/18559677286/mesh.mtl', function(object) {console.log(object)object.position.y = -0;object.scale.x = 4;object.scale.y = 4;object.scale.z = 4;textureLoader.load('mesh.png', function(texture) {object.children[0].material.map = texture;object.children[1].material.map = texture;object.children[0].material.needsUpdate = true;object.children[1].material.needsUpdate = true;scene.add(object);})var start = new Date().getTime(),delta;(function anime() {delta = new Date().getTime() - start;object.rotation.y = delta / 1000;renderer.render(scene, camera);// requestAnimationFrame(anime);return})();}, onProgress, onError);renderer = new THREE.WebGLRenderer();renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);window.addEventListener('resize', onWindowResize, false);var controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象controls.addEventListener('change', render); //监听鼠标、键盘事件}function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {requestAnimationFrame(animate);render();}function render() {camera.lookAt(scene.position);renderer.render(scene, camera);}setTimeout(()=>{render()},1000)</script></body></html>