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 相关文章推荐
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
angularjs实现简单的购物车功能
Sep 21 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 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
解析thinkphp中的导入文件标签
2013/06/20 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
超清晰的document对象详解
2007/02/27 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
js实现不重复导入的方法
2016/03/02 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
计算机科学与技术应届生求职信
2013/11/07 职场文书
改革共识倡议书
2014/08/29 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
人生感悟经典句子
2019/08/20 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
angular4实现带搜索的下拉框
2022/03/25 Javascript