ClayGL 是一个 WebGL 图形库，用于构建可伸缩的 Web3D 应用程序。
ClayGL 易于使用，可针对高质量图形进行配置。得益于模块化和 tree shaking，对于基本的3D应用程序，它可以缩小到22k（压缩）。
示例
创建旋转立方体示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="lib/claygl.js"></script>
</head>
<body>
<canvas id="main"></canvas>
<script>
clay.application.create('#main', {
width: window.innerWidth,
height: window.innerHeight,
init(app) {
// Create camera
this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);
// Create a RED cube
this._cube = app.createCube({
color: '#f00'
});
// Create light
this._mainLight = app.createDirectionalLight([-1, -1, -1]);
},
loop(app) {
this._cube.rotation.rotateY(app.frameTime / 1000);
}
});
</script>
</body>
</html>
-
2021SC@SDUSC 目录 一.clay.core.LinkedList类概述 二.clay.core.LinkedList类的作用 三.clay.core.LinkedList类源码分析 1.new LinkedList() 2.clear() 3.forEach(cb, context) 4.getAt(idx) 5.getHead() 6.getTail() 7.indexOf(valu
-
2021SC@SDUSC 目录 一.clay.async.Task类概述 二.clay.async.Task类的作用 三.clay.async.Task类源码分析（一） 1.new Task() 2.(static) makeRequestTask(url, responseType opt) → {clay.async.Task|Array.} 3.(static) makeTask() → {
-
跨出第一步 最初接触到WebGL是在2016年，有客户来咨询，“能不能做一个APP让我在手机上看到设计的3D模型”，拿到这个需求的时候立马就想到了经典“大茶壶”，当时用three.js做了一个网页，对照官网上的demo，调调改改，实现了模型文件的管理与浏览，并使用WeX5打包成APP，对于创业者来说，这是最省人力的选择了。 接下来几年，VR应用的风靡，转战Unity3D做了商场的互动游戏，为“某钢
-
2021SC@SDUSC ClayGL Camera类分析(四) 接上文 Members 1.scale 相对于其父节点缩放，初始值为 NULL. 类型: clay.Vector3（3维向量） scale: null, 2.viewMatrix 视图矩阵，等于相机世界矩阵的反函数 类型： clay.Matrix4（4维矩阵） viewMatrix: new Matrix4
-
2021SC@SDUSC 目录 一、Particle.js 1.Particle 一、Particle.js 1.Particle this.position = new Vector3(); 设置位置，类型为clay.Vector3，默认为（0，0，0）； this.rotation = new Vector3(); 设置旋偏转角度，类型为clay.Vector3，默认为（0，0，0）； thi
-
2021SC@SDUSC 目录 一.clay.compositor. Graph类概述 二.clay.compositor. Graph类的作用 三.clay.compositor. Graph类源码分析 1.new Graph() 2.addNode(node) 3.after(name, action, context opt) 4.before(name, action, context
-
2021SC@SDUSC （接上文） 目录 ParticleRenderable.js 4.2函数 updateParticles ParticleRenderable.js 4.2函数 updateParticles updateParticles: function(deltaTime) { deltaTime /= 1000; this._elaps
-
2021SC@SDUSC 目录 一.clay.Skeleton类概述 二.clay.Skeleton类的作用 三.clay.Skeleton类源码分析 1.new Skeleton() 2.addClip(clip, mapRule opt) 3.getClip(index) 4.getClipNumber() → {number} 5.removeClip(clip) 6.removeClips
-
我决定不从claygl基础来讲了 直接整合arcgis与claygl可视化来讲 关于整合clagyl 有兴趣看我这篇文章 arcgis 与 claygl 引擎结合做地图可视化 我整合一个类库 后续不断更新中 npm i @haibalai/gismap4-claygl 初始化gismap4-claygl 类库， view是arcgis的sceneView对象 import { ClayglMapM
-
我决定不从claygl基础来讲了 直接整合arcgis与claygl可视化来讲 关于整合clagyl 有兴趣看我这篇文章 arcgis 与 claygl 引擎结合做地图可视化 我整合一个类库 后续不断更新中 npm i @haibalai/gismap4-claygl 初始化gismap4-claygl 类库， view是arcgis的sceneView对象 import { ClayglMapM
-
我决定不从claygl基础来讲了 直接整合arcgis与claygl可视化来讲 关于整合clagyl 有兴趣看我这篇文章 arcgis 与 claygl 引擎结合做地图可视化 我整合一个类库 后续不断更新中 npm i @haibalai/gismap4-claygl 初始化gismap4-claygl 类库， view是arcgis的sceneView对象 import { ClayglMapM
-
2021SC@SDUSC ClayGL Camera类分析(八) 接上文 setLocalTransform(matrix) 设置本地变换并分解为 SRT /** * Set the local transform and decompose to SRT * @param {clay.Matrix4} matrix */ setLocalTransform:
-
2021SC@SDUSC 目录 一.clay.async.Task类回顾 二.clay.async.Task类的扩展功能分析 三.clay.async.Task类源码分析（二） 1.off(action, context opt) 2.on(name, action, context opt) 3.once(name, action, context opt) 4.reject(err) 5.re
-
2021SC@SDUSC 目录 一. clay.animation.Animator类概述 二. clay.animation.Animator类的作用 三. clay.animation.Animator类源码分析 1. new Animator(target, loop, getter, setter, interpolater) 2. delay(time) → {clay.animatio
-
2021SC@SDUSC ClayGL Camera类分析(七) 接上文 1.off(action, contextopt) 删除事件侦听器 参数： 名称 类型 属性 action function context Object 可选 off: function(name, action) { var handlers = this.__handlers__ || (thi
-
2021SC@SDUSC ClayGL Camera类分析(五) 接上文 Methods 1.decomposeLocalTransform() 将局部转换分解为 SRT， 输入参数keepScale，如果scale!=keepScale，则scale=this.scale,否则scale=null。 decomposeLocalTransform: function (keepScale
-
2021SC@SDUSC ClayGL Skybox类分析(十二) new Skybox() /** * @constructor clay.plugin.Skybox * * @example * var skyTex = new clay.TextureCube(); * skyTex.load({ * 'px': 'assets/textures/
-
2021SC@SDUSC ClayGL Camera类分析（一） Camera类定义 Camera类主要定义了视角、物体、世界矩阵向相机矩阵的变换以及在相机进行变换后的坐标更新，也具有定义光线向量的函数，该光线是从相机开始定义的发射的。 new Camera() 该函数包含Camera节点扩展及实例对象函数定义。 Camera节点扩展其成员及类型定义： 成员 类型 projectionMatrix
-
2021SC@SDUSC ClayGL Camera类分析(六) 接上文 1.getScene() → {clay.Scene} 获取已安装的场景。 返回值: 类型 clay.Scene getScene: function () { return this._scene; }, 2.getWorldPosition(outopt) → {clay.Vector3
-
2021SC@SDUSC ClayGL Camera类分析（三） 接上文 MEMBERS 1、获取包围盒getBoundingBox 获取节点的包围盒： 参数 {Function} [filter] {clay.BoundingBox} [out] 返回值 {clay.BoundingBox} // TODO Skinning getBoundingBox: (function (
-
相信大家都用过echart和各种地图引擎做结合， echart 还有个开发包是echart-gl 是用来做三维图表开发的，但是echart-gl 很难在三维地图上做相机视角同步，这样就会很别扭，不能成为地图的一部分，echart-gl 开发的引擎正是 claygl 引擎，其中arcgis官方文档有指出和threejs 结合， 经过我研究一波可以用来做claygl 来做可视化，这样可以把echart
-
问题内容： 在一个项目中，我正在StreamingAssets目录中有两个json文件。处理它们的脚本在独立PC版本中可完美运行，但在WebGL中完全不起作用。 我收到“找不到文件！” 根据脚本消息： 我得到了使用Unity站点上的脚本API所描述的WWW类的答案，地址为：https : //docs.unity3d.com/ScriptReference/Application- streami
-
我试图在WebGL中构建我的unity项目，但它总是给我一个错误。构建结果显示它成功了，但在文件夹中什么都没有。 这是我得到的错误。 FileNotFoundException:找不到文件“C:\Users\TIGER\Desktop\UnityTest\Prototype3\Temp\stagingara\Data\Native\build.bc”系统。伊奥。文件流。。ctor（System.S
-
构建应用的流程是通过创建应用提交一些信息进行处理 从git 仓库获取tags列表 调用jenkins API 将应用的相关参数及版本信息传给它并进行构建 Jenkins Job执行Shell命令 执行docker build并上传致Docker 仓库 平台监听到job已经执行完成并成功了，调用kubernetes API更新应用的Image地址 监听升级情况 发送通知 以上是构建应用的后端流程，而
-
通常，构建工具是maven,ant或者gradle。但是，也可以只用make:make clean && make -j2 && sudo make install搞定一切。 假设开发者同时安装了java,groovy,scala和kotlin四种语言开发环境，其应用可能用到四种语言中的至少一种。只要设置好了各语言相关的环境变量:JAVA_HOME,GROOVY_HOME以及SCALA_HOME和
-
本文向大家介绍用Javascript创建图形，包括了用Javascript创建图形的使用技巧和注意事项，需要的朋友参考一下 我们将创建一个支持权重以及有向和无向类型的图类。这将使用邻接表来实现。随着我们转向更高级的概念，图形的权重和有向性质都将派上用场。 邻接列表是单独列表的数组A。数组Ai的每个元素都是一个列表，其中包含与顶点i相邻的所有顶点。我们使用2个成员，节点和边来定义它。 让我们通过定义
-
本节课通过绘制一个矩形边框效果，对WebGL整个渲染流程有一个简单认知。 学习建议 学习本节课，建议先结合注释看看案例源码，对于不熟悉的WebGL API可以在MDN搜索文档，不过刚开始学习，没必要去掌握每一个WebGL API，把主要精力放在理解WebGL的整个渲染流程上面，如果你能建立渲染管线的概念，自然对WebGL系统会有一个基本的认知。 源码体验测试 //类型数组构造函数Float32Ar