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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
js 函数调用模式小结
Dec 26 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
Vue.js对象转换实例
Jun 07 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
iOS10推送通知开发教程
2016/09/19 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python中的函数用法入门教程
2014/09/02 Python
python自带的http模块详解
2016/11/06 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
在家更换处方镜片:Lensabl
2019/05/01 全球购物
机械专业应届生求职信
2013/12/12 职场文书
后勤主管岗位职责
2014/03/01 职场文书
党委领导班子整改方案
2014/09/30 职场文书
超级礼物观后感
2015/06/15 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
团组织关系介绍信
2019/06/24 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
OpenCV实现反阈值二值化
2021/11/17 Java/Android