Three.js中网格对象MESH属性与方法的示例分析

这篇文章给大家分享的是有关Three.js中网格对象MESH属性与方法的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

成都创新互联专注于淳安网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供淳安营销型网站建设，淳安网站制作、淳安网页设计、淳安网站官网定制、成都小程序开发服务，打造淳安网络公司原创品牌,更为您提供淳安网站排名全网营销落地服务。

创建一个网格需要一个几何体，以及一个或多个材质。当网格创建好之后，我们就可以将它添加到场景中并进行渲染。网格对象提供了几个属性和方法用于改变它在场景中的位置和显示效果。

如下：

还有一个属性就是visible属性，默认为true，如果设置为false，THREE.Mesh将不渲染到场景中。

mesh对象的前三个属性position，rotation和scale有三种设置方法。

第一种，直接设置相关坐标轴

 cube.position.x = 5;
 cube.position.y = 6;
 cube.position.z = 7;

第二种，一次性设置x，y和z坐标的值

 cube.position.set(5,6,7); //效果同第一种

第三种，因为它们都是一个THREE.Vector3对象，所以我们可以直接赋值一个新的对象给它

 cube.position = new THREE.Vector3(5,6,7); //效果同上

为了形象的显示这些效果，我书写了一个案例：

Three.js中网格对象MESH属性与方法的示例分析

这个效果是使用dat.GUI实现的效果，具体效果自己将代码下载下来测试即可：




 
 Title
 
 html, body {
  margin: 0;
  height: 100%;
 }

 canvas {
  display: block;
 }

感谢各位的阅读！关于“Three.js中网格对象MESH属性与方法的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

当前标题：Three.js中网格对象MESH属性与方法的示例分析
网页链接：http://kswjz.com/article/jsjeid.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态