首页
所有分类
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 相关文章推荐
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 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
绿林侠盗(1) 艾尔登法环(1) 战锤40K(1) LOL(1) 暴雪(1) 遗弃(1) 巫师(1) 我的世界(1) 小缇娜的奇幻之地(1) 东方异文石(1)
You might like
中国收音机工业发展史
2021/03/02 无线电
PHP 高手之路（二）
2006/10/09 PHP
基于PHP静态类的原罪详解
2013/05/06 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP设计模式（三）建造者模式Builder实例详解【创建型】
2020/05/02 PHP
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
小程序识别身份证，银行卡，营业执照，驾照的实现
2019/11/05 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
tracking.js实现前端人脸识别功能
2020/04/16 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python安装requests库的实例代码
2019/06/25 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
html5清空画布方法（三种）
2017/10/16 HTML / CSS
全球性的众包图形设计市场：DesignCrowd
2021/02/02 全球购物
就业自我评价
2014/02/04 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
人力资源管理求职信
2014/08/07 职场文书
实习协议书范本
2014/09/25 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
战友聚会致辞
2015/07/28 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python