threejs让摄像机动起来

在webGL中文网学习threejs基础篇——让物体动起来中的第一个demo，入门到思考的路程（项目由vue编写）

一、初入——直接使用课程中的例子

<template><div id='demo3' class='demo'></div>
</template>
<script>
import * as THREE from 'three'
export default {data() {return {renderer:null,camera:null,scene:null,light:null,cube:null,width:0,heigh:0,r:800}},methods: {initThree(){this.width=document.getElementById('demo3').clientWidththis.height=document.getElementById('demo3').clientHeightthis.renderer=new THREE.WebGLRenderer({antialias:true})this.renderer.setSize(this.width,this.height)document.getElementById('demo3').appendChild(this.renderer.domElement)this.renderer.setClearColor(0xf5f5f5,1.0)},initCamera(){this.camera=new THREE.PerspectiveCamera(45,this.width/this.height,1,10000)this.camera.position.x=this.rthis.camera.position.y=0this.camera.position.z=0this.camera.up.x=0this.camera.up.y=1this.camera.up.z=0this.camera.lookAt(0,0,0)},initScene(){this.scene=new THREE.Scene()},initLight(){this.light=new THREE.AmbientLight(0xffffff)this.light.position.set(100,100,200)this.scene.add(this.light)this.light=new THREE.PointLight(0x00ff00)this.light.position.set(0,0,300)this.scene.add(this.light)},initObject(){let geometry=new THREE.CylinderGeometry(100,150,400)let material=new THREE.MeshLambertMaterial({color:0x00f600})let mesh=new THREE.Mesh(geometry,material)//mesh.position=new THREE.Vector3( 0, 1, 0 );mesh.position.x=0mesh.position.y=0mesh.position.z=0this.scene.add(mesh)},animations(){this.camera.position.x=this.camera.position.z+1this.renderer.render(this.scene,this.camera)requestAnimationFrame(this.animations)},threeStart(){this.initThree()this.initCamera()this.initScene()this.initLight()this.initObject()this.animations()}},mounted() {this.threeStart()},
}
</script>

我们现在结合图片来看下(ps:摄像机位置是800,0）
这个demo实现物体运动是让摄像机运动沿着y轴运动，以此达到物体看起运动的效果。再次我就产生了一个想法，我能不能让摄像机盯着物体做圆周运动，然后让我们进入第二节

二、提升——摄像机做圆周运动

因为摄像机y轴不改变（即高度没改变），所以就是简单的二维几何问题，废话不多说，直接代码

<template><div id='demo3' class='demo'></div>
</template>
<script>
import * as THREE from 'three'
export default {data() {return {renderer:null,camera:null,scene:null,light:null,cube:null,width:0,heigh:0,r:800,angle:0}},methods: {initThree(){this.width=document.getElementById('demo3').clientWidththis.height=document.getElementById('demo3').clientHeightthis.renderer=new THREE.WebGLRenderer({antialias:true})this.renderer.setSize(this.width,this.height)document.getElementById('demo3').appendChild(this.renderer.domElement)this.renderer.setClearColor(0xf5f5f5,1.0)},initCamera(){this.camera=new THREE.PerspectiveCamera(45,this.width/this.height,1,10000)this.camera.position.x=this.rthis.camera.position.y=0this.camera.position.z=0this.camera.up.x=0this.camera.up.y=1this.camera.up.z=0this.camera.lookAt(0,0,0)},initScene(){this.scene=new THREE.Scene()},initLight(){this.light=new THREE.AmbientLight(0xffffff)this.light.position.set(100,100,200)this.scene.add(this.light)this.light=new THREE.PointLight(0x00ff00)this.light.position.set(0,0,300)this.scene.add(this.light)},initObject(){let geometry=new THREE.CylinderGeometry(100,150,400)let material=new THREE.MeshLambertMaterial({color:0x00f600})//mesh.position=new THREE.Vector3( 0, 1, 0 );mesh.position.x=0mesh.position.y=0mesh.position.z=0this.scene.add(mesh)},animations(){this.angle++this.camera.position.x=this.r*Math.cos(this.angle*Math.PI/180)this.camera.position.z=this.r*Math.sin(this.angle*Math.PI/180)this.renderer.render(this.scene,this.camera)requestAnimationFrame(this.animations)},threeStart(){this.initThree()this.initCamera()this.initScene()this.initLight()this.initObject()this.animations()}},mounted() {this.threeStart()},
}
</script>

但是实际情况似乎和我预想似乎不大一样啊，怎么回事，为什么只有一小段时间有看得见物体。经过一番思考，我觉定多添加几个物体进行参考

initObject(){let geometry=new THREE.CylinderGeometry(100,150,400)let material=new THREE.MeshLambertMaterial({color:0x00f600})let pos=[[0,0,0],[-800,0,-800],[-800,1,800],[-1600,0,0]]for(var i=0;i<4;i++){let mesh=new THREE.Mesh(geometry,material)//mesh.position=new THREE.Vector3( 0, 1, 0 );mesh.position.x=pos[i][0]mesh.position.y=pos[i][1]mesh.position.z=pos[i][2]this.scene.add(mesh)}},

于是我增加了三个物体作为参照物，于是我确定了，原来是镜头没有改变（参考图）

但我了解的是this.camera.lookAt(0,0,0)让摄像头看着原点啊，当我一筹莫展时，直觉驱使我增加了一行代码

animations(){this.angle++this.camera.position.x=this.r*Math.cos(this.angle*Math.PI/180)this.camera.position.z=this.r*Math.sin(this.angle*Math.PI/180)//每帧都重新设置lookAt可以达到摄像机围绕物体旋转//this.camera.lookAt(0,0,0)this.renderer.render(this.scene,this.camera)requestAnimationFrame(this.animations)},

运行后我豁然开朗，修改位置后我需要重新制定摄像中心点，来调整偏转角

threejs让摄像机动起来相关推荐

webgl之3d动画
之前的几篇文章都是静态的,而这里主要介绍如何使物体动起来,并且学会使用性能监视器来监测性能. 而如果要让物体动起来,实际上我们是有两种方法的,第一种是让物体真的动起来,另外一种是让摄像机动起来这样物体 ...
UE4 Sequence添加基础动画效果（03-主序列的使用）
在上一篇的基础上添加一些摄像头的跟拍效果效果: 步骤: 1.鼠标右键新建 Animation->关卡序列命名为主序列 2.双击打开主序列 3.点击窗口->内容浏览器->内容浏览 ...
OGRE+PhysX仿魔兽世界摄像机
2013-12-01 16:18 485人阅读评论(0) 收藏举报 OGRE+PhysX仿魔兽世界摄像机(包含碰撞,跟随,防墙体穿透以及摄像头不被遮挡)的实现(10/7更新,封装了下) in Og ...
基于光流场的运动分析
图形图像处理领域,经常使用轮廓与颜色匹配或者是预测来跟踪,比较常用的是meanshift和IMM(交互式多模型)跟踪方法,而目前新兴的光流法跟踪已经慢慢走到了前台,因为它受光线干扰小,适用于前景变化复 ...
threejs粒子效果
threejs粒子效果有两种方法:THREE.Particle和THREE.ParticleSytem,THREE.Sprite.本案例中的粒子系统就是通过Sprite类来实现的. 初始化基本配置首 ...
计算机动漫与游戏技术工资,计算机动漫与游戏制作专业是学什么的
计算机动漫与游戏制作专业培养具有2D.3D动画制作.动漫游戏.影视后期制作.数字多媒体技术等知识与技能,具备一定的审美创意能力,能够承担电脑游戏制作.动画片制作.摄影摄像.影视制作.数字媒体交互设计等 ...
ThreeJs 3D编程
新版本的主流浏览器都已支持WebGL,这样不需要插件就能在浏览器中创建三维图形.但WebGL提供的接口过于复杂,直接使用来创建三维图形和动画非常繁琐.Three.js函数库将强大的功能融汇其中,方便使 ...
道路视频摄像机智能分析功能及分级要求
道路视频摄像机智能分析功能及分级要求 2020-12-31 发布中国智能交通产业联盟发布 2021-03-31 实施引言为规范道路视频摄像机智能分析的功能和分级要求,明确 ...
Web 3D机房，智能数字机房HTML5 WebGL(ThreeJS)匠心打造
在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口.目前主流的浏览器都有较好的支持,IE需要11.最近web 3D机房研发 ...
threejs 绘制球体_ThreeJs 绘制点、线、面
所有的三位物体都是由点构成,两点构成线,三点构成面,ThreeJs又如何绘制出点.线.面呢 ? 在ThreeJs中: 模型由几何体和材质构成模型以何种形式(点.线.面)展示取决于渲染方式 1. 几何 ...

threejs让摄像机动起来

一、初入——直接使用课程中的例子

二、提升——摄像机做圆周运动

threejs让摄像机动起来相关推荐

最新文章

热门文章