2021SC@SDUSC ClayGL Camera类分析(四)

关注

最新推荐文章于 2026-08-21 17:54:30 发布 · 576 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

Grafana数据可视化 1.1 Grafana简介 1.1.1 Grafana是什么？一个类似Kibana的东西，也是对后端的数据进行实时展示，那么Grafana和Kibana有什么区别？在我看来区别不大，不过在大家的日常使用中Kibana是跟着Logstash、ElasticSearch等组件一起使用做日志展示、索引、分析的，造成了一种假象就是Kibana就只有这种用法了，Kibana也可以接入其他数据... 阅读详情

2021SC@SDUSC ClayGL Camera类分析(四)
接上文

Members

1.scale

相对于其父节点缩放，初始值为 NULL.
类型:
clay.Vector3（3维向量）

    scale: null,

2.viewMatrix

视图矩阵，等于相机世界矩阵的反函数
类型：
clay.Matrix4（4维矩阵）

        viewMatrix: new Matrix4(),

3.worldTransform

世界仿射变换矩阵相对于其根场景，初始值为NULL。
类型：
clay.Matrix4（4维矩阵）

    worldTransform: null,

Methods

1.add(node)

添加一个子节点

    add: function (node) {
        var originalParent = node._parent;
        if (originalParent === this) {
            return;
        }
        if (originalParent) {
            originalParent.remove(node);
        }
        node._parent = this;
        this._children.push(node);
        var scene = this._scene;
        if (scene && scene !== node.scene) {
            node.traverse(this._addSelfToScene, this);
        }
        // Mark children needs update transform
        // In case child are remove and added again after parent moved
        node._needsUpdateWorldTransform = true;
    },

参数:

Name	Type
node	clay.Node

2. after(name, action, contextopt)

on函数的一个别名（‘after’ + name）

    after: function(name, action, context) {
        if (!name || !action) {
            return;
        }
        name = 'after' + name;
        return this.on(name, action, context);
    },

参数:

名称	类型	属性
name	string
action	function
context	Object	可选

3.before(name, action, contextopt)

on函数的另一个别名(‘before’ + name)

    before: function(name, action, context) {
        if (!name || !action) {
            return;
        }
        name = 'before' + name;
        return this.on(name, action, context);
    },

参数:

名称	类型	属性
name	string
action	function
context	Object	可选

4.castRay(ndc, outopt) → {clay.Ray}

将追踪光线从近平面的相机投射到远平面

参数:

名称	类型	属性
ndc	clay.Vector2
out	clay.Ray	可选

返回值：clay.Ray

    castRay: (function () {
        var v4 = vec4.create();
        return function (ndc, out) {
            var ray = out !== undefined ? out : new Ray();
            var x = ndc.array[0];
            var y = ndc.array[1];
            vec4.set(v4, x, y, -1, 1);
            vec4.transformMat4(v4, v4, this.invProjectionMatrix.array);
            vec4.transformMat4(v4, v4, this.worldTransform.array);
            vec3.scale(ray.origin.array, v4, 1 / v4[3]);
            vec4.set(v4, x, y, 1, 1);
            vec4.transformMat4(v4, v4, this.invProjectionMatrix.array);
            vec4.transformMat4(v4, v4, this.worldTransform.array);
            vec3.scale(v4, v4, 1 / v4[3]);
            vec3.sub(ray.direction.array, v4, ray.origin.array);
            vec3.normalize(ray.direction.array, ray.direction.array);
            ray.direction._dirty = true;
            ray.origin._dirty = true;
            return ray;
        };
    })(),

5.childAt(idx) → {clay.Node}

获取给定索引处的子场景节点。
参数:

名称	类型
idx	number
out	clay.Ray

返回值： clay.Node

    childAt: function (idx) {
        return this._children[idx];
    },

6.children() → {Array.<clay.Node>}

获取包含所有子节点的新创建数组
返回值： clay.Node[]

    children: function () {
        return this._children.slice();
    },

7.clone() → {Node}

克隆新节点
返回值： Node

    clone: function () {
        var node = new this.constructor();
        var children = this._children;
        node.setName(this.name);
        node.position.copy(this.position);
        node.rotation.copy(this.rotation);
        node.scale.copy(this.scale);
        for (var i = 0; i < children.length; i++) {
            node.add(children[i].clone());
        }
        return node;
    },