three.js引擎基础知识—摄像机、场景及渲染器
一、three.js采用右手坐标系:
x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外,如下图右:
二、3D编程三要素:场景、渲染器、摄像机
1.场景:创建的物品和模型都需放入场景中
threejs创建场景的方式
scene = new THREE.Scene();
2.渲染器
(1)创建渲染器
renderer = new THREE.WebGLRenderer({antialias: true});
(2)设置渲染面积
renderer.setSize(width, height);
width和height是canvas的长宽
(3)将渲染的元素放入h5页面
document.getElementById('canvas-frame').appendChild(renderer.domElement)
renderer.domElement其实是封装好的一个canvas元素,所有显示内容都会渲染在此canvas上;
(4)背景
renderer.setClearColor(0xFFFF00, 1.0);
(5)渲染场景
renderer.clear(); renderer.render(scene, camera);
3.摄像机
摄像机分为透视投影摄像机和正交投影摄像机
(1)透视投影摄像机
THREE.PerspectiveCamera(fov, aspect, near, far);
fov是视景体竖直方向上的张角(是角度制而非弧度制)。
aspect等于width / height,是照相机水平方向和竖直方向长度的比值,通常设为canvas的横纵比例。
near和far分别是照相机到视景体最近、最远的距离,均为正值,且far应大于near。如下图,灰色部分是可渲染的区域。
(2)正交投影摄像机
THREE.OrthographicCamera(left, right, top, bottom, near, far)
这六个参数分别代表正交投影照相机拍摄到的空间的六个面的位置,这六个面围成一个长方体,我们称其为视景体(Frustum)。只有在视景体内部的物体才可能显示在屏幕上,而视景体外的物体会在显示之前被裁减掉。为了保持照相机的横竖比例,需要保证(right -left)与(top - bottom)的比例与Canvas宽度与高度的比例一致。near与far都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near的值设置得较小,far的值设置得较大,具体值视场景中物体的位置等决定。
创建及初始化摄像机举例:
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000); camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 20; camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 20; camera.lookAt({
x: 0,
y: 0,
z: 0
});
three.js引擎基础知识—摄像机、场景及渲染器的更多相关文章
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- 001/Node.js(Mooc)--基础知识
一.Node.js基础知识 node.js用C++语言编写. 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时 ...
- node.js的基础知识
第一部分知识: .命令行窗口(小黑屏).CMD窗口.终端.shell - 开始菜单 --> 运行 --> CMD --> 回车 - 常用的指令: dir 列出当前目录下的所有文件 c ...
- JS 引擎基础之 Shapes and Inline Caches
阅读下面这篇文章,需要20分钟: 一起了解下 JS 引擎是如何运作的吧! JS 的运作机制可以分为 AST 分析.引擎执行两个步骤: JS 源码通过 parser(分析器)转化为 AST(抽象语法树) ...
- three.js 第二篇:场景 相机 渲染器 物体之间的关系
w我用画画来形容他们之间的关系 场景就是纸张 相机就是我们的眼睛 物体就是在我们脑海中构思的那个画面 渲染器就是绘画这个动作 场景(Scene): 初始化:var scene = new THREE. ...
- EF基础知识小记四(数据库=>模型设计器)
EF基础知识小记三(设计器=>数据库)介绍了如何创建一个空设计器模型,并如何将模型同步到数据库的表中,本文则主要介绍如何将一个存在的数据库同步到模型设计器中.为了能快速的模拟这个过程,给出一下建 ...
- 【JS】基础知识
引言 在互联网的演化过程中,网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主. 2005年以后,互联网进入了Web2.0时代,各类似桌面软件的Web应用大 ...
- 二、js中基础知识
该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...
- js的基础知识笔记
目录 一.基本数据类型 二.函数 三.面向对象 一.基本数据类型 1.使用var声明变量.使用;结尾.使用{}表示代码块.使用驼峰式命名 2.变量是弱类型的,即并不严格要求声明变量的类型,一个变量可以 ...
随机推荐
- MySQL数据库基础(一)(启动/停止、登录/退出、语法规范及最基础操作)
1.启动/停止MySQL服务 启动:net start mysql 停止:net stop mysql 2.MySQL登录/退出 登录:mysql 参数:如果连接的是本地服务器,一般用命令:my ...
- linux中权限对文件和目录的作用
chmod 755 a.txt 文件: r:读取文件内容(cat more head tail) w:编辑,新增,修改文件的内容(vi,echo) 不包括删除文件:原因是只能对文件内容进行修改,而在l ...
- Linux下添加自定义脚本到开机自启动,标准rpm,举例:设置Apache自启动
写一个脚本,名字为:autostart.sh,放在/etc/init.d/目录下,赋予权限chmod +x /etc/init.d/autostart.sh 代码如下 #!/bin/sh #chkco ...
- 来了解并防范一下CSRF攻击提高网站安全
看一下我从网上找的原理图,结合举例描述,多看一遍你就知道怎么回事了. CSRF是什么呢?CSRF全名是Cross-site request forgery,是一种对网站的恶意利用,CSRF比XSS更具 ...
- 使用C#开发C/S框架高级版添加新项目实例
操作步骤: 1.新建一个项目CSFramework3.test,在CSFramework3.test项目下新建一个FormMan窗口(此时不需要继承). 2.按F7打开类,替换一下引用 using S ...
- 阿里巴巴十年Java架构师分享,会了这个知识点的人都去BAT了
1.源码分析专题 详细介绍源码中所用到的经典设计思想,看看大牛是如何写代码的,提升技术审美.提高核心竞争力. 帮助大家寻找分析源码的切入点,在思想上来一次巨大的升华.知其然,并知其所以然.把知识变成自 ...
- Flask下载文件
前言 由于最近在做文件管理模块的功能,所以难免会遇到文件上传下载这块的功能.不过文件上传那块是调用的OSS api,所以接触的不多. 文件的下载: 1. 接口返回真实的文件 这种情况比较简单, fla ...
- 浏览器兼容的JS写法总结
一.元素查找问题 1. document.all[name] (1)现有问题:Firefox不支持document.all[name] (2)解决方法:使用getElementsByName( ...
- 工业级GBDT算法︱微软开源 的LightGBM(R包正在开发....)
看完一篇介绍文章后,第一个直觉就是这算法已经配得上工业级属性.日前看到微软已经公开了这一算法,而且已经发开python版本,本人觉得等hadoop+Spark这些平台配齐之后,就可以大规模宣传啦~如果 ...
- eclipse中maven的run as打war包失败的问题
场景一: 由于某些原因,有的时候需要暂时在断网的情况下,或者更标准的说,是在连不上公司的maven公有仓库的情况下打包. 很长一段时间,我打包都是在eclipse中用run as在线打包,直到前不久一 ...