首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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有所帮助。

Three.js学习之网格

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
watch(1) 无限迭代(1) 监听(2) vue-cli3.x(1) scss(1) 分词器(1) re模块(2) okenizer(1) sched(1) 事件调度器(1)
You might like
yii上传文件或图片实例
2014/04/01 PHP
php实现删除空目录的方法
2015/03/16 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
全面解析Bootstrap表单使用方法（表单控件状态）
2015/11/24 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
护理实习自我鉴定
2013/12/14 职场文书
老公爱的承诺书
2014/03/31 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
立志成才演讲稿
2014/09/04 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
工作时间调整通知
2015/04/24 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
oracle数据库去除重复数据
2022/05/20 Oracle