three相机在模型上_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;
先写到这里后面会继续补充,希望大家批评和指导,哈哈。
three相机在模型上_threejs学习心得(场景的搭建+运动模型导入)相关推荐
- 新生学大学计算机心得,大一新生上学期学习心得体会
大一新生上学期学习心得体会 大一第一学期结束,你有什么想说的?看看下面的大一新生上学期学习心得体会吧! 大一新生上学期学习心得体会[1] 时光在不经意间消逝,伴随着一颗慢慢成熟的心. 在清华的第一个学 ...
- three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师 梁神 一.背景 粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
- three相机在模型上_一步步带你实现web全景看房——three.js
1. 基本概念 在THREEjs中,渲染一个3d世界的必要因素是场景(scene).相机(camera).渲染器(renderer).渲染出一个3d世界后,可以往里面增加各种各样的物体.光源等,形成一 ...
- three相机在模型上_深入理解Three.js中透视投影照相机PerspectiveCamera
前言 在开始正式讲解透视摄像机前,我们先来理理three.js建模的流程.我们在开始创建一个模型的时候,首先需要创建我们模型需要的物体,这个物体可以是three.js中已经为我们封装好的,比如正方体, ...
- three相机在模型上_实例讲解Three.js加载外部模型
本文主要介绍了Three.js外部模型加载的教程详解,在文章给大家补充介绍了three.js 外部模型加载json的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家. 1. 首 ...
- three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- 从零开始一起学习SLAM(8)相机成像模型
文章目录 小孔成像 纷繁复杂的坐标系 针孔相机成像原理 相机畸变 此文发于公众号:计算机视觉life. 原文链接:从零开始一起学习SLAM | 相机成像模型 上一篇文章<从零开始一起学习 ...
- 相机标定(三)-相机成像模型
>>>文章索引<<< 相机标定(一)-原理及内参.外参 相机标定(二)-畸变校正,张正友标定法 相机标定(三)-相机成像模型 1 人眼&相机结构 1.1 类 ...
- CUDA上深度学习模型量化的自动化优化
CUDA上深度学习模型量化的自动化优化 深度学习已成功应用于各种任务.在诸如自动驾驶汽车推理之类的实时场景中,模型的推理速度至关重要.网络量化是加速深度学习模型的有效方法.在量化模型中,数据和模型参数 ...
最新文章
- 中国出版业,九死一生
- mysql的连接leftjion,mysql的表连接(left|right)join
- NAT的完全分析及其UDP穿透的完全解决方案
- python全球购代码_理解python的unicode字符串
- Vue安装依赖npm install时报错问题解决方法
- Java客户端操作zookeeper:获取/节点的子节点代码示例
- Vue项目中公用footer组件底部位置的适配问题
- Angular No provider for EffectsRootModule错误消息的出现原因和修复方式
- 计算机视觉——openCV的简介
- 组合数学中的项链计数
- cassandra 数据量_Cassandra和Spark的数据处理简介
- ssh相互访问不用密码
- 大数据分析要避免哪些错误
- 我为什么要理解storm的一些概念
- LQR轨迹跟踪——基于ROS系统和全向车实验平台
- 服务器raid的原理以及怎么恢复数据
- 【微信小程序系列:三】前端实现微信支付与代扣签约
- 计算机win10无法打开小键盘,win10数字小键盘开机不启动解决方法
- 【后缀数组+???】BZOJ3654 图样图森破
- 单片机计算机基础知识总结,自学单片机第九篇:基础知识--计算机基础操作