noob_Noob的Three.js指南
noob
Web的复杂性每天都在变化,其可能性也在Swift增长。 特别是3D渲染。 WebGL(Web图形库)是用于渲染交互式3D和2D图形JavaScript API。 Ricardo Cabello的Three.js是一个基于WebGL构建的库,可确保创作的代码在各种浏览器之间兼容。
Three.js对WebGL来说就像jQuery对JavaScript一样,提供了许多人喜欢的声明性语法,并消除了浏览器中3D的烦恼。 让我们对其进行回顾,大致了解语法,并了解如果您是3D游戏的新手,那么该如何入门。
我们正在努力
看看下面在CodePen上的演示; 使用鼠标光标在周围拖动模型,使用鼠标滚轮放大和缩小。
1.设置场景
为了方便起见,我们将使用CodePen。 首先从“ JS”标签链接到Three.js( CDN 126Kb)。
我们从创建场景开始,就像您在Photoshop中从画布开始一样。 在编写任何其他代码之前,先使用变量定义场景。 因此,在您的JS窗格中添加:
var scene = new THREE.Scene();
相机!
随着帷幕的到来,为我们的表演做好准备,我们将需要一种方法来查看我们的出色之处-推出相机的时间。 Three.js捆绑了一系列相机,例如PerspectiveCamera
, StereoCamera
, OrthographicCamera
和CubeCamera
。 为了我们的目的,我们将使用PerspectiveCamera
因为它旨在模仿人眼的观看方式。 就像我们用变量定义场景一样,我们也可以定义摄像机:
var camera = new THREE.PerspectiveCamera();
我们PerspectiveCamera接受四个参数: fov
, aspect
, near
及far
。
fov
(视野)是您可以在相机中心周围看到的东西。 考虑一下相机上的广角镜头与标准镜头。aspect
是fov
的比率,换句话说就是屏幕的宽度与高度(例如4:5、16:9)。- 最后两个,
near
和far
是实体的平面。 它们共同控制对象是否根据其与相机的距离进行渲染。near
是对象或对象的一部分在仍被渲染的情况下与相机最接近的far
;“ dest”则是离相机可能仍在渲染的对象最远。 这些共同定义了相机的视锥 。
这是PerspectiveCamera
参数的示例:
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
除了了解可以传递的值之外,了解每个值并不重要。 继续,我们需要设置相机的位置。
camera.position.set(x, y, z);
这条线是对象的本地位置 。 这将设置向量的x , y和z坐标。 没有它,相机将什么也看不见。
2. WebGLRenderer
我们食谱中的下一个重要组成部分是创建WebGLRenderer 。 这是负责展示您的创作的魔力的作品。
var renderer = new THREE.WebGLRenderer();
WebGLRenderer
也可以接受作为对象传入的属性和值。
var renderer = new THREE.WebGLRenderer({
alpha: true // remove canvas' bg color
});
有很多property : value
可以使用property : value
对-如果您决定稍后再深入研究,这些property : value
将在文档中列出(我强烈建议这样做)。
定义了渲染器后,我们可以设置方法以进一步自定义创建内容,例如setSize
; 在几乎所有Three.js项目中都会使用的方法。
// Make scene renderer the size of the screen
renderer.setSize(window.innerWidth, window.innerHeight);
您可以使用更多方法,但出于我们的目的,我们将坚持使用setSize()
。
3. DOM
现在,我们已经定义了所需的大小,我们需要一种将其附加到DOM的方法。
document.body.appendChild( renderer.domElement );
此domElement
属性是渲染器绘制其输出的位置,将采用canvas
元素的形式。 尽管我正在使用document.body
您可以在任意位置添加或添加canvas
元素。 实际取决于您的具体项目需求,由您决定。
创建一个对象
下一步,我们需要创建一个对象,因为到目前为止,我们所做的只是声明一个场景,一个照相机和一个渲染器。 出于演示目的,让我们从3D模型库中获取一部手机,以便我们为在线购买iPhone的人们构建产品预览器。
通常,您可以使用SketchUp甚至Blender之类的应用程序来绘制3D对象,但是3D绘图应用程序的学习曲线很高-一条曲线当然不在本文的讨论范围之内。
如果您喜欢PiñaCollada
要将3D对象插入场景,我们必须使用ColladaLoader
。 应该提到的是,您决定使用的任何图形通常都应以1-2Mb以下为目标,并且必须是Collada文件才能与Three.js一起使用:这些文件以.dae
扩展名结尾。 如果打开Collada文件,您会看到它实际上是用XML编写的。
我们首先使用变量定义ColladaLoader
然后调用该方法以及定义另一个变量以表示3D图形,以供以后参考。
var dae, // graphic
loader = new THREE.ColladaLoader(); // loader
这是一个很好的开始,但是我们还需要做更多工作才能显示手机。 让我们做一个可以做到这一点的函数:
function loadCollada( collada ) {
dae = collada.scene;
scene.add(dae);
}
下一步,我们将使用load
方法,传递Collada文件的URL,然后按名称作为第二个参数调用函数:
loader.load( 'https://myurl.com/file/iphone6.dae', loadCollada);
如果您想进一步了解ColladaLoader
,可以在GitHub上挖掘源代码 。
4.渲染循环
终于有了我们的装载机和图像,这是最后一步。 我们需要创建一个所谓的“渲染循环”。 这是因为我们实际上还没有渲染任何东西。
此“渲染循环”将导致渲染器每秒绘制场景60次。 以下功能将使我们的创作变得生动起来(整个过程中最好的部分)。
function renderPhone() {
requestAnimationFrame( renderPhone );
renderer.render(scene, camera);
}
renderPhone();
requestAnimationFrame
具有许多优点。 最重要的是,当用户导航到另一个浏览器选项卡时,它会暂停,最终不会浪费他们的处理能力和电池寿命。
最终产品
所有这些工作的结果是对3D iPhone的完美渲染,您可以旋转,旋转和放大和缩小:
最终的创建还有更多内容,因此,我鼓励您更深入地研究该示例JavaScript面板。
例如; 照明( AmbientLight
, HemisphereLight
, PointLight
), TrackballControls
, AxisHelper
和一个窗口调整大小事件。 其中一些提到的项目不包含TrackballControls
文档,但是您可以在GitHub的核心JS文件中找到所有可用的属性。 您还可以使用其他非常酷的控件 ,这些控件也在GitHub上列出。
灵感
有时,您需要一些启发来使'ol大脑Swift激发想法。 以下是我最喜欢的使用Three.js进行演示的示例,这些示例将梦想变为现实。
进一步阅读
Rachel Smith 在CodePen上写了一篇有关WebGL的出色文章 ,我强烈建议您在有空的时候阅读它。 本教程使用了简单的语言,它是对Three.js讨论场景,几何,照明,材质和动画的详尽解释,而我当然不会在这篇简短的文章中介绍。
您可能还会喜欢:
- 具有THREE.js纹理和粒子的WebGL
- THREE.js用于游戏开发
- 具有THREE.js基础的WebGL
学分
没有Work Slack社区动画的慷慨帮助,这篇文章将是不可能的,因此,我要(无特殊顺序)感谢Stephen Shaw , Jeff Ayer , Louis Hoebregts , Neil Pullman , Eli Fitch和Chris Johnson 。
翻译自: https://webdesign.tutsplus.com/tutorials/a-noobs-guide-to-threejs--cms-28639
noob
noob_Noob的Three.js指南相关推荐
- Node.js 指南(目录)
Node.js 指南 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 常规 关于Node.js 入门指南 轻松分析Node.js应用程序 Dock ...
- Node.js 指南(Docker化Node.js Web应用程序)
Docker化Node.js Web应用程序 此示例的目的是向你展示如何将Node.js应用程序放入Docker容器中,该指南旨在用于开发,而不用于生产部署,本指南还假设你有一个有效的Docker安装 ...
- Node.js 指南(入门指南)
入门指南 安装Node之后,让我们尝试构建我们的第一个Web服务器,创建名为"app.js"的文件,并粘贴以下代码: const http = require('http');co ...
- Electron.js指南——macOS Dock
macOS Dock Electron具有用于在macOS Dock中配置应用程序图标的API.存在一个仅限macOS的API来创建自定义停靠菜单,但是Electron还使用该应用的停靠图标来实现跨平 ...
- vscode 加参数运行_VSCode 调试 Webpack 指南
Webpack 是前端开发的常用工具. 在使用 Webpack 的时候,我们经常会引入额外的 loader 和 plugin 来定制构建过程.而有些 loader 和 plugin 支持传入函数,来提 ...
- ember.js_如何设置基本的Ember.js应用
ember.js by Tracy Lee | ladyleet 特雷西·李(Tracy Lee)| Ladyleet 如何设置基本的Ember.js应用 (How to set up a Basic ...
- vue:无法将“vue”识别为脚本_「前端架构」React和Vue -CTO的选择正确框架的指南...
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录...
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 我如何开始使用Node.js [关闭]
有什么好的资源可以开始使用Node.JS? 有没有好的教程,博客或书籍? 当然,我已经访问了它的官方网站http://nodejs.org/ ,但是我认为他们拥有的文档不是一个很好的起点. #1楼 使 ...
- db2v9/9.5高级应用开发_使用 Vue.js 2.0 开发单页应用
来源 | https://www.sitepoint.com/up-and-running-vue-js-2-0/ 早在去年9月份,流行的 JavaScript 框架 Vue.js 就发布了 V2 版 ...
最新文章
- 手把手教你用Prophet快速进行时间序列预测(附Prophet和R代码)
- 《2040大预言:高科技引擎与社会新秩序》——2.6 会计师如何改写未来
- 化学反应工程 第一章 均相单一反应动力学和理想反应器
- 机器学习经典必读书,李航《统计学习方法》出视频课了!
- vue怎么调用子元素的方法_vue.js 父组件如何触发子组件中的方法
- 非使用FindControl方法找到深层嵌套的控件
- 蓝桥杯BASIC-28 基础练习 Huffuman树
- python布局管理_Python入门-图形用户界面-几何布局管理器-grid布局管理器
- java reader 组合_Java IText 拼接合并PDF的三种方法
- python123手机版本_Python123
- cadence、PADS、protel教程(PCB Layout图文教程终结版)
- 解决pymysql.err.InternalError: (1054, Unknown column '某某某' in 'field list') 的问题
- 凌晨三点的程序员,别让你的辛苦被辜负
- 做一个九宫格诗词答题小程序 (二)倒计时功能实现
- android 手机自动控制,Automate自动化处理任务(自动操控手机)
- 将文件从 Linux 传输到 Windows
- Python 智能聊天机器人的实现
- trainging contest#2(2011成都现场赛)G BY bly
- 合并多个集合同类项	 	 5.{aaa,bbb,ccc},{bbb,ddd},{eee,fff},{ggg},{ddd,hhh} 	 通过编程实现结果为
- 微信小程序 微信支付代码实现流程
热门文章
- Linux设备驱动 | LED字符设备驱动(platform平台总线)
- 关于谷哥传奇工程师Jeff Dean的笑话
- 1959年第一台电子计算机,1、 一般认为,世界上第一台电子数字计算机诞生于______。 A.1946年 B.1952年 C.1959年 D.1962年...
- python英雄对战代码_Python爬虫获取op.gg英雄联盟英雄对位胜率代码
- 奥特曼系列ol恶魔之花服务器,《奥特曼系列ol》依组麦鲁 培养攻略来袭
- 【模拟试题】czy的后宫3 莫队
- ps快捷图标在哪个文件夹_ps安装包在哪个文件夹
- 终于有人把“教育内卷”讲明白了
- 计算机电源16脚芯片,康舒AP16PCO5 ATX电源电路原理与维修(二)
- 求两个列表的交集、并集和补集