Three.js学习之网格


Posted in Javascript onAugust 10, 2016

前言

小编之前发布过关于几何形状和材质,相信大家看过学习之后,我们就能使用他们来创建物体了。最常用的一种物体就是网格(Mesh),网格是由顶点、边、面等组成的物体;其他物体包括线段(Line)、骨骼(Bone)、粒子系统(ParticleSystem)等。创建物体需要指定几何形状和材质,其中,几何形状决定了物体的顶点位置等信息,材质决定了物体的颜色、纹理等信息。

1.创建网格

在前几篇中,我们学习了如何创建几何形状与材质,而网格的创建非常简单,只要把几何形状与材质传入其构造函数。最常用的物体是网格(Mesh),它代表包含点、线、面的几何体,其构造函数是:

Mesh(geometry, material)

下面,让我们通过一个具体的例子了解如何创建网格:

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

如果material和geometry之后不会复用的话,也可以合在一起写为:

var mesh = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),

 new THREE.MeshLambertMaterial({

  color: 0xffff00

 })

);

scene.add(mesh);

添加光照后,得到的效果为:

Three.js学习之网格

如果不指定material,则每次会随机分配一种wireframe为true的材质,每次刷新页面后的颜色是不同的,一种可能的效果是:

Three.js学习之网格

源码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.1</title> 
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
//   var material = new THREE.MeshBasicMaterial({
//    color: 0xffff00,
//    wireframe: true
//   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   // render
   renderer.render(scene, camera);
  }
 </script>
</html>
 

2.修改属性

2.1 修改材质

除了在构造函数中指定材质,在网格被创建后,也能对材质进行修改:

var material = new THREE.MeshLambertMaterial({

 color: 0xffff00

});

var geometry = new THREE.CubeGeometry(1, 2, 3);

var mesh = new THREE.Mesh(geometry, material);

 scene.add(mesh);

mesh.material = new THREE.MeshLambertMaterial({

 color: 0xff0000

});

最终显示的颜色是红色:

Three.js学习之网格

源码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.2</title> 
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script> 
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   mesh.material = new THREE.MeshLambertMaterial({
    color: 0xff0000
   });
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   // render
   renderer.render(scene, camera);
  }
 </script>
</html>

2.2 位置、缩放、旋转

位置、缩放、旋转是物体三个常用属性。由于THREE.Mesh基础自THREE.Object3D,因此包含scale、rotation、position三个属性。它们都是THREE.Vector3实例,因此修改其值的方法是相同的,这里以位置为例。

THREE.Vector3有x、y、z三个属性,如果只设置其中一个属性,则可以用以下方法:

mesh.position.z = 1;

如果需要同时设置多个属性,可以使用以下两种方法:

mesh.position.set(1.5, -0.5, 0);

或者:

mesh.position = new THREE.Vector3(1.5, -0.5, 0);

缩放对应的属性是scale,旋转对应的属性是rotation,具体方法与上例相同,分别表示沿x、y、z三轴缩放或旋转。

 Three.js学习之网格

源码:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>3.js测试9.3</title>
 </head>
 <body onload="init()">
  <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
 </body>
 <script type="text/javascript" src="js/three.min.js"></script>
 <script type="text/javascript">
  function init() {
   var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
   });
   renderer.setClearColor(0x000000);
   var scene = new THREE.Scene();
   
   // camera
   var camera = new THREE.OrthographicCamera(-2.5, 2.5, 1.875, -1.875, 0.1, 100);
   camera.position.set(5, 5, 20);
   camera.lookAt(new THREE.Vector3(0, 0, 0));
   scene.add(camera);
   
   var material = new THREE.MeshLambertMaterial({
    color: 0xffff00
   });
   var geometry = new THREE.CubeGeometry(1, 2, 3);
   var mesh = new THREE.Mesh(geometry, material);
   scene.add(mesh);
   
   mesh.position.set(1.5, -0.5, 0);
   mesh.position = new THREE.Vector3(1.5, -0.5, 0);
   mesh.position.z = 1;
   
   var light = new THREE.DirectionalLight(0xffffff);
   light.position.set(20, 10, 5);
   scene.add(light);
   
   drawAxes(scene);
   
   // render
   renderer.render(scene, camera);
  }
  
  function drawAxes(scene) {
   // x-axis
   var xGeo = new THREE.Geometry();
   xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   xGeo.vertices.push(new THREE.Vector3(1, 0, 0));
   var xMat = new THREE.LineBasicMaterial({
    color: 0xff0000
   });
   var xAxis = new THREE.Line(xGeo, xMat);
   scene.add(xAxis);
   
   // y-axis
   var yGeo = new THREE.Geometry();
   yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   yGeo.vertices.push(new THREE.Vector3(0, 1, 0));
   var yMat = new THREE.LineBasicMaterial({
    color: 0x00ff00
   });
   var yAxis = new THREE.Line(yGeo, yMat);
   scene.add(yAxis);
   
   // z-axis
   var zGeo = new THREE.Geometry();
   zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
   zGeo.vertices.push(new THREE.Vector3(0, 0, 1));
   var zMat = new THREE.LineBasicMaterial({
    color: 0x00ccff
   });
   var zAxis = new THREE.Line(zGeo, zMat);
   scene.add(zAxis);
  }
 </script>
</html>

本文的内容到这就结束了,文章通过详细实例及图片介绍了Three.js中的网格,希望本文对大家学习Three.js有所帮助。

Javascript 相关文章推荐
Javascript的闭包
Dec 31 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 #Javascript
基于js中的原型、继承的一些想法
Aug 10 #Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python装饰器使用方法实例
2013/11/21 Python
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
python3注册全局热键的实现
2020/03/22 Python
python绘制高斯曲线
2021/02/19 Python
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
掌上明珠Java程序员面试总结
2016/02/23 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
忠诚教育心得体会
2014/09/03 职场文书
建党伟业观后感
2015/06/01 职场文书
欠条范文
2015/07/03 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python