1,介绍
Threejs实现引入工厂模型,加载obj+mtl模型源码下载,可用于学习研究,二次开发
2,部分代码
// 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。 var scene = new THREE.Scene(); var cubeLoader = new THREE.CubeTextureLoader(); // 创建一个摄像机,它定义了我们正在看的地方 camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 将摄像机对准场景的中心 camera.position.x = 10; camera.position.y = 50; camera.position.z = 90; camera.lookAt(scene.position); var orbit = new THREE.OrbitControls(camera); // 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景 renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true, }); renderer.setClearColor(new THREE.Color("#0e0934")); renderer.setSize(window.innerWidth, window.innerHeight); // 基础光源,并应用到场景 scene.add(new THREE.AmbientLight("#ffffff", 1.5)); initModel(); // 将呈现器的输出添加到HTML元素 document.getElementById("dom").appendChild(renderer.domElement); // 启动动画 renderScene(); // 添加模型 function initModel() { var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath("assets/models/factory_new/") mtlLoader.load('factory.mtl', function(materials) { materials.preload(); var objLoader = new THREE.OBJLoader(); objLoader.setMaterials(materials); objLoader.load('assets/models/factory_new/factory.obj', function(object) { mesh = object; mesh.scale.set(0.0003, 0.0003, 0.0003); mesh.position.set(-200, 0.5, -200); scene.add(mesh); }, function(xhr) { let num = Math.floor(xhr.loaded / xhr.total * 100) / 100; NProgress.set(num) console.log('加载完成的百分比'+(xhr.loaded/xhr.total*100)+'%'); }); }); }