一、三大组件

在Three.js中,要渲染物体到网页中,我们需要3个组建:场景(scene)、相机(camera)和渲染器(renderer)。有了这三样东西,才能将物体渲染到网页中去。

记住关建语句:有了这三样东西,我们才能够使用相机将场景渲染到网页上去。

创建这三要素的代码如下:

var scene = new THREE.Scene();  // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
document.body.appendChild(renderer.domElement);

1、场景

在Threejs中场景就只有一种,用THREE.Scene来表示,要构件一个场景也很简单,只要new一个对象就可以了,代码如下:

var scene = new THREE.Scene();

var scene = new THREE.Scene();

场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

2、相机

另一个组建是相机,相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样,人站在不同位置,抬头或者低头都能够看到不同的景色。

场景只有一种,但是相机却又很多种。和现实中一样,不同的相机确定了呈相的各个方面。比如有的相机适合人像,有的相机适合风景,专业的摄影师根据实际用途不一样,选择不同的相机。对程序员来说,只要设置不同的相机参数,就能够让相机产生不一样的效果。

在Threejs中有多种相机,这里介绍两种,它们是:

透视相机(THREE.PerspectiveCamera)、这里我们使用一个透视相机,透视相机的参数很多,这里先不详细讲解。后面关于相机的那一章,我们会花大力气来讲。定义一个相机的代码如下所示:(已经迫不及待想看看相机的参数了,点这里)

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

3、渲染器

最后一步就是设置渲染器,渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器,代码如下所示:

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

注意,渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

4、添加物体到场景中

那现在,我们将一个物体添加到场景中:

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

代码中出现了THREE.CubeGeometry,THREE.CubeGeometry是什么东东,他是一个几何体,几何体由什么组成,已经不是本课的主要内容了,后面的课程我们会详细的学到。不过这里你只需要知道CubeGeometry是一个正方体或者长方体,究竟是什么,由它的3个参数所决定,cubeGeometry的原型如下代码所示:

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
width:立方体x轴的长度 height:立方体y轴的长度 depth:立方体z轴的深度,也就是长度

想一想大家就明白,以上3个参数就能够确定一个立方体。

剩下的几个参数就要费解和复杂一些了,不过后面我们会自己来写一个立方体,到时候,你会更明白这些参数的意义,这里你可以将这些参数省略。

5、渲染

终于到了最后一步,这一步做完后,就可以该干嘛干嘛去了。

渲染应该使用渲染器,结合相机和场景来得到结果画面。实现这个功能的函数是

renderer.render(scene, camera);

渲染函数的原型如下:

render( scene, camera, renderTarget, forceClear )

各个参数的意义是:

scene:前面定义的场景

camera:前面定义的相机

renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

6、渲染循环

渲染有两种方式:实时渲染和离线渲染 。

先看看离线渲染,想想《西游降魔篇》中最后的佛主,他肯定不是真的,是电脑渲染出来的,其画面质量是很高的,它是事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片,那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。

实时渲染:就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。下面就是一个渲染循环:

function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}

其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让rander()再执行一次,就形成了我们通常所说的游戏循环了。

如不能理解游戏循环,请在这里提问。

场景,相机,渲染器之间的关系

Three.js中的场景是一个物体的容器,开发者可以将需要的角色放入场景中,例如苹果,葡萄。同时,角色自身也管理着其在场景中的位置。

相机的作用就是面对场景,在场景中取一个合适的景,把它拍下来。

渲染器的作用就是将相机拍摄下来的图片,放到浏览器中去显示。他们三者的关系如下图所示:

1.three.js世界的4大要素的更多相关文章

  1. 从面向对象的角度重新认识JS世界

    一. 背景  距离上一篇JS文章已经20天,经重新总结发现,上一篇概况的有点浅显,适合初学js的入门了解,但对于已经学习js一段时间的人,或者是想系统的了解JS体系,接下来的文章可能会更有帮助. 该系 ...

  2. 总结:js世界中的特殊符号

    常用符号:+ ++ - -- || / /' && 等 这些基本上每天都能用到,但是 js 世界中有些特殊符号是不常用的,我也是偶然在阅读大神代码的时候发现的,一番查找之后得出了以下结 ...

  3. 如何在疲劳的JS世界中持续学习

    作者简介 cnfi 蚂蚁金服·数据体验技术团队 本文翻译自<Stay updated in JS fatigue universe>,并对内容有所补充和修改. 部分内容参考<HOW ...

  4. 第一章(欢迎进入node.js世界)

    本章内容 1:Node.js是什么 2:服务器端javascript 3:node的异步和事件触发本质 4:node为谁而生 5:node程序示例 1.1 node.js他的首次亮相是在2009年,非 ...

  5. js世界这么大,闭包想看看

    什么是闭包,为什么要用他?闭包是能够访问其他函数作用域的函数.我们来分析下句子成分(语文大神),闭包是函数,js函数的作用域分为全局作用域,局部作用域,eval作用域,并没有块级作用域形象的讲,每个函 ...

  6. 欢迎进入Node.js世界

    官网上(http://www.nodejs.org )给Node下的定义是:”一个搭建在Chrome JavaScript 运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动 ...

  7. 步入vue.js世界

    一.遇见vue.js 1.1 Vue.js是什么? Vue.js 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.Vue.js通过简单的 ...

  8. JS 继承总结

    ES里面没有真正的继承,但是能通过某些手段达到继承效果,从而让一个类拥有另外一个类的方法  类 =>构造函数 继承描述某语言环境---魔兽世界 哈!其实我没玩过  魔兽世界里面 有Humen类  ...

  9. Google V8编程详解(五)JS调用C++

    http://blog.csdn.net/feiyinzilgd/article/details/8453230 最近由于忙着解决个人单身的问题,时隔这么久才更新第五章. 上一章主要讲了Google ...

随机推荐

  1. 怎么使用CURL传输工具发送get或者post指令

    1.先下载CURL,见网盘 2.使用,可以直接到doc,cd到curl.exe目录,然后执行 或者用脚本 Set exeRs = WshShell.Exec("curl.exe -F &qu ...

  2. 深度学习:Keras入门(一)之基础篇

    1.关于Keras 1)简介 Keras是由纯python编写的基于theano/tensorflow的深度学习框架. Keras是一个高层神经网络API,支持快速实验,能够把你的idea迅速转换为结 ...

  3. webpack的Hot Module Replacement运行机制

    使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...

  4. for(int a:i)在java 编程中的使用

    这种有冒号的for循环叫做foreach循环,foreach语句是java5的新特征之一,在遍历数组.集合方面,foreach为开发人员提供了极大的方便. foreach语句是for语句的特殊简化版本 ...

  5. DotNetCore跨平台~问题~NETCoreAPP, Version=v1.0' compatible with one of the target runtimes: 'win10-x64

    回到目录 新建console项目之后,编译程序出现以下错误: Can not find runtime target for framework '.NETCoreAPP, Version=v1.0' ...

  6. HDU 2203 亲和串(KMP)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=2203 题目: 亲和串 Time Limit: 3000/1000 MS (Java/Others)   ...

  7. Python爬虫从入门到放弃(十七)之 Scrapy框架中Download Middleware用法

    这篇文章中写了常用的下载中间件的用法和例子.Downloader Middleware处理的过程主要在调度器发送requests请求的时候以及网页将response结果返回给spiders的时候,所以 ...

  8. Linux下protobuf的编译与安装【各种奇葩问题】

    1.下载源码 首先,从github上下载protobuf的源码,地址:https://github.com/google/protobuf,我选择下载2.5.0版本. 2.编译protobuf 2.1 ...

  9. java中常用的包、类、以及包中常用的类、方法、属性----sql和text\swing

    java中常用的包.类.以及包中常用的类.方法.属性 常用的包 java.io.*; java.util.*; java.lang.*; java.sql.*; java.text.*; java.a ...

  10. 如何制作一个完美的全屏视频H5

    写在前面的话: 最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能     不! 知!道! :( 嘘!真不知道的也继续看下去,有收获 ↓ ) So,搞懂这个并不难. 这篇文章将带你从头到尾了解H5 ...