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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
vue 给数组添加新对象并赋值
Apr 20 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
php 获取可变函数参数的函数
2009/08/26 PHP
PHP怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php 实现301重定向跳转实例代码
2016/07/18 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
javascript getElementsByClassName函数
2010/04/01 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
中止javascript执行的方法
2014/02/14 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
python 多线程串行和并行的实例
2019/02/22 Python
解决python运行效率不高的问题
2020/07/20 Python
python安装sklearn模块的方法详解
2020/11/28 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
护士自荐信
2013/10/25 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
雷锋的故事观后感
2015/06/10 职场文书
七个Python必备的GUI库
2021/04/27 Python
Python循环之while无限迭代
2022/04/30 Python