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 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
详解JS数值Number类型
Feb 07 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
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
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
php生成QRcode实例
2014/09/22 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python线程创建和终止实例代码
2018/01/20 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
员工培训协议书
2014/09/15 职场文书
质检员岗位职责范本
2015/04/07 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python