Three.js入门之hello world以及如何绘制线


Posted in Javascript onSeptember 25, 2017

前言

本文属于学习Three.js 的入门教程,文中通过示例介绍了hello world和线的实现,下面话不多说了,来一起看看详细的介绍吧。

hello world

首先使用我们先用three.js创建一个立方体的hello world类型的案例。

<!doctype html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title> 
 <script src="build/three.js"></script> 
 <style> 
 body{margin:0;} 
 canvas{width: 100%; height:100%; display: block;} 
 </style> 
</head> 
<body> 
<script> 
 //创建场景 
 var scene = new THREE.Scene(); 
 //设置相机(视野,显示口的宽高比,近裁剪面,远裁剪面) 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //设置渲染器的高度和宽度,如果加上第三个值 false,则按场景大小显示,等比例缩放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //将渲染器添加到html当中 
 document.body.appendChild( renderer.domElement ); 
 
 //盒子模型(BoxGeometry),这是一个包含立方体所有顶点和填充面的对象。 
 var geometry = new THREE.BoxGeometry( 1, 2, 1 ); 
 //使用网孔基础材料(MeshBasicMaterial)进行着色器,这里只绘制了一个绿色 
 var material = new THREE.MeshBasicMaterial( { color: 0x00ffff } ); 
 //使用网孔(Mesh)来承载几何模型 
 var cube = new THREE.Mesh( geometry, material ); 
 //将模型添加到场景当中 
 scene.add( cube ); 
 //将相机沿z轴偏移5 
 camera.position.z = 5; 
 
 //设置一个动画函数 
 var animate = function () { 
 //一秒钟调用60次,也就是以每秒60帧的频率来绘制场景。 
 requestAnimationFrame( animate ); 
 
 //console.log(cube.rotation); 
 //每次调用模型的沿xy轴旋转0.01 
 cube.rotation.x += 0.01; 
 cube.rotation.y += 0.01; 
 //使用渲染器把场景和相机都渲染出来 
 renderer.render(scene, camera); 
 }; 
 
 animate(); 
</script> 
</body> 
</html>

上面的代码案例解析:

(1)首先引入了three.js的库文件,就和引入jq一样。

(2)创建场景(17行)

(3)创建相机,并设置视野,显示的宽高比,近裁剪面,远裁剪面(19行)

(4)创建渲染器,并设置属性,放置到dom中(21-25行)

(5)创建一个立方体模型,并放入到场景(28-34)

(6)设置相机的位置(36行)

(7)设置一个动画函数,并使用渲染器把场景和相机渲染出来,每秒60帧,显示出来,就变成了动画。

利用Three.js绘制线

Three.js入门之hello world以及如何绘制线

上面就是绘制完成后显示的效果。

<!doctype html> 
<html> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title> 
 <script src="build/three.js"></script> 
 <style> 
 body{margin:0;} 
 canvas{width: 100%; height:100%; display: block;} 
 </style> 
</head> 
<body> 
<script> 
 //创建场景 
 var scene = new THREE.Scene(); 
 //设置相机(视野,显示口的宽高比,近裁剪面,远裁剪面) 
 var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); 
 //设置相机的视点 
 camera.position.set(0,0,100); 
 //设置相机的朝向 
 camera.lookAt(new THREE.Vector3(0,0,0)); 
 //渲染器 
 var renderer = new THREE.WebGLRenderer(); 
 //设置渲染器的高度和宽度,如果加上第三个值 false,则按场景大小显示,等比例缩放 
 renderer.setSize( window.innerWidth, window.innerHeight,false); 
 //将渲染器添加到html当中 
 document.body.appendChild( renderer.domElement ); 
 
 //定义线的基本材料,我们可以使用LineBasicMaterial(实线材料)和LineDashedMaterial(虚线材料) 
 var material = new THREE.LineBasicMaterial({color:0x0000ff}); 
 //设置具有几何顶点的几何(Geometry)或缓冲区几何(BufferGeometry)设置顶点位置,看名字就知道了,一个是直接将数据保存在js里面的,另一个是保存在WebGL缓冲区内的,而且肯定保存到WebGL缓冲区内的效率更高 
 var geometry = new THREE.Geometry(); 
 geometry.vertices.push(new THREE.Vector3(-10,0,0)); 
 geometry.vertices.push(new THREE.Vector3(0,10,0)); 
 geometry.vertices.push(new THREE.Vector3(10,0,0)); 
 //使用Line方法将线初始化 
 var line = new THREE.Line(geometry, material); 
 //将线添加到场景 
 scene.add(line); 
 
 //使用渲染器渲染出场景和相机 
 renderer.render(scene, camera); 
</script> 
</body> 
</html>

相对于上一节来说,只是模型方面有区别,这里是先使用线纹理的方法设置线的纹理,然后使用几何对象或者缓冲区几何对象生成顶点坐标,最后调用Line方法绘制出来线。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
js 处理URL实用技巧
Nov 23 Javascript
没有document.getElementByName方法
Aug 19 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
vue路由插件之vue-route
Jun 13 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 #Javascript
简单谈谈js的数据类型
Sep 25 #Javascript
实现两个文本框同时输入的实例
Sep 25 #Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 #jQuery
对于input 框限定输入值为浮点型的js代码
Sep 25 #Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 #Javascript
React学习之事件绑定的几种方法对比
Sep 24 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
php5新改动之短标记启用方法
2008/09/11 PHP
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
常用简易JavaScript函数
2009/04/09 Javascript
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
jquery控制select的text/value值为选中状态
2014/06/03 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
layui表格数据重载
2019/07/27 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
幼儿园教学管理制度
2014/02/04 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Flask response响应的具体使用
2021/07/15 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python