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 相关文章推荐
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
Ext GridPanel加载完数据后进行操作示例代码
Jun 17 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
vuex 的简单使用
Mar 22 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
解决php中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
PHP 表单提交给自己
2008/07/24 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
关于this和self的使用说明
2010/08/01 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
公司合作意向书范文
2014/07/30 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年纪检工作总结
2014/11/12 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
英文升职感谢信
2015/01/23 职场文书
团代会闭幕词
2015/01/28 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
Mysql文件存储图文详解
2021/06/01 MySQL
spring cloud 配置中心native配置方式
2021/09/25 Java/Android