threejs学习心得(场景的搭建+运动模型导入)
来源:互联网 发布:vb编程界面 编辑:程序博客网 时间:2024/06/07 22:13
threejs学习心得(场景的搭建+运动模型导入)
毕业到工作已经半年了,以前一直在用有道笔记,今天第一次发表自己的技术博客,希望能得到个人的支持和鼓励,也希望以后能坚持。
- threejs的三大对象
- 代模型的导入
最近一段时间开始接触threejs相关的项目,一直在挖坑和填坑之中,于是用webpack+vue2.5+sass搭建了一个threejs的项目,物理引擎:基于ammo.js的pysijs物理引擎,采用的是vue-clic直接搭建:
npm install -g vue-cli vue init webpack threejstest cd threejstest npm install npm run dev
由于threejs需要引用three.js等一些依赖模块,将这些资源通过以静态资源的形式引入,注:npm包安装threejs模块尝试过,虽然可以导入获取全局模块,但是引入的其他包无法获取对应的three全局变量,接下来讲讲本人对threejs的一些理解:
一、threejs的三大对象:场景(scene)、相机(Camera)、灯光(Light)。
场景相当于生活中的三维空间,用于承载物体用的,所有的模型以及灯光,相机都放在这个场景中,相机相当于现实生活中人的眼睛,用来观看场景中物体用的,比如你在办公室这样的场景下,你的眼睛到处移动,所看到到办公室的人也不同。灯光可以让相机感受到反射到的光源,从而能够看到物体,想象一下在漆黑的夜晚,没有灯光即使周围有很多物体,我们人眼也不能看见。三维空间的构建:知道了三维空间所必须的元素后就可以开始项目了,这是需要一个div用来承载画布的功能,跟二维空间canvas一样,只是three.js把画布的生成集成在对象里面,通过THREE.WebGLRenderer能够直接生成相应的渲染环境,然后通过js的方法append到对应的标签中,使用过canvas的朋友应该都知道画布初始化需要设置其height和width,可以通过对象的setSize进行设置。
1.场景对象的创建:
threejs创建场景方法:let scene=THREE.Scene();
2.相机对象的创建
threejs提供两种相机,一种是正投影相机,一种是透视相机,考虑到三维场景的真实性,采用了透视相机:
let camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
fov推荐使用45,代表视场,aspect默认采用window.innerWidth/window.innerHeight,near为0.1,远面far默认1000,相机添加完成会需要添加到场景中,scene.add(camera);
3.灯光的生成:
threejs中有环境光、区域光、方向光,聚光灯、点光源几种光源,通过对应的方法可以构建,然后添加到场景中,最后通过scene.add(Light)方法将光源添加到对应场景中相机光源作为空间中的一种对象,可以通过position属性放在场景中的不同位置,根据自己需要可以随时变化。
二、模型的导出
1.模型导出(3Dmax,blender)
3Dmax制作obj模型和fbx模型,利用blender导出js模型格式,需要安装thress.js插件:
导出为js格式,可以直接修改文件后缀变成json格式,静态模型的导入和动画的导出选择可能需要有些区别,动画模型的导出需要选择anmation等参数,以便在引擎中进行调用。
2、模型加载到页面
在利用threejs来导入模型时候需要用到loader工具,obj模型采用OBJLoader.js,fbx模型的导入利用FBXLoader.js导入模块,为了便于模型在服务端的存储,通过blender将前面两种模型导出成json格式然后通过THREE.JSONLoader来导入json格式的模型数据:
mesh生成之后就是需要将mesh添加到场景中,通过scene的add方法可以直接将mesh添加到空间中,mesh在三维空间中有很多属性,position用来定义mesh在空间中的位置,rotation用来控制物体的旋转角度,scale可以对物体进行所以,这三个属性分别对应xyz三个方向上的操作。
let objectLoader = new THREE.JSONLoader(); objectLoader.load(modelurl, function (geometry, materials) { let loader = new THREE.TextureLoader(); loader.load(pngurl, function (texture) { let material = new THREE.MeshPhongMaterial({ map: texture }); geometry.center(); let mesh = new Physijs.BoxMesh(geometry, Physijs.createMaterial(material, 1, 0.1), 10); mesh.scale.set(9, 9, 9); if (rotationX && rotationY && rotationZ) { mesh.rotation.x = -Math.random() * 2 * Math.PI; mesh.rotation.y = -Math.random() * 2 * Math.PI; mesh.rotation.z = -Math.random() * 2 * Math.PI; } material.morphTargets = true; mesh.position.set(x, y, z); //(objectx.max.y - objectx.min.y) / 2 mesh.castShadow = true; mesh.receiveShadow = true; scene.add(mesh); }); });
位置更新的过程:mesh.position.x=40相当于将模型x移动到x=40的位置,对模型位置进行更新的时候需要加上mesh.__dirtyPosition=true;
3、动画模型的动画操作
// AnimationMixer 动画混合器 理解为这个动画各方面的一个管理者吧 let mixer = new THREE.AnimationMixer(mesh); // 骨骼动画的动作片段保存在geometry中 下面是读取第一个动画的方式,所以animationFirst是一个AnimationClip let firstAnimation = geometry.animations[0]; // AnimationAction是动作的schedule,之所以叫schedule是因为他可以控制着动画开始 结束 停止 这些流程 let action = mixer.clipAction(firstAnimation);// 接下来可以为这个动画配置一些细节了 action.clampWhenFinished = false;// 0会停止,这里设置为0默认停止,不停要注意其他的地方是否有设置这个值,值越大越快 action.setEffectiveTimeScale(0); action.play(); mesh.mixer = mixer; mesh.action = action;
先写到这里后面会继续补充,希望大家批评和指导,哈哈。
阅读全文
0 0
- threejs学习心得(场景的搭建+运动模型导入)
- 【threejs学习随记(三)】3D模型导入问题
- 创建你的第一个ThreeJs场景
- ThreeJS学习笔记(2)-场景创建
- WEBGl之THREEJS导入shp文件,生成三维模型
- 使用threejs点云秀出酷炫的模型效果
- 我的threejs学习笔记(八)——向场景添加颜色监听
- ThreeJS学习笔记(6)- 让场景动起来
- Threejs场景中的基本组件
- Threejs 的场景查看 - 几个交互事件库助你方便查看场景
- threejs 加载stl 或 obj 模型的代码模板
- 我的threejs学习笔记(一)
- 初级运动框架的搭建
- ThreeJS学习-模型角度限制
- threejs知识点:1.模型分析
- Unity3D导入的FBX场景模型设置物体之间的碰撞
- 02.ThreeJs开发指南-第二章-场景
- 我的第一个工程-一个台球游戏3-介绍篇一:场景模型的搭建
- 关于导入表
- HPU 1413: StarFarming [最短路]
- python tkinter练习小程序
- MapReduce典型编程场景——全局计数器
- 原型模型的简单使用
- threejs学习心得(场景的搭建+运动模型导入)
- centos7配置静态IP
- 【Django】Pycharm系列非传统输入网址的激活方式
- 数据库索引的使用,祝大家快速理解索引的含义
- python攻关之字符串操作
- android7.0 CTS的单项测试流程
- IntelliJ IDEA 下载 及 注册码
- 在html5中可以自定义属性
- Django笔记1