频道导航

• ▸ PHP
• ▸ Java
• ▸ Java SE
• ▸ Python
• ▸ C#
• ▸ C&C++
• ▸ Ruby
• ▸ VB
• ▸ asp.Net
• ▸ Go
• ▸ Perl
• ▸ netty
• ▸ Django
• ▸ Delphi
• ▸ Jsp
• ▸ .NET Core
• ▸ Spring
• ▸ Flask
• ▸ Springboot
• ▸ SpringMVC
• ▸ Lua
• ▸ Laravel
• ▸ Mybatis
• ▸ Asp
• ▸ Groovy
• ▸ ThinkPHP
• ▸ Yii
• ▸ swoole
• ▸ HTML
• ▸ HTML5
• ▸ JavaScript
• ▸ CSS
• ▸ jQuery
• ▸ Bootstrap
• ▸ Angularjs
• ▸ TypeScript
• ▸ Vue
• ▸ Dojo
• ▸ Json
• ▸ Electron
• ▸ Node.js
• ▸ extjs
• ▸ Express
• ▸ XML
• ▸ ES6
• ▸ Ajax
• ▸ Flash
• ▸ Unity
• ▸ React
• ▸ Flex
• ▸ Ant Design
• ▸ Web前端
• ▸ 微信小程序
• ▸ 微信公众号
• ▸ iOS
• ▸ Android
• ▸ Swift
• ▸ Hybrid
• ▸ Cocos2d-x
• ▸ Flutter
• ▸ Xcode
• ▸ Silverlight
• ▸ cocoa
• ▸ Cordova

• 前端之家
• JavaScript
• Three.js学习之网格

@H_403_0@　　下面，让我们通过一个具体的例子了解如何创建网格：

@H_403_0@　　如果material和geometry之后不会复用的话，也可以合在一起写为：

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

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

@H_403_0@　　源码：

@H_403_0@

2.修改属性

@H_403_0@　　

2.1 修改材质

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

@H_403_0@　　最终显示的颜色是红色：

@H_403_0@　　源码：

@H_403_0@　　

2.2 位置、缩放、旋转

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

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

@H_403_0@　　如果需要同时设置多个属性，可以使用以下两种方法：

@H_403_0@　　或者：

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

@H_403_0@　　源码：

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