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

 更新时间:2023年02月13日 09:14:23   作者:怒视天下  
这篇文章主要给大家介绍了关于Three.Js实现颜色自定义变换效果的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

前言

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

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

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

基础属性

  • 顶点(vertices): 核心属性,表示几何体的顶点位置,在构造面及计算法线等时使用
  • 颜色(colors): 用于着色时的颜色计算
  • 面(faces): 由不同顶点组成的面,包含顶点索引、面法线、面顶点法线等数据,一般为三角面(包含三个点的索引)
  • Geometry的方法: 基础变换、Mesh与顶点合并、点面法线、包围盒/球计算
  • BufferGeometry 与 DirectGeometry(Todo)

动画属性

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

  • 变形动画(morph animation): 每一帧的状态由指定的顶点数组决定,在动画中应用指定顶点位置数组插值后的值(常用)
  • 骨骼蒙皮动画(bones skin animation): 每一帧的状态中Mesh的顶点位置由指定的不同骨骼及它们的权重决定

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知识,在很多方面还有很多不足之处,还望各位大佬不吝赐教!!

到此这篇关于Three.Js实现颜色自定义变换的文章就介绍到这了,更多相关Three.Js颜色自定义变换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript array常用方法代码实例详解

    JavaScript array常用方法代码实例详解

    这篇文章主要介绍了JavaScript array常用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 控制input输入框中提示信息的显示和隐藏的方法

    控制input输入框中提示信息的显示和隐藏的方法

    这篇文章主要介绍了怎样控制input输入框中提示信息的显示和隐藏 ,需要的朋友可以参考下
    2014-02-02
  • layui点击导航栏刷新tab页的示例代码

    layui点击导航栏刷新tab页的示例代码

    今天小编就为大家分享一篇layui点击导航栏刷新tab页的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JavaScrip实现一个有时间限制的缓存类的方式

    JavaScrip实现一个有时间限制的缓存类的方式

    本文将探索 JavaScript 中一种基于自动过期机制的时间限制缓存实现方式,提高数据缓存策略的灵活性和效率,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • HTML5 js实现拖拉上传文件功能

    HTML5 js实现拖拉上传文件功能

    这篇文章主要为大家详细介绍了HTML5实现拖拉上传文件功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • js 无提示关闭浏览器页面的代码

    js 无提示关闭浏览器页面的代码

    js 无提示关闭浏览器页面的代码与函数需要的朋友可以参考下。
    2010-03-03
  • Javascript条件判断使用小技巧总结

    Javascript条件判断使用小技巧总结

    我们已经知道,null 没有任何的属性值,并且无法获取其实体(existence)值。所以 null.property 返回的是错误(error)而不是 undefined 。
    2008-09-09
  • TypeScript 学习笔记之基本类型

    TypeScript 学习笔记之基本类型

    TypeScript 是 JavaScript 的超集,TypeScript 经过编译之后都会生成 JavaScript 代码。TypeScript 最大的特点就是类型化,因此才叫做 TypeScript。比起弱类型的 JavaScript,类型化的 TypeScript 显得更加容易维护。
    2015-06-06
  • 微信小程序实现星级评价

    微信小程序实现星级评价

    这篇文章主要为大家详细介绍了微信小程序实现星级评价,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JS面试题---关于算法台阶的问题

    JS面试题---关于算法台阶的问题

    下面小编就为大家带来一篇JS面试题---关于算法台阶的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07

最新评论