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.变量是弱类型的,即并不严格要求声明变量的类型,一个变量可以 ...
随机推荐
- Linux 小记 — 网络管理
前言 前段时间需要配置一台私网 ECS 联外网,阿里云比较推荐的方案是创建一个 Nat 网关并绑定 EIP, 以此来统一所有 ECS 的网络出口.由于我已经拥有一台外网 ECS(不想多掏钱,且我自己的 ...
- 前端构建工具之gulp的安装和配置
在选择构建工具时,看到更多人推荐gulp,从此入了gulp的坑- 一.安装node环境 百度谷歌一下就有了,在终端中分别输入 node -v 和 npm -v,若显示node和npm的版本号则说明no ...
- 变态的IE
1.IE7及更早版本, unshift()方法总是返回undefined而不是数组的新长度.2.IE8及之前版本, 在catch语句中捕获的错误对象会被添加到执行环境的变量对象, 而不是catch语句 ...
- 回归模型效果评估系列1-QQ图
(erbqi)导语 QQ图全称 Quantile-Quantile图,也就是分位数-分位数图,简单理解就是把两个分布相同分位数的值,构成点(x,y)绘图:如果两个分布很接近,那个点(x,y)会分布在y ...
- java1环境与简介
java1环境与简介 Ⅰ 个人简介 陈鹏 联系方式:15828682774 2012 年至今,从事软件开发 5 年. 1 年新加坡海外工作经历. 先后在民企.外企.创业公司做过开发. 熟悉 JAV ...
- Tensorflow中实现BN为什么需要加入这个额外依赖?见CS231N作业源码
batch normalization in tensorflow requires this extra dependency 为什么加上这两句? extra_update_ops = tf.get ...
- Ubuntu上搭建Hadoop环境(单机模式+伪分布模式)
首先要了解一下Hadoop的运行模式: 单机模式(standalone) 单机模式是Hadoop的默认模式.当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,便保守地选 ...
- Xmind8 Pro安装教程 Windows
xmind是一款优秀的思维导图制作软件,这一点相信不用太多解释. 尤其作为测试人员导出测试用例为excel极其方便.网上xmind的破解方法加自己琢磨,重新整理了破解步骤. 亲测可以永久激活截止2 ...
- NLP+VS=>Image Caption︱自动生成图像标题技术论文+相关项目
读聪明人的笔记,是不是也能变聪明呢? Image Caption是一个融合计算机视觉.自然语言处理和机器学习的综合问题,它类似于翻译一副图片为一段描述文字. Image Caption问题可以定义为二 ...
- Access denied for user(这个几乎让我怀疑人生的异常)
昨天一时兴起,打算根据自己的某些想法,业余时间写一个简单的项目,用以巩固那些重要的知识,以及练手一些即将学习的技术. 然而才一开始,便有一盆冷水迎面而来,在搭建整个框架环境的时候竟然就被卡住了!主要是 ...