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

总结

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

时间: 2017-09-24

Three.js快速入门教程

引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

Three.js学习之网格

前言 小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(ParticleSystem)等.创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色.纹理等信息. 1.创建网格 在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数.最常用的物体是网

Three.js基础部分学习

一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

Three.js中网格对象MESH的属性与方法详解

前言 本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质.当网格创建好之后,我们就可以将它添加到场景中并进行渲染.网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果. 如下: 还有一个属性就是visible属性,默认为true,如果设置为false,THREE.Mesh将不渲染到场景中. mesh对象的前三个属性position,rotation和scal

JS库之Three.js 简易入门教程(详解之一)

开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章

three.js快速入门【推荐】

Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie

Vue.js快速入门教程

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

Vue.js快速入门实例教程

什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

webpack+vue.js快速入门教程

前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

Vue.js 60分钟快速入门教程

vuejs是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新. 当

Java的JNI快速入门教程(推荐)

1. JNI简介 JNI是Java Native Interface的英文缩写,意为Java本地接口. 问题来源:由于Java编写底层的应用较难实现,在一些实时性要求非常高的部分Java较难胜任(实时性要求高的地方目前还未涉及,实时性这类话题有待考究). 解决办法:Java使用JNI可以调用现有的本地库(C/C++开发任何和系统相关的程序和类库),极大地灵活Java的开发. 2. JNI快速学习教程 2.1 问题: 使用JNI写一段代码,实现string_Java_Test_helloworld

sencha ext js 6 快速入门(必看)

Sencha Ext JS号称是目前世界上最先进和最强大的.支持多平台多设备的JavaScript应用程序开发框架.首先看一下Ext JS的发展简史. 1 Ext JS发展简史 1.YUI-Ext的作者Jack Slocum(杰克.斯洛克姆)打算对基于BSD协议的Yahoo User Interface (YUI)库进行自定义的扩展,但后来一度风头盖过其父辈YUI: 2.在2006年底,YUI-Ext被简化为Ext,反映了它作为一个框架的成熟和独立.该公司成立于2007年初,Ext现在为双执照,

一文快速入门Docker推荐

Docker提供一种安全.可重复的环境中自动部署软件的方式,拉开了基于与计算平台发展方式的变革序幕.如今Docker在互联网公司使用已经非常普遍.本文用十分钟时间,带你快速入门Docker. Docker是什么 Docker是什么? 官网首页的介绍: Enterprise Container Platform for High-Velocity Innovation. Securely build, share and run any application, anywhere 百度百科告诉我们

新手如何快速入门Python(菜鸟必看篇)

学习任何一门语言都是从入门(1年左右),通过不间断练习达到熟练水准(3到5年),少数人最终能精通语言,成为执牛耳者,他们是金字塔的最顶层.虽然万事开头难,但好的开始是成功的一半,今天这篇文章就来谈谈如何开始入门Python.只要方向对了,就不怕路远. 设定目标 当你决定入门 Python 时,需要一个清晰且短期内可实现的目标,比如通过学习找一份初级程序员工作,目标明确后,你需要了解企业对初级程序员有哪些技能要求,下面是我从拉勾网找的一个初级 Python 工程师的任职要求: 1.熟悉 Pytho