这篇文章主要给大家介绍了关于Three.js入门之hello world以及如何绘制线的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

前言

本文属于学习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绘制线

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

<!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方法绘制出来线。

总结

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

最新资讯
我在长沙待了7天 亲历社区团购巨头如何打巷战

我在长沙待了7天 亲历

这是一场硝烟四起的围剿战。互联网巨头围剿的目标是长
后疫情时代 PC游戏依然“混吃等死”?

后疫情时代 PC游戏依

2020年的PC游戏市场的表现不是很让人满意。
又一家造车新势力计划IPO:零跑汽车或将明年下半年登陆科创板

又一家造车新势力计划

蔚来、理想、小鹏股价上涨、市值冲高,威马、合众纷纷提
智联招聘郭盛:坏企业把员工当成本 好企业专注磨炼组织力

智联招聘郭盛:坏企业把

在郭盛看来,坏的企业把员工当成本,在通过裁员降薪控制成
京东为下个10年“打基础”:数字经济如何助推实体经济?

京东为下个10年“打基

简言之,京东将用数智化技术,优化生产、流通、服务等各个
神州数码郭为:技术发展迎三个颠覆式创新 未来竞合关系或成新常态

神州数码郭为:技术发

神州数码集团董事长兼总裁郭为在神州数码2020合作伙伴
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,