HTML版的使用three.js加载obj和mtl文件并上贴图
目录效果图全部代码另: [Vue版的](https://blog.csdn.net/weixin_44601948/article/details/108502580)效果图全部代码<!DOCTYPE html><html lang="en"><head><title>three.js webgl - loaders - OBJ MTL loader
·
效果图
全部代码
<!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="https://cdn.bootcss.com/jszip/2.1.0/jszip.min.js"></script> -->
<script src="jszip-master/vendor/FileSaver.js"></script>
<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/three.min.js"></script>
<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/MTLLoader.js"></script>
<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/OBJMTLLoader.js"></script>
<script src="https://qdds666.oss-cn-hangzhou.aliyuncs.com/18559677286/OrbitControls.js"></script>
<script>
console.log(THREE)
// const ZipFiles = []
// JSZipUtils.getBinaryContent('https://cdn.meixuan3d.com.cn/AI/2020/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; //̹��40
scene = new THREE.Scene();
var light = new THREE.AmbientLight("#deebf7", 0.9); // soft white light
scene.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-hangzhou.aliyuncs.com/18559677286/mesh.obj', 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/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>
另: Vue版的
更多推荐
已为社区贡献6条内容
所有评论(0)