three.js中文文档学习之创建场景


Posted in Javascript onNovember 20, 2017

什么是Three.js?

如果你正在读这篇文章,你可能对Three.js有一定的了解,那我们来简单地介绍下Three.js是什么.
Three.js是一个库,使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行,而一个Three.js只需要一点点代码.

本节目标是为 three.js 做简介。我们从使用旋转立方体来搭建场景开始。如果遇到困难需要帮助,页面底部有可参考的源码。

一个场景至少需要的三种类型组件

  • 相机/决定哪些东西将在屏幕上渲染
  • 光源/他们会对材质如何显示,以及生成阴影时材质如何使用产生影响
  • 物体/他们是在相机透视图里主要的渲染队形:方块、球体等

开始前

在计算机中保存如下 HTML 代码,并在 js 目录下包含 three.js,然后在浏览器中打开

<html>
 <head>
 <meta charset=utf-8>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  // Our Javascript will go here.
 </script>
 </body>
</html>

接下来的代码都会下载 script 标签中

创建示例场景

为了利用three.js来进行展示,我们需要三种元素:场景,摄像机,渲染器,以便来渲染摄像机中的场景。

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 );

让我们花点时间来解释发生了什么。我们现在创建了场景,摄像机和渲染器。

在 three.js 中有几种摄像机。我们暂时用的是 PerspectiveCamera (透视摄像机)

它的第一个属性是视图角(FOV),它 是能看见的视图范围,其值表示角度大小。

第二个属性是宽高比。大多数情况你想要使用被高除过之后的宽度,不然会发生像在宽屏电视上放旧电影的情况 —— 图像看起来被压扁了。

后面两个属性是近景面和远景面。只会渲染这两个面之间的区域。目前你不必关心这些,使用这些参数能提高性能。

接下来谈谈渲染器。这便是神奇之处。除了我们这里用的 WebGLRenderer 外, three.js 还提供一些渲染器用在不支持 WebGL 的老旧浏览器上。

除了创建渲染器实例,我们也需要设置应用渲染的尺寸。推荐使用填充整个应用的宽高 —— 本例中是浏览器窗口的宽高。对于性能优先的应用,你能使用 setSize 来设置更小的值,比如 window.innerHeight/2, window.innerWidth/2,会渲染一半的尺寸。

如果你想低分辨率地渲染整个尺寸,你可以设置 setSize 的第三个参数 — uodateStyle 为 <font color="#FF1493">false</font> ,如果 canvas 元素宽高都为 100%,则会以 1/2 分辨率渲染应用。

再尔,我们需要在 HTML 中添加被渲染的元素。渲染器通过 canvas 来给我们展示场景。

“都很好,但之前说的立方体呢” 让我们现在添加。

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

camera.position.z = 5;

我们需要 BoxGeometry来创建立方体。这个对象包含立方体所有的点(顶点)和填充(面)。我们以后会讨论。

除了几何体外,我们还需要材质为其上色。three.js 提供了一些材质,但我们暂且使用 MeshBasicMaterial。所有材质接受并应用一个包含所有属性的对象。为简单起见,我们仅仅提供一个颜色属性: 绿色 —— <font color="#00ff00">0x00ff00</font> 。和 CSS 和 PS 里的一样采用十六进制的颜色。

我们需要的第三个要素是 Mesh。 mesh 是一个将材质应用到几何体上的对象,然后我们能将其放入场景中,并自由移动。

当我们调用 scene.add() ,我们添加的会默认显示在坐标(0,0,0,)处。这会导致摄像机和立方体内部重叠。为了避免这点,我们简单地把摄像机往外移一点。

渲染场景

如果你在 HTML 文件中复制了如上代码,屏幕不会显示东西。因为我们还没渲染场景。所以我们需要调用渲染器或者动画循环。

function animate() {
 requestAnimationFrame( animate );
 renderer.render( scene, camera );
}
animate();

这会创建一个让渲染器每秒绘制一帧的循环。如果你对网页游戏编程不了解,你可能会说“为什么不 写setInterval 函数呢?”事实上,我们可以,但是 requestAnimationFrame 好处更多。最重要的好处是当浏览器切换到另一个标签页时,requestAnimationFrame 会暂停渲染,因此不会浪费宝贵的处理能力和电池寿命。

让立方体动起来

如果你插入了我们刚刚创建的代码,你应该会看见一个绿色的立方体。让它旋转起来不至于单调。

在animate 函数中的 renderer.render 上添加如下代码:

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

它会按帧运行(每秒60帧),并赋予立方体优雅的动画。基本上,应用运行时,你想移动或改变任何元素,必须通过动画循环。你当然在此处能调用其他函数,以免animate函数上百行代码结尾。

结果

恭喜!你现在创建好了第一个 three.js 应用。很简单,但总得突破。

完整代码参考如下。琢磨一下并深刻理解其工作机理

<html>
 <head>
 <title>My first three.js app</title>
 <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
 </style>
 </head>
 <body>
 <script src="js/three.js"></script>
 <script>
  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 );

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

  camera.position.z = 5;

  var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;

  renderer.render(scene, camera);
  };

  animate();
 </script>
 </body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
elementui的默认样式修改方法
Feb 23 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 #Javascript
VueJs 搭建Axios接口请求工具
Nov 20 #Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 #Javascript
详解vue+css3做交互特效的方法
Nov 20 #Javascript
解读ES6中class关键字
Nov 20 #Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 #Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP与SQL注入攻击[一]
2007/04/17 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
javascript闭包的理解
2015/04/01 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python学生信息管理系统
2018/03/13 Python
使用Django和Python创建Json response的方法
2018/03/26 Python
替换python字典中的key值方法
2018/07/06 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
小学教师国培感言
2014/02/08 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
红头文件任命书范本
2014/06/05 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2016年端午节寄语
2015/12/04 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL