<Three.js>(第二节)添加长方体
一、实验内容
上一节已经搭好了实验的框架。这一节我们将在屏幕上显示一些几何图形。如下图所示,我们将在屏幕上显示一个正方体。
二、实验步骤
1、创建场景
正像上一节所说,首先我们需要建一个场景,场景就是类似舞台,有了舞台演员才有地方表演嘛。新建场景很简单,通过Three.js库提供的Scene类,我们可以新建一个场景对象。正如一下的代码:
//创建场景
scene = new THREE.Scene();
2、新建相机
类似拍电影。有了场景后,我们需要一台摄像机,对场景上的表演进行拍摄。有的场景很大,我们不可能把场景上的所有事物都同时显示在出来。可以根据自己的需要,调整相机的角度、区域等拍摄想展示的区域。
我们通过PerspectiveCamera(透视相机)新建一个相机对象。需要的参数fov, aspect, near, far。如下图[引用ISUX]所示。
THREE.PerspectiveCamera(fov, aspect, near, far)
fov: 表示相机的夹角;
aspect:水平长度和竖直长度的比值;
near:拍摄最近距离
far:拍摄最远距离
//创建一个摄像机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//fov, aspect, near, far
camera.position.set(15, 16, 13);//位置
camera.lookAt(scene.position);//对准的焦点
lookAt函数:相机对准的点。类似聚焦的概念。
附:有投影相机、正交相机,后面会详细讲。
3、创建渲染器
THREE.WebGLRenderer()
通过WebGLRenderer()创建渲染器。当然有多种渲染器。
//添加一个渲染器
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
渲染器的作用就是把场景上的3维,显示到2维屏幕上去。
setClearColor:设置渲染颜色(背景底色)
setSize:渲染面大小(在二维平面上的窗口大小)
4、添加长方体
//添加长方体
var geometry = new THREE.BoxGeometry(6, 4, 6);
var matarial = new THREE.MeshLambertMaterial({color: 'red'});
var cube = new THREE.Mesh(geometry, matarial);
scene.add(cube);
要显示一个长方体。首先我们要做的是创建一个几何图形。我们通过BoxGeometry创建一个长方体。需要的参数分别是长、宽、高。
创建了几何图形后,接下来,我们需要给这个几何图形添加一个具体的材质。这里我们使用MeshLambertMaterial给该长方体添加一个具体的材质。
材质的不同,直接影响到灯光照后看到的效果。类似我们现实生活中。有一些材质反光性很强,看起来很光滑,而有一些材质散光。通过MeshLambertMaterial,我们需要给该材质指定一种颜色,在这里,我们使用了红色作为长方体的材质颜色。正如我们前面看到的效果。
(材质、贴图,我们会在后面的内容详细讨论)
有了几何图形和指定的材质,我们可以通过Mesh创建一个我们所能看到的长方体。
5、添加灯光
前面我们完成了创建场景、向场景中添加物品,也有了摄像机。但我们还缺少一个-灯光。与我们的世界一样,原本是黑暗的,我们需要灯光的照射,物体通过反射,把场景上的事物反馈到我们的大脑。
下面我们通过SpotLight创建灯光效果。
var light = new THREE.SpotLight(0xffffff);
light.position.set(20, 30, 20);
scene.add(light);
THREE.SpotLight(color);
通过color,我们给灯光指定了颜色。
灯光有多种灯光效果,类似我们显示生活,有环境光,平行光,点光源等,我们会在后面详细讨论。
三、总结
这一节,我们主要讨论的是怎样显示一个长方体。我们通过创建scene,向scene中添加要显示的元素cube,要想看到场景上的事物,得给场景添加light。场景上的事物都具备了后,我们需要添加一个camera。
四、完整代码
js:
var renderer;
var scene;
var camera;
function init() {
//创建场景
scene = new THREE.Scene();
//创建一个摄像机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
camera.position.set(15, 16, 13);
camera.lookAt(scene.position);
scene.add(camera);
//添加一个渲染器
renderer = new THREE.WebGLRenderer();//渲染
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
//添加长方体
var geometry = new THREE.BoxGeometry(6, 6, 6);
var matarial = new THREE.MeshLambertMaterial({color: 'red'});
var cube = new THREE.Mesh(geometry, matarial);
scene.add(cube);
var light = new THREE.SpotLight(0xffffff);
light.position.set(20, 30, 20);
scene.add(light);
document.body.appendChild(renderer.domElement);
render();
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
window.onload = init;
<Three.js>(第二节)添加长方体的更多相关文章
- Centos7 Openstack - (第二节)添加认证服务(Keystone)
Centos7 install Openstack - (第二节)添加认证服务(Keystone) 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 【精编重制版】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)
说明 本教程是,原文章发布系统教程的精编重制版,会包含每一节的源码,以及修正之前的一些错误.因为之前的教程只做到了评论模块,很多地方还不完美,因此重制版会修复之前的一些谬误和阐述不清的地方,而且,后期 ...
- 《ASP.NET MVC 5 破境之道》:第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构
第一境 ASP.Net MVC5项目初探 — 第二节:MVC5项目结构 接下来,我们来看看,VS为我们自动创建的项目,是什么样子的? 可以通过菜单中[View]->[Solution Explo ...
- seajs第二节,seajs各模块依赖关系
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 源码讲解 node+mongodb 建站攻略(一期)第二节
源码讲解 node+mongodb 建站攻略(一期)第二节 上一节,我们完成了模拟数据,这次我们来玩儿真正的数据库,mongodb. 代码http://www.imlwj.com/download/n ...
- QQ登录整合/oauth2.0认证-03-对第二节的代码改进
---------------------------目录---------------------------------- QQ登录整合/oauth2.0认证-01-申请appkey和appid ...
- centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab :启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /dev/tty(0,6) 模拟终端 /dev/pts/# grub-md5-crypt 给grub加密码 initrd 第二节课
centos单用户 救援 运行级别 yum,单用户模式,救援模式,inittab :启动级别 e2fsck wetty mingetty 物理终端 /dev/console 虚拟终端 /d ...
- CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第二节
原文链接 第二节:第一个内核 Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个国家级的实验室进行大型并 ...
随机推荐
- linux下面增加磁盘空间
1.先看看情况 [root@localhost tmp]# fdisk -l Disk /dev/sda: 3221 MB, 3221225472 bytes 255 heads, 63 sector ...
- 转:EL表达式
简介: EL 全名为 Language ,JSP2.0 之后,EL 成为了标准规范.因此,只要是支持Servlet2.4/JSP2.0 的容器,就都可以在JSP 网页中直接使用EL . 除了JSP2. ...
- vmware workstation中的NAT配置
宿主机:win10: IP:192.168.1.101 GW:192.168.1.1 以太网2(VMNET8) IP:192.168.100.1 GW:nonevmware中的虚拟网络设置(NAT): ...
- 优动漫PAINT基础系列之图层模式
在绘画软件优动漫PAINT中,笔刷工具属性中的消除锯齿变成灰色无法选择了?铅笔绘制没有压感?快来改改图层模式~ 优动漫PAINT下载:http://www.dongmansoft.com/xiazai ...
- 简洁的MVC思想框架——Nancy(Session的使用)
前文提到关于Nancy中GET和POST以及外部引用图片,css和JS的文件等操作.今天所讲的是Nancy关于Session相关操作. Session作为web开发中极其重要的一部分,而Nancy中S ...
- JQ 添加节点和插入节点的方法总结
转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...
- java 导出百万数据到excel
@RequestMapping("export") public void write(HttpServletRequest request,HttpServletResponse ...
- Python3+Gurobi使用教程(一)
Gurobi使用教程 1.Gurobi使用的一般框架 from gurobipy import * try: m=Model('modelname') except GurobiError: prin ...
- 微信小程序的开启授权,当单机取消授权后 再次授权
//单机去搜索 toSearch:function(){ this.getLocation(res => { console.log('成功') wx.navigateTo({ url: `.. ...
- visual studio 2015下python编程的中文字符串问题
visual studio 2015强大的编程功能,编写起python来也是非常方便的,但其对中文字符的支持不是很好,经常发生莫名其妙的错误,最常见的错误是不报错,也不执行代码. 代码简单如下: x= ...