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 相关文章推荐
鼠标移到图片上变大显示而不是放大镜效果
Jun 15 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
js实现缓动动画
Nov 25 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
dedecms中常见问题修改方法总结
2007/03/21 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jquery map方法使用示例
2014/04/23 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python简单读取大文件的方法
2016/07/01 Python
pyenv命令管理多个Python版本
2017/03/26 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python实现年会抽奖程序
2019/01/22 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
计算机专业自我鉴定
2013/10/15 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
商业项目策划方案
2014/06/05 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
师德师风整改措施
2014/10/24 职场文书
雷锋的观后感
2015/06/10 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL