Three.js入门教程
更多three.js教程可以关注郭隆邦技术博客
如果你第一次接触Three.js这款WebGL的3D引擎,那么你肯定想先实现一个小的案例就好了,笔者写这篇文章的目的也正在于此,通过一个麻雀虽小五脏俱全的小代码案例来向你展示threejs的风貌。
通过threejs绘制一个立方体
你可以先把下面的代码复制到一个.html文件中,使用任意一款浏览器打开,查看一下效果,注意引入three.js引擎的时候路径要对,你可以暂时把threejs理解成和jquery一样需要引入,只不过两个的作用不一样,但是都是一个可以运行浏览器环境下的一个JavaScript库。
也许你第一次接触threejs下面的代码很难理解,这是正常的,对于大多数前端工程师是没有3D或图形学基础的,当然了对于有3D基础,比如你用过unity3D,但是不了解前端,对于你来说理解下面的代码应该比较容易,主要是补充一下前端知识,对于前端工程师来说主要是学习3D的相关知识。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>第一个three.js文件_WebGL三维场景</title><style>body {margin: 0;overflow: hidden;/* 隐藏body窗口区域滚动条 */}</style><!--引入three.js三维引擎--><script src="../../three.js-master/build/three.js"></script> <!-- <script src="./three.js"></script> --><!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 创建网格模型*/// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);// console.log(scene)// console.log(scene.children)/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象//执行渲染操作 指定场景、相机作为参数renderer.render(scene, camera);</script>
</body></html>
场景
场景对象主要包含模型对象和光源对象,模型对象就是你要现实的三维物体,模型对象是由几何体和材质信息构成,光源的存在主要是为了模拟生活中光的漫反射、镜面反射现象,使渲染效果更逼真。
/*** 创建场景对象Scene*/var scene = new THREE.Scene();
模型对象
一个立方体效果,主要要通过场景的scene方法add,把网格模型mesh插入到场景中,否则渲染的时候不会显示。
/*** 创建网格模型*/// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometryvar material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中
光源对象
光源对象和模型对象一样需要通过add方法把光源插入到场景中,这样的话光源对象和模型对象就是场景对象Scene的子对象,通过父对象可以访问子对象或者遍历子对象。
不同光的光源类型都是对生活中不同的光源进行抽象创建的光源模型。
/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);
相机对象
相机对象你可以简单理解为生活中的相机,比如一个场景是特定的,但是相机不同的拍摄角度,得到的照片是不同的,对于WebGL也是一样的,threejs的中相机对象也是模拟生活的相机,你可以设置相机的位置,可以设置相机的观察视线方向。当然如果你有图形基础,那么应该知道相机对象实际包含的就是投影矩阵和视图矩阵,如果你没有图形学基础,你就把threejs中的相机理解成生活中的相机。
对于初学者而言,也没有必要先去了解相机对象每一个参数,先有个大概印象就可以。
/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
渲染器对象
联系实际生活,如果场景有了,相机有了,那么就需要一个人扣动相机的拍照开关执行拍照操作,这样就可以得到一张照片。对于three.js系统而言是一样的,threejs引擎提供了一个渲染器对象,通过WebGLRenderer API可以创建。该渲染器对象有一个render方法,该方法执行的时候,就相当于相机的拍照动作执行,执行render方法可以得到一张图片显示在网页上。render方法的参数是场景和xdji相机,程序中可能有多个相机对象或多个场景对象,render方法把哪个场景作为参数,执行render方法,就得到哪个场景的渲染结果。
/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);//设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象//执行渲染操作 指定场景、相机作为参数renderer.render(scene, camera);
Three.js入门教程相关推荐
- Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤 创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例 比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
- js读取http chunk流_极简 Node.js入门 教程双工流
点击上方蓝字关注我们 小编提示: 本文是由 ICBU 的谦行小哥哥出品,我们会持续发出极简 Node.js入门 教程,敬请期待哦,文中有比较多的演示代码建议横屏阅读 双工流就是同时实现了 Readab ...
- Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
- Vue.js入门教程(适合初学者)
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
- Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网 本文仅用于学习记录,不存在任何商业用途,如侵删 文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
- egg.js入门教程视频文件(转载于cnode社区)
记得上篇博客我满怀欣喜的去搞富文本,结果撞的头破血流. 简直是惨不忍睹.后来我也说了,我的那个有比较严重的问题,后期会考虑重构.(第一版已经放弃了) 之后我说我会去看关于后端nodejs koa框架方 ...
- Two.js入门教程
项目中需要前端画svg图像,直接在html上写标签不太优雅,于是找到了Two.js这个第三方类库,使用其完成了开发任务后,分享下使用心得,就算是入门教程了. 其官方网站为https://two.js. ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南--类的定义.初始化.继承 Ember.js 入门指南--类的扩展(reopen) Ember.js 入门指南--计算属性(compute properti ...
- 前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 【React】React Js入门教程(一学就会)
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
最新文章
- 基于FPGA的几种排序算法总结
- jQuery实现星星评分功能
- SwiftUI之深入解析如何处理特定的数据和如何在视图中适配数据模型对象
- Oracle中大批量删除数据的方法
- shopify在哪里填写html,[Shopify开店教程]添加嵌入代码
- Redis集群之官方集群
- 别惹老黄!英伟达遭网络攻击后,反手就把黑客黑了
- 把人物用 Unity 进行 2D 传送,拢共分四步 | 原力计划
- 【淘坏菌】Markdown 积累
- htcd816+android密码,HTC816怎么解锁?HTC Desire 816刷机解锁教程图解
- 服务器安装cos系统,COS(国产操作系统)安装教程
- java计算机毕业设计中小学生错题管理系统源码+数据库+系统+lw文档+mybatis+运行部署
- Vue 2.0 华丽的音乐搜索播放 Demo
- ps手机计算机图标教程,手绘设计精美手机APP软件图标的PS教程
- pyecharts、plotly图表插入PPT中
- 字节跳动拒招33岁程序员,网友:这也太坑了!太不合理!
- 解决tomcat报limt 字节长度限制 tomcat web.xml里配置mappedfile
- python 苹果笔记本电脑报价_千万别花冤枉钱!大学生买本得这么选!
- 积分电路和微分电路的特点
- 苹果关闭自动更新_IOS更新很烦?仅需一招永远关闭