2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 67 Three.js 导入OBJ格式的模型

67 Three.js 导入OBJ格式的模型

时间:2018-11-26 20:24:40

相关推荐

67 Three.js 导入OBJ格式的模型

简介

OBJ是一种简单的三维文件格式,由Wavefront Technologies创建。它是使用最广泛的三维文件格式,用来定义对象的几何体。MTL文件常同OBJ文件一起使用。

Three.js还有一个可定制的OBJ导出器,叫做OBJExporter.js,可以用来将Three.js中的模型导出一个OBJ文件。

实现过程

案例查看地址:/blog/threejs/-03-19/127.html

首先需要将OBJLoader.js插件引入。

<script src="/lib/js/loaders/OBJLoader.js"></script>

然后实例化对象

var loader = new THREE.OBJLoader();

在回调中,设置纹理已经更新法向量

loader.load("/lib/assets/models/pinecone.obj",function (loadedMesh) {var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});// 加载完obj文件是一个场景组,遍历它的子元素,赋值纹理并且更新面和点的发现了loadedMesh.children.forEach(function (child) {//给每个子元素赋值纹理child.material = material;//更新每个子元素的面和顶点的法向量puteFaceNormals();puteVertexNormals();});//模型放大一百倍loadedMesh.scale.set(100, 100, 100);//添加到场景当中scene.add(loadedMesh);});

案例代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style></head><body onload="draw();"></body><script src="/lib/three.js"></script><script src="/lib/js/loaders/OBJLoader.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><script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth, window.innerHeight);//告诉渲染器需要阴影效果renderer.setClearColor(0xffffff);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);camera.position.set(0, 40, 50);camera.lookAt(new THREE.Vector3(0,0,0));}var scene;function initScene() {scene = new THREE.Scene();}//初始化dat.GUI简化试验流程var gui;function initGui() {//声明一个保存需求修改的相关数据的对象gui = {};var datGui = new dat.GUI();//将设置属性添加到gui当中,gui.add(对象,属性,最小值,最大值)}var light;function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.PointLight(0xffffff);light.position.set(0,0,100);//告诉平行光需要开启阴影投射light.castShadow = true;scene.add(light);}function initModel() {//辅助工具var helper = new THREE.AxesHelper(50);scene.add(helper);//加载OBJ格式的模型var loader = new THREE.OBJLoader();loader.load("/lib/assets/models/pinecone.obj",function (loadedMesh) {var material = new THREE.MeshLambertMaterial({color: 0x5C3A21});// 加载完obj文件是一个场景组,遍历它的子元素,赋值纹理并且更新面和点的发现了loadedMesh.children.forEach(function (child) {child.material = material;puteFaceNormals();puteVertexNormals();});//模型放大一百倍loadedMesh.scale.set(100, 100, 100);scene.add(loadedMesh);});}//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转,右键按住平移,滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时,将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = true;//设置相机距离原点的最远距离controls.minDistance = 1;//设置相机距离原点的最远距离controls.maxDistance = 200;//是否开启右键拖拽controls.enablePan = true;}function render() {renderer.render( scene, camera );}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {//更新控制器render();//更新性能插件stats.update();controls.update();requestAnimationFrame(animate);}function draw() {initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}</script></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。