Three.js学习之网格_javascript类库

前言

　　小编之前发布过关于几何形状和材质，相信大家看过学习之后，我们就能使用他们来创建物体了。最常用的一种物体就是网格（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);

　　添加光照后，得到的效果为：

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

　　源码：

<!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

});

　　最终显示的颜色是红色：

　　源码：

<!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三轴缩放或旋转。

 

　　源码：

<!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
教程
，以便于您获取更多的相关知识。

时间： 2024-11-08 23:16:07

Three.js学习之网格_javascript类库的相关文章

Highcharts学习之坐标轴_javascript类库

前言 所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调. 下面一起来学习学习Highcharts的坐标轴. tags: 1.标题 xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } } 2.标签 labels:enabled.formatter.setp yAxis:{ labe

Three.js学习之正交投影照相机_javascript类库

前言 Three.js是一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SVG标签的渲染器,调试建议使用Chrome或者Firefox. 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机. 2.两种相机的区别与适用范围 正交投影:   透视投影:   正交投影就像数学课上画的:而透视投影有一个基本点,就是远处的物体比近处的物体小,远大近小. 对于制图.建模软件通

Three.js学习之文字形状及自定义形状_javascript类库

1.文字形状 说起3d文字想起了早年word里的一些艺术字: 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helvetiker字体为例. 引用: <script type="text/javascript" src="你的路径/helvetiker_regular.typeface.json"></script> TextGeometry的构造函数是: THREE.TextG

Three.js学习之几何形状_javascript类库

1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也就是长宽高可以设置为不同的值.其构造函数是: THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments) width:x方向上的长度 height:y方向上的长度 depth:z方向上的长度 widthSegments:x方向上的分段数(可选,缺省值1) heightSegments:y方向上的分段数(同

vue.js学习笔记之绑定style样式和class列表_javascript技巧

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

JS学习之表格的排序简单实例_javascript技巧

JS学习之表格的排序简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="排序"> <table id="

Three.js快速入门教程_javascript技巧

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

Node.js 学习笔记之简介、安装及配置

 本文是Node.js学习笔记系列文章的第一篇,主要给大家讲解的是在Windows和Linux上安装Node.js的方法.软件安装版本以0.12.0为例.希望大家能够喜欢.     简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好. 谁适合阅

node.js学习笔记（9） 和谐模式

众所周知,ECMAScript 是一种开放的.国际上广为接受的脚本语言规范. 它本身并不是一种脚本语言.正如在 Web 应用程序中执行有用操作的 bean 集合(例如,Netscape 的 AWT)是 Sun 的 JavaBean 规范的一种实现一样,JavaScript 是 ECMAScript 规范的一种实现. 2015年6月17日,ECMA国际发布了EcmaScript2015,即EcmaScript6(以下简称ES6)草案的正式版.ES6是继ES5之后的一次主要改进,语言规范由ES5.1