全国咨询热线:18720358503

在线小程序开发_Three.js入门之hello world以及怎么绘

类别:媒体报道 发布时间:2021-01-11 浏览人次:

Three.js入门之hello world以及如何绘制线       这篇文章主要给大家介绍了关于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方法绘制出来线。

总结

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


推荐阅读

在线小程序开发_Three.js入门之hello world以及怎么绘

Three.js新手入门之hello world及其怎样绘图线 本文关键给大伙儿详细介绍了有关Three.js新手入门之hello world及其怎样绘图线的有关材料,原文中根据实例编码详细介绍的十分详尽,对大...

2021-01-11
微信小程序模板源码_基于VUE.JS的移动端框架Min

根据VUE.JS的手机端架构Mint UI的应用 Mint UIGitHub:新项目:Demo:文本文档:由饿了么外卖前端开发精英团队发布的 Mint UI 是一个根据 Vue.js 的手机端部件库。自 6 月月初开源系统至今...

2021-01-11
精简代码降低搜索引擎提取文字内容难度

在检索模块工作中基本原理中,检索模块预解决的第一步便是获取文本內容SEO工作人员应当尽可能减少检索模块获取文本內容的难度系数,也便是精减HTML编码,使真实的文本內容占比提...

2021-01-11
企业网站推广技巧知多少

怎样搞好网络推广针对许多公司,特别是在是中小型型公司来讲,全是很大的难点。在互连网髙速发展趋势的今日,以网站为关键的营销推广方式已是以便公司营销推广的头等大事,那...

2021-01-11
移动端建站 为什么不推荐响应式网站?

您的部位: > 新闻报道新闻资讯 > 手机端建网站 为何不强烈推荐自适应网站?自适应网站,通俗化的说,便是一个网站能够适配不一样的终端设备,客户在浏览网站时,网页页面能够依...

2021-01-11
四川奥尔铂电梯有限公司

四川奥尔铂电梯轿厢比较有限企业坐落于成渝经济发展圈中间的四川省射洪县。企业是具备我国A级资质证书,从业电梯轿厢设计方案、生产制造、安裝、更新改造、检修和...

2021-01-11
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信