文档章节

Three.js之照相机Camera

任国庆
 任国庆
发布于 2016/05/11 19:40
字数 710
阅读 231
收藏 0

1、背景介绍

在网页显示出三维的效果,就要借助于视觉效果来实现,比如阴影、光照等。这里的Camera相当于人的眼睛,从坐标的那个视点去观察目标,相当于投影出立体感。这里首先说一下坐标。如下图所示:

z轴正方向指向屏幕外,x,y平面在屏幕上。坐标原点(0,0,0)默认为场景中心。照相机就是在这个坐标系中定义的。有两种投影方式:正交投影和透视投影。对于这两种投影具体介绍,请点击这里了解更多

                               透视投影图

                               正交投影图

2、正交投影照相机和透视投影照相机

2.1正交投影照相机

正交投影照相机(Orthographic Camera),构造函数:

OrthographicCamera( left, right, top, bottom, near, far )

left — Camera frustum left plane.
right — Camera frustum right plane.
top — Camera frustum top plane.
bottom — Camera frustum bottom plane.
near — Camera frustum near plane.
far — Camera frustum far plane.

实例演示:

           //创建场景
            var scene=new THREE.Scene();
            
            //创建相机
            var camera_Or=new THREE.OrthographicCamera(window.innerWidth/-2,window.innerWidth/2,window.innerHeight/2,window.innerHeight/-2,1,1000);
            //camera_Or.position.z=5;
            camera_Or.position.set(50,-20,50);
            camera_Or.lookAt(new THREE.Vector3(0,0,0))
            scene.add(camera_Or);
            
            drawAxes(scene);
            
            
            //创建渲染器
            var renderer=new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            
            //创建立方体
            var geometry=new THREE.BoxGeometry(100,100,100);
            var material=new THREE.MeshBasicMaterial({color:0x00ff00
            ,wireframe:true
            });
            var cube=new THREE.Mesh(geometry,material);
            scene.add(cube);
            
            
            //渲染场景
            var render=function(){
            requestAnimationFrame(render);
            renderer.render(scene,camera_Or);
            }
            
            render();

实例效果图:

2.2透视投影照相机

透视投影照相机(Perspective Camera)的相关构造函数:

PerspectiveCamera( fov, aspect, near, far )

fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.

示例代码:

/创建场景
			var scene=new THREE.Scene();
			
			//创建相机
			//var camera_Or=new THREE.OrthographicCamera(window.innerWidth/-2,window.innerWidth/2,window.innerHeight/2,window.innerHeight/-2,1,1000);
			//camera_Or.position.z=5;
			//camera_Or.position.set(50,-20,50);
			//camera_Or.lookAt(new THREE.Vector3(0,0,0));
			
			var camera_Pe = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
			//camera_Pe.position.x=5;
			//camera_Pe.position.y=5;
			//camera_Pe.position.z=10;
			//设置照相机的位置
			camera_Pe.position.set(3,5,5);
			//照相机默认是沿着z轴负方向观察的,改为(10,10,10)这个观察点后肯定看到的是一片漆黑
			//所以,应该指向原点才能看到物体
			camera_Pe.lookAt(new THREE.Vector3(0,0,0));
			//camera_Pe.view=(0,0,5);
			scene.add(camera_Pe);
			
			//drawAxes(scene);
			
			
			//创建渲染器
			var renderer=new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth,window.innerHeight);
			document.body.appendChild(renderer.domElement);
			
			//创建立方体
			var geometry=new THREE.BoxGeometry(1,1,1);
			var material=new THREE.MeshBasicMaterial({color:0x00ff00
			,wireframe:true
			});
			var cube=new THREE.Mesh(geometry,material);
			scene.add(cube);
			
			
			//渲染场景
			var render=function(){
			requestAnimationFrame(render);
			renderer.render(scene,camera_Pe);
			}
			
			render();

实例效果图:

3、注意事项

照相机默认的观察方向是指向z轴负方向(就是朝向屏幕),所以当变化坐标以后,就要将照相机指向原点,才能观察到物体。这里调用了lookAt()函数。用法:camera.lookAt(new THREE.Vector3(0,0,0));这里你可以改成自己的坐标。摄像机观察方向问题一定要调整正确,否则观察不到物体!!!


参考资料:

http://my.oschina.net/u/1455799/blog/213962

http://www.ituring.com.cn/article/48665

© 著作权归作者所有

任国庆
粉丝 1
博文 3
码字总数 2398
作品 0
石家庄
程序员
私信 提问
Three.js学习笔记

Three.js是一个3D JavaScript库。Three.js封装了底层的图形接口,使得程序员能够在无需掌握繁冗的图形学知识的情况下,也能用简单的代码实现三维场景的渲染。 一个典型的Three.js程序至少要包...

superPershing
2017/02/16
0
0
初识three.js,搭建three.js+vue.js项目

WebGL 简介:WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0(OpenGL for Embedded Systems,OpenGL嵌入式版本,针对手机、游戏机等...

mfnn
2018/09/23
0
0
Three.js实现太阳系八大行星的自转公转

一. Three.js框架简介 Three.js是用javascript编写的WebGL第三方库,运用three.js框架写3D程序,就如同在现实生活中观察一个3D场景一样,让人置身其中。介绍three.js必须提到它的三大组件,Sc...

Xiu_
04/09
0
0
Three.js WebGL 绘制流程(一)

Three.js 中3D 物体 都继承于 Object3D; 而构造一个3D 物体 需要 提供两个对象 即Gemotry 几何体 和 Material 材质。 Gemotry 中 vertices 决定定点的 列表, face 决定面的构成, faceVert...

李勇2
2012/09/18
240
0
使用THREE.js制作一款3D游戏

使用THREE.js制作一款3D游戏 本文是基于某位大神使用three.js设计游戏的学习心得与知识分享 The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js 前言 这个学期选修了...

黄河滴滴
2018/10/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象编程

1、类和对象 类是对象的蓝图和模板,而对象是实例;即对象是具体的实例,类是一个抽象的模板 当我们把一大堆拥有共同特征的对象的静态特征(属性)和动态特征(行为)都抽取出来后,就可以定...

huijue
今天
8
0
redis异常解决 :idea启动本地redis出现 jedis.exceptions.JedisDataException: NOAUTH Authentication required

第一次安装在本地redis服务,试试跑项目,结果却出现nested exception is redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required错误,真是让人头疼 先检查一...

青慕
今天
17
0
Spring 之 IoC 源码分析 (基于注解方式)

一、 IoC 理论 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。 二、IoC方式 Spring为IoC提供了2种方式,一种是基于xml...

星爵22
今天
25
0
Docker安装PostgresSql

Docker安装PostgresSql 拉取docker镜像 # docker pull postgres:10.1010.10: Pulling from library/postgres9fc222b64b0a: Pull complete 38296355136d: Pull complete 2809e135bbdb: Pu......

Tree
今天
9
0
内容垂直居中

方法一: 采用上下 padding 形式,将内容放置在垂直居中 .line { padding: 2% 0; text-align: center; height: 5px;} <div class="line"> 内容垂直居中</div> 方法二: 采......

低至一折起
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部