亲宝软件园·资讯

展开

Three.Js实现颜色自定义变换效果实例

怒视天下 人气:0

前言

Three js的官方文档教程中给予了很多的Geomerty来构造不同类别的三维多边形,例如立方体BoxGeometry、圆柱体CylinderGeometry、球体SphereGeometry等Three.js几何体类都是基于基类BufferGeometry二次封装。Geometry对原生WebGL中的顶点位置position、顶点法向量normal、顶点颜色color、顶点纹理坐标uv、顶点索引index等顶点数据进行了封装,关于Geometry顶点更多介绍可以在学习的过程中通过官方文档或者b站的视频来练习。

但是如果第一次接触到顶点的概念,没有原生WebGL基础,建议学习下原生WebGL教程,这样的话,可以更好的理解几何体顶点的概念。这次分析构成模型对象的重要元素之一:Geometry(几何体)。本文分三部分介绍Geometry的主要性质。

Geometry的属性: 基础属性与动画属性

基础属性

动画属性

Three中可以通过两种方式实现动画:

Geometry的其他属性

vertices顶点位置属性(Geometry自定义一个几何体)

阅读Three Js文档下的立方体BoxGeometry、球体SphereGeometry、圆柱体CylinderGeometry等three.js几何体类的源码,发现这些几何体的源码都是生成各类几何体的顶点的相关算法。

一个顶点的位置xyz坐标,可以使用Three.js的一个三维向量Vector3来表示,Three.js几何体对。Geometry的属性.vertices表示顶点位置位置坐标的集合。

var geo = new THREE.Geometry();
//位置坐标
var point = new THREE.Vector3(18, 20, 4);

colors顶点颜色属性

通过Three.js几何体对象Geometry的属性color来设置顶点的颜色,=颜色值可以通过Color对象来定义。一个顶点的颜色数据用一个Color对象来表示,然后作为几何体.colors属性值数组的元素。当然对于点模型Points和线模型Line几何体的顶点颜色属性.colors中顶点数据才会起作用,如果是网格模型Mesh,颜色需要通过三角面对象Face3来定义。

const color = new THREE.Color(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0xffff00})

Geometry的主要类别

立方缓冲几何体(BoxGeometry)

BoxGeometry是四边形的原始几何类,它通常使用构造函数所提供的width、height、depth参数来创建立方体或者不规则四边形。

代码示例:

代码示例
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

圆形缓冲几何体(CircleGeometry)

CircleGeometry是欧式几何的一个简单形状,它由围绕着一个中心点的三角分段的数量所构造,由给定的半径来延展。 同时它也可以用于创建规则多边形,其分段数量取决于该规则多边形的边数。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

圆锥缓冲几何体(ConeGeometry)

一个用于生成圆锥几何体的类。

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

运行功能截屏展示

总结

以上就是Three js内置的一些三维多边体的主要构造方法,具体的可以参考官方网站的document手册(https://threejs.org/docs/?q=geo#api/zh/geometries/CircleGeometry)。会有详解的解释和方法来上手不同的物体,同时应该巧妙地运用three js的其他对象和属性来构造丰富多彩的颜色和炫酷的特效。例如我灵活的使用了for循环和随机的random函数的方法来构造出来的三角形多种多样,例如下图所示的这样,感觉很有意思。当然本人我也是刚开始学习前端的三维gis知识,在很多方面还有很多不足之处,还望各位大佬不吝赐教!!

加载全部内容

相关教程
猜你喜欢
用户评论