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验证表单大全
Nov 25 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
javascript模拟地球旋转效果代码实例
Dec 02 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JavaScript中交换值的10种方法总结
Aug 18 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
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
js的with语句使用方法
2007/09/21 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
简单实现js浮动框
2016/12/13 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
js实现随机抽奖
2020/03/19 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
[50:04]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python中turtle作图示例
2017/11/15 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
python如何设置静态变量
2020/09/07 Python
Python Merge函数原理及用法解析
2020/09/16 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
给学校建议书范文
2014/05/13 职场文书
公司承诺书怎么写
2014/05/24 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
地理信息科学专业推荐信
2014/09/08 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
Redis基本数据类型Set常用操作命令
2022/06/01 Redis