Orillusion
    • 注册
    • 登录
    • 搜索
    • 版块
    • 最新
    • 标签

    orillusion入门系列四 | 材质

    中文社区
    orillusion引擎 engine
    1
    1
    141
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • O
      oldguy 最后由 oldguy 编辑

      如果说人类最难以满足的两个器官是舌头和眼睛，舌头费调料眼睛费显卡，你同意吗？今天继续学习如何愉悦我们视觉的技术，那就是材质(Material)。在上一期的示例已经可以创造几种规则的几何体了，但是看起来光秃秃的，这些几何体很难称之为物体，今天我们从认识材质开始，到使用材质使物体的外观丰富起来。

      什么是材质(Material)

      材质是由shader定义的一组特性集合，用来定义对光的处理。光对于材质来说起着决定的作用，当没有光时我们看不到任何物体，我们视觉看到的物体是由光来决定的，光照射到物体的表面会产生反射、折射，物体也会吸收一部分，当然这些反射又会照射到其它物体上又会产生反复的吸收以及折射，那么如何在计算性能和逼真度上做取舍呢，这里不做原理上的探究，只聊一聊感性上的体会。一个立方体看起来是一块砖头还是一块金锭，是由不同的材质定义的，材质可以使物体看起来更像什么，以及是否足够逼真。

      材质、贴图、纹理的关系

      如果只有材质还是比较好理解的，忽然面向三个相近的概念需要在理解上做个区分。
      笼统的来说材质包含贴图，贴图包含纹理。材质是一个集合，内部包含了光学特性，贴图资源等等。贴图是物理的表面，可以对图片视频等效果的处理，例如拉伸，缩放，与物体的贴合参数等。纹理可以简单理解成图片视频等原材料。

      材质类型

      材质的类型是引擎给我们提供的又一有力工具，类同于前面引擎封装的几款几何体，引擎同样为实际应用中的几种典型材质做了封装。在使用引擎开发时选择与实际需要最贴近类型的材质组件就可以，材质类型是可以自定义的，我们先从熟悉引擎提供的材质开始。
      还记得前文介绍的网格(Mesh)吗，每个网格至少由几何数据和材质数据组成，不同的类型对应不同的材质类，需要对应的材质类型直接实例化该类型的材质，赋值于网络的材质属性。

      UnLitMaterial(无光材质)

      这种材质可以简单称为无光材质，忽略所有的光照的计算，所以计算性能非常高，可以作为背景使用，由于没有光的影响也可以作为一些不受光影响的特殊效果。

      支持的参数

      这里试用几个参数，更多的参数还要看官方文档。

      • baseColor（基础颜色）：对材质的基础颜色进行设置，设置后覆盖了该材质的物体看起来会叠加上基础颜色。
      let color:Color = new Color();
let material:UnLitMaterial = new UnLitMaterial();
material.baseColor = color;
      • baseMap（基础贴图）：对材质的基础贴图进行设置，设置后覆盖了该材质的物体会由该贴图覆盖

      完成代码

      前几次我们对一个立方体非常熟悉了，今天我们仍然创建一个立方体，但是使用UnLitMaterial材质，并覆盖一张贴图，同时可以动态的调整基础颜色。

      import { Engine3D, Scene3D, Object3D, Camera3D, HoverCameraController, MeshRenderer, BoxGeometry, HDRLitMaterial, ForwardRenderJob, Stats, UnLitMaterial, Color } from "@orillusion/core";
import * as dat from 'dat.gui';

export default class Unlit {

    cameraObj: Object3D;

    camera: Camera3D;

    scene: Scene3D;

    boxObj: Object3D;

    material:UnLitMaterial;

    async run() {

        await this.init();

        await this.setup();

        await this.start();
    }

    /***
     * 配置并初始化引擎
     */
    private async init() {
        // 初始化引擎
        await Engine3D.init();
    }

    /**
     * 引擎功能代码
     */
    private async setup() {
        // 创建一个场景
        this.scene = new Scene3D();

        // 添加性能监控面板
        this.scene.addComponent(Stats);
        // 创建一个相机
        this.cameraObj = new Object3D();
        this.camera = this.cameraObj.addComponent(Camera3D);
        // 设置相机类型
        this.camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
        // 设置相机控制器
        let controller = this.cameraObj.addComponent(HoverCameraController);
        controller.setCamera(20, -20, 25);
        // 添加相机至场景
        this.scene.addChild(this.cameraObj);

        this.createBox();

        this.addGUI();

    }

    /**
     * 启动渲染
     */
    private async start() {
        // 创建前向渲染
        let renderJob: ForwardRenderJob = new ForwardRenderJob(this.scene);
        // 开始渲染
        Engine3D.startRender(renderJob);
    }

    /**
     * 创建立方体
     */
    private async createBox() {
        // 创建一个对象
        this.boxObj = new Object3D();
        // 挂载脚本
        // 创建渲染组件
        let mr: MeshRenderer = this.boxObj.addComponent(MeshRenderer);
        // 设置形状
        mr.geometry = new BoxGeometry(5, 5, 5);

        this.material = new UnLitMaterial();

        // 设置基础贴图
        this.material.baseMap = await Engine3D.res.loadTexture('textures/diffuse.jpg');
        // 设置材质
        mr.material = this.material;
        // 添加到场景
        this.scene.addChild(this.boxObj);

    }

    private async addGUI(){
        // 创建 dat 实例
        const gui = new dat.GUI();
        // 创建保存属性值对象
        const materialInfo = {
            baseColor:'#fff',
        };

        // 设置材质颜色
        gui.addColor(materialInfo, "baseColor").onChange((v) => {
            console.log('baseColor:', v);
            let color:Color = new Color();
            color.setHex(v);
            this.material.baseColor = color;
        });
    }

}

      运行效果如下：
      e3720fc2-d2f9-478a-bf76-9c1f4139a3ff-image.png
      调整颜色会看到颜色会叠加到物体上。

      LambertMaterial（兰伯特材质）

      材质是与光分不开的，Lambert材质是与Lambert光照模型对应的，简单说一句Lambert是一种经验性质的简化的光照模型，据说只处理漫反射，其它类型全忽略，因此Lambert只能模拟粗糙的物体表面，像镜面类的完全不适合，如果是衣料，石头之类的表面粗糙的非常适用。

      支持的参数

      与Unlit类同。

      完成代码

      代码与Unlit也是类同的，只是把材质的类型由UnlitMaterial换成LambertMaterial，这里就不占用篇幅了。
      看一下基础的运行效果：
      31a588c4-04ef-46f5-a597-48c7733a52b1-image.png

      HDRLitMaterial（物理材质）

      能看到Lmabert比Unlit更进了一步，尽管只考虑了一种光，至少有光的参与了，可见材质也是不断的丰富起来，计算的因素多了起来，与实际效果更接近了。看到各大引擎都是主推物理材质，所以除非计算机性能实在拉垮，否则还是多熟悉使用物理材质吧，大势所趋。过去我们的例子默认也是用的这种材质。

      支持参数

      物理材质支持的参数比较多，这里我们只验证个别几个属性，更多的属性可以对着文档一一验证。

      • baseColor（基础颜色）：材质本身的颜色，可以使用一个Color类型的变量设置
      • roughness（粗糙度）：模拟物体表面粗糙的程度，随着数值变大物体会看起来更粗糙
      • metallic（金属度）：模拟物体表面金属的程度，随着数值的变化物体会看起来更光滑

      运行效果

      使用这三个参数调节显示效果如下：
      7f4b687d-e333-4f87-9e7e-f9a0b9bf0608-image.png

      综合示例

      不同的材质主要还是对光的处理不同，这里我们写一个综合的实例，将三种材质放到一个场景下，在一个聚光灯照射下观察效果，这里我们提前借用一下光源的组件，可以暂时不必在意，后续会专门介绍。

      示例代码

      import { Engine3D, Scene3D, Object3D, Camera3D, HoverCameraController, MeshRenderer, BoxGeometry, HDRLitMaterial, ForwardRenderJob, Stats, Color, LambertMaterial, UnLitMaterial, Vector3, MaterialBase, SpotLight, SphereGeometry, defaultTexture } from "@orillusion/core";
import * as dat from 'dat.gui';

export default class Materials {

    spotLight: SpotLight;

    cameraObj: Object3D;

    camera: Camera3D;

    scene: Scene3D;

    boxObj: Object3D;

    hdrMaterial: HDRLitMaterial;
    lambertMaterial: LambertMaterial;
    unlitMaterial: UnLitMaterial;

    async run() {

        await this.init();
        await this.setup();

        await this.start();
    }

    /***
     * 配置并初始化引擎
     */
    private async init() {
        // 初始化引擎
        await Engine3D.init();
    }

    /**
     * 引擎功能代码
     */
    private async setup() {
        // 创建一个场景
        this.scene = new Scene3D();

        // 添加性能监控面板
        this.scene.addComponent(Stats);
        // 创建一个相机
        this.cameraObj = new Object3D();
        this.camera = this.cameraObj.addComponent(Camera3D);
        // 设置相机类型
        this.camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
        // 设置相机控制器
        let controller = this.cameraObj.addComponent(HoverCameraController);
        controller.setCamera(20, -20, 25);
        // 添加相机至场景
        this.scene.addChild(this.cameraObj);

        this.hdrMaterial = new HDRLitMaterial();
        this.lambertMaterial = new LambertMaterial();
        this.unlitMaterial = new UnLitMaterial();

        this.createBox(new Vector3(-10, 0, 0), this.unlitMaterial);
        this.createBox(new Vector3(0, 0, 0), this.lambertMaterial);
        this.createBox(new Vector3(10, 0, 0), this.hdrMaterial);

        this.createLight();
        this.createFloor();

        this.addGUI();

    }

    /**
     * 启动渲染
     */
    private async start() {
        // 创建前向渲染
        let renderJob: ForwardRenderJob = new ForwardRenderJob(this.scene);
        // 开始渲染
        Engine3D.startRender(renderJob);
    }

    private async createLight() {
        let sp = new SphereGeometry(0.5, 10, 10);

        let spotLightObj = new Object3D();
        let mr = spotLightObj.addComponent(MeshRenderer);
        mr.geometry = sp;
        mr.material = new HDRLitMaterial();

        this.spotLight = spotLightObj.addComponent(SpotLight);
        this.scene.addChild(spotLightObj);
        spotLightObj.y = 10;

    }

    /**
     * 创建立方体
     */
    private async createBox(location: Vector3, matrix: MaterialBase) {
        // 创建一个对象
        this.boxObj = new Object3D();
        this.boxObj.localPosition = location;
        // 创建渲染组件
        let mr: MeshRenderer = this.boxObj.addComponent(MeshRenderer);
        // 设置形状
        mr.geometry = new BoxGeometry(5, 5, 5);

        // 设置材质
        mr.material = matrix;
        // 添加到场景
        this.scene.addChild(this.boxObj);

    }

    private async createFloor(){
        let floor = new Object3D();
        floor.y = -2.5;
        let mat = new HDRLitMaterial();
        mat.baseMap = defaultTexture.grayTexture;
        let mr = floor.addComponent(MeshRenderer);
        mr.geometry = new BoxGeometry(40, 1, 30);
        mr.material = mat;
        this.scene.addChild(floor);
    }

    private async addGUI() {
        // 创建 dat 实例
        const gui = new dat.GUI();

        const lightInfo = {
            x:0,
            y:0,
            z:0,
            rotationX:0,
            rotationY:0,
            rotationZ:0,
            lightColor:'#fff',
        }

        let lightFolder = gui.addFolder("Light");
        lightFolder.add(lightInfo, "x", -10, 10).onChange((v) => {
            console.log('x:', v);
            this.spotLight.transform.x = v;
        });
        lightFolder.add(lightInfo, "y", -10, 10).onChange((v) => {
            console.log('y:', v);
            this.spotLight.transform.y = v;
        });
        lightFolder.add(lightInfo, "z", -10, 10).onChange((v) => {
            console.log('z:', v);
            this.spotLight.transform.z = v;
        });
        lightFolder.add(lightInfo, "rotationX", -360, 360).onChange((v) => {
            console.log('rotationX:', v);
            this.spotLight.transform.rotationX = v;
        });
        lightFolder.add(lightInfo, "rotationY", -360, 360).onChange((v) => {
            console.log('rotationY:', v);
            this.spotLight.transform.rotationY = v;
        });
        lightFolder.add(lightInfo, "rotationZ", -360, 360).onChange((v) => {
            console.log('rotationZ:', v);
            this.spotLight.transform.rotationZ = v;
        });
        lightFolder.addColor(lightInfo, "lightColor").onChange((v) => {
            console.log('lightColor:', v);
            let color: Color = new Color();
            color.setHex(v);
            this.spotLight.lightColor = color;
        });

        // 创建保存属性值对象
        const unlitInfo = {
            baseColor: '#fff'

        };

        let unlitFolder = gui.addFolder("UnlitMaterial");
        // 设置材质颜色
        unlitFolder.addColor(unlitInfo, "baseColor").onChange((v) => {
            console.log('baseColor:', v);
            let color: Color = new Color();
            color.setHex(v);
            this.unlitMaterial.baseColor = color;
        });

        // 创建保存属性值对象
        const lambertInfo = {
            baseColor: '#fff'

        };

        let lambertFolder = gui.addFolder("LambertMaterial");
        // 设置材质颜色
        lambertFolder.addColor(lambertInfo, "baseColor").onChange((v) => {
            console.log('baseColor:', v);
            let color: Color = new Color();
            color.setHex(v);
            this.lambertMaterial.baseColor = color;
        });

        // 创建保存属性值对象
        const pdrInfo = {
            baseColor: '#fff',
            roughness: 0.01,
            metallic: 0.01,

        };

        let hdrFolder = gui.addFolder("PDRMaterial");
        // 设置材质颜色
        hdrFolder.addColor(pdrInfo, "baseColor").onChange((v) => {
            console.log('baseColor:', v);
            let color: Color = new Color();
            color.setHex(v);
            this.hdrMaterial.baseColor = color;
        });

        // 材质粗糙程度
        hdrFolder.add(pdrInfo, "roughness", 0, 1).onChange((v) => {
            console.log('roughness:', v);
            this.hdrMaterial.roughness = v;
        });

        // 材质粗糙程度
        hdrFolder.add(pdrInfo, "metallic", 0, 1).onChange((v) => {
            console.log('metallic:', v);
            this.hdrMaterial.metallic = v;
        });

    }

}

      运行效果

      718ac9eb-6100-49cb-b7a6-34446ab03a37-image.png

      小结

      继几何体后，引擎对常用材质做了封装，使用户可以不必自己编写shader，创建一个对应的类，设置参数就可以得到一个可用的材质，用来丰富物体。材质的种类还有一些，不过当前只发现了三种，期待后续会有更多的材质可以使用。
      作为3D新手，后续会不断的记录学习过程，期待与你一起学习一起飞！

      1 条回复 最后回复 回复 引用 0
      • First post
        Last post

      Recent Post

      • 请问有没有本次测试所使用的threejs、babylon和orillusion的源码？

        • 阅读更多
      • B

        哪位大佬知道，纹理闪烁是怎么回事吗？.

        • 阅读更多

      • @StephenChips 同求

        • 阅读更多
      • A

        请问这个入门系列有 demo 代码没有

        • 阅读更多
      • O

        经过几次的学习已经能够构建出一个空间(场景)，并在空间中创建物体(几何体)，物体可以有不同的外观(材质)，与现实的效果足够逼真(光照)，终于把最重要的相关性最强的几部分3D功能用起来了。不过面对这块空间想做点什么，又感觉缺少了点什么，是的，只能观看不能操作，如果我要通过键盘、鼠标对场景进行实时的干预该如何做呢，经过了解输入系统可以满足我们的要求。

        输入系统

        输入系统是个比较杂乱的部分，不同平台都有对应的封装，我们可以回忆一下Win32编程将键盘和鼠标的输入集成到了事件系统，用户操作按键或操作鼠标会触发对应的消息码，指示消息，附带参数包含具体的按键信息或鼠标信息，按键信息一般包含按键码或鼠标键位。再回忆一下DOM的事件系统，使用addEventListener将click或mouse类的事件挂载，然后在回调函数中获得结果……
        回忆结束我们可以总结出来几个输入系统的特点：1、挂载感兴趣的事件；2、回调函数得到触发时处理业务逻辑。需要注意的是，键盘需要有按键表进行区分按键，对应的是鼠标需要区分不同按键，以及屏幕坐标，辅助键等一些附属信息。
        出于好奇orilluson的输入系统如何实现的，找来源码进行了一个大体的了解，可以看到输入系统的核心类是InputSystem，该类继承于CEventDispatcher类，CEventDispatcher类是可调度事件的所有类的基类,包含了事件的注册,注销，分发和清理等功能实现。内部保存了监听对象列表，当有消息需要处理时通过遍历监听器列表触发回调函数。InputSystem继承了CEventDispatcher类的事件处理能力外着重实现了键盘鼠标的事件处理。
        具体执行步骤如下：

        Engine3D.init：初始化引擎后，实例化了InputSystem类，并将canvas实例传入InputSystem类； InputSystem.initCanvas：InputSystem监听了画布的键盘与鼠标事件； addEventListener：引擎或对象通过addEventListener函数来挂载用户监听； dispatchEvent：当有挂载的监听事件响应时，回调函数会得执行。
        在输入系统的支持下，可以很轻松的使用键盘和鼠标与触控。
        输入系统的回调事件在类CEvent中，先熟悉一下这个类的常用定义： type：事件类型对应的一个字符串常量； param：注册事件时传递的参数，在注册事件时写入的参数在这里可以读出； ctrlKey：事件发生时 Ctrl 是否被按下，通过查询该键的值来判断Ctrl键的状态； altKey：事件发生时 Alt 是否被按下，通过查询该键的值来判断Alt键的状态； shiftKey：事件发生时 Shift 是否被按下，通过查询该键的值来判断Shift键的状态； 关于坐标

        一直以来的学习路径是以实用为主，但是现在必须要接触一点点不能称之为理论的理论了，那就是坐标系统。

        世界坐标

        首先要解决一个困惑的地方，过去在3D空间中的所有坐标都可以称为世界坐标，世界坐标是三维的，有三个维度(x，y，z)，一般在引擎中创建可以由系统使用，开发用户程序需要遵守引擎对于世界的规划，相当于场景作为一个空间，世界坐标是对这个空间制定的规则。这里歪个楼，骇客帝国之所以叫矩阵，是不是因为在3D引擎中对空间世界的处理也是以矩阵为基础的。再拉回来，世界坐标一般以(0,0,0)为中心，我们创建的物体默认的位置也是在这里的，这里是世界的中心，一般分为右手或左手坐标系，好了关于世界坐标系这里已经够用了。

        屏幕坐标

        说回到屏幕坐标是我们过去所熟悉的，首先屏幕坐标是一个二维坐标，以像素为单位，屏幕的左下角为起点，向屏幕的左侧和上方依次是x和y坐标的正向。在网页开发中我们通过DOM事件系统获得的当前坐标一般都是指的屏幕坐标。在网页开发中并不是绝对的没有z轴，CSS中的z-index属性是否可以理解成一种z轴坐标呢。

        相互转换

        屏幕坐标是我们最终渲染到屏的最终展现形式，世界坐标是在三维空间内的标识，两者经常需要相互转换，例如今天需要讨论的输入系统的使用。假设在屏幕上点击了一个位置，需要转换到世界坐标，相似的在世界坐标内的位置或距离也需要转换为屏幕坐标。
        坐标转换有标准的算法，这里我们不必如此费力，完全可以借助引擎的工具，经过一翻查找，在相机组件的实现类Camera3D，有坐标转换的工具，可以一起熟悉一下

        object3DToScreenRay：世界坐标转换屏幕坐标； ScreenRayToObject3D：屏幕坐标转换为世界坐标； 键盘输入

        使用键盘输入，首先需要熟悉两种键盘事件：

        KEY_DOWN：键盘按下事件，使用输入系统挂载该事件，将会得到按下键盘事件通知； KEY_UP：键盘弹起事件，使用输入系统挂载该事件，将会得到弹起键盘事件通知；
        下面来一起梳理一下使用流程： 初始化：必要的引擎初始化； 输入挂载：使用键盘挂载系统指定事件和回调； 处理回调：在回调中获取参数。 基础示例

        这里写了一个最基本的示例，只将键盘的事件打印了出来。

        import { Engine3D, Scene3D, Object3D, Camera3D, HoverCameraController, ForwardRenderJob, DirectLight, KeyEvent } from "@orillusion/core"; export default class Keyboard { cameraObj: Object3D; camera: Camera3D; scene: Scene3D; boxObj: Object3D; async run() { await this.init(); await this.setup(); await this.start(); } /*** * 配置并初始化引擎 */ private async init() { // 初始化引擎 await Engine3D.init(); // 创建一个场景 this.scene = new Scene3D(); // 创建一个相机 this.cameraObj = new Object3D(); this.camera = this.cameraObj.addComponent(Camera3D); // 设置相机类型 this.camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0); // 设置相机控制器 let controller = this.cameraObj.addComponent(HoverCameraController); controller.setCamera(20, -20, 25); // 添加相机至场景 this.scene.addChild(this.cameraObj); } /** * 引擎功能代码 */ private async setup() { Engine3D.inputSystem.addEventListener(KeyEvent.KEY_UP, this.keyUp, this); Engine3D.inputSystem.addEventListener(KeyEvent.KEY_DOWN, this.keyDown, this); } /** * 启动渲染 */ private async start() { // 创建前向渲染 let renderJob: ForwardRenderJob = new ForwardRenderJob(this.scene); // 开始渲染 Engine3D.startRender(renderJob); } private keyDown(e: KeyEvent) { console.log('keyDown:', e.keyCode, e); } private keyUp(e: KeyEvent) { console.log('keyUp:', e.keyCode, e); } }

        运行这个示例后，在场景中按下或弹起键盘，在控制台能够看到输出。

        KeyEvent

        在回调函数中获得的参数类型是KeyEvent，KeyEvent是CEvent的子类，除了CEvent类的参数外，对于键盘事件的使用主要在于对该类型的解析，这里需要详细的了解事件的参数细节，常用到的需要进行一个了解：

        keyCode：按键code值,枚举类型可以参考官方文档的KeyCode定义。 鼠标与触控

        电脑端的鼠标操作与移动端的触控操作有许多共同的地方，在具体用法时如果能够合并为一，是可以节省一半的事件挂载操作的，不过需要留意触控与鼠标的事件对应关系。
        有了前面键盘操作的基础，鼠标与触控使用类型，我们先看支持的事件类型：

        POINTER_CLICK：触摸点击事件，对应鼠标的单击事件； POINTER_MOVE：触摸滑动事件，对应鼠标的移动事件 POINTER_DOWN：触摸开始事件， POINTER_UP：触摸结束事件 POINTER_OUT：触摸滑出事件
        既然已经合并了，后面鼠标与触控用触控来说明吧。 基础示例

        先实现一个最基础的触控功能，与键盘类似，先注册事件，然后响应事件。

        import { Engine3D, Scene3D, Object3D, Camera3D, HoverCameraController, ForwardRenderJob, PointerEvent3D } from "@orillusion/core"; export default class Mouse { cameraObj: Object3D; camera: Camera3D; scene: Scene3D; async run() { await this.init(); await this.setup(); await this.start(); } /*** * 配置并初始化引擎 */ private async init() { // 初始化引擎 await Engine3D.init(); // 创建一个场景 this.scene = new Scene3D(); // 创建一个相机 this.cameraObj = new Object3D(); this.camera = this.cameraObj.addComponent(Camera3D); // 设置相机类型 this.camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0); // 设置相机控制器 let controller = this.cameraObj.addComponent(HoverCameraController); controller.setCamera(20, -20, 25); // 添加相机至场景 this.scene.addChild(this.cameraObj); } /** * 引擎功能代码 */ private async setup() { Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_UP, this.onUp, this); Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_DOWN, this.onDown, this); Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_CLICK, this.onPick, this); Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_OVER, this.onOver, this); Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_OUT, this.onOut, this); Engine3D.inputSystem.addEventListener(PointerEvent3D.POINTER_MOVE, this.onMove, this); } /** * 启动渲染 */ private async start() { // 创建前向渲染 let renderJob: ForwardRenderJob = new ForwardRenderJob(this.scene); // 开始渲染 Engine3D.startRender(renderJob); } private onUp(e: PointerEvent3D) { console.log('onUp:',e); } private onDown(e: PointerEvent3D) { console.log('onDown:',e); } private onPick(e: PointerEvent3D) { console.log('onPick:',e); } private onOver(e: PointerEvent3D) { console.log('onOver:',e); } private onOut(e: PointerEvent3D) { console.log('onOut:',e); } private onMove(e: PointerEvent3D) { console.log('onMove:',e); } } PointerEvent3D

        触控的参数是以PointerEvent3D类型作为回调函数的参数传递到应用，PointerEvent3D是CEvent的子类，除了CEvent类的参数外，需要熟悉一下这个类型的关键字段。

        mouseX：当前鼠标所在位置的X坐标； mouseY：当前鼠标所在位置的Y坐标； movementX：当前事件和上一个鼠标事件之间鼠标在水平方向上的移动值； movementY：当前事件和上一个鼠标事件之间鼠标在垂直方向上的移动值；
        坐标系列的数值请注意，可以使用前面相机组件提供的转换函数进行转换，不必自己写算法进行转换。 由对象挂载

        前面的挂载直接由引擎的输入系统挂载，这样在整个场景中都会响应，如果只需要在一个物体中响应鼠标的事件，我们可以将事件挂在物体上，为什么可以这么做呢，找出来代码可以看到，物体的容器是Object3D类，而Object3D类是Entiry的子类，Entity的父类是CEventDispatcher类，正是因为Object3D通过CEventDispatcher，继承了事件的能力。这一套继承加组件式的结构，实在是太好用了，有没有。
        这样就有了以下的代码：

        // 创建一个对象 this.boxObj = new Object3D(); this.boxObj.localPosition = new Vector3(0,0,0); // 创建渲染组件 let mr: MeshRenderer = this.boxObj.addComponent(MeshRenderer); // 设置形状 mr.geometry = new BoxGeometry(5, 5, 5); // 设置材质 mr.material = new HDRLitMaterial(); // 添加到场景 this.scene.addChild(this.boxObj); boxObj.addEventListener(PointerEvent3D.PICK_CLICK, this.onClick, this); onClick(e: PointerEvent3D) { console.log('onPick:',e); }

        运行后可以在控制台看到输出

        小结

        经过前面几次的学习，已经能够完事的构建出一个空间了，但是这块空间仍然缺乏灵动的能力，不能随时响应我们的操控，输入系统是一个随时干预系统的大杀器，可以让我们获得掌控感，是否控制欲获得了满足。
        今天只是一些最基础的用法，发挥想象力可以使这个空间好玩起来了。
        作为3D新手，后续会不断的记录学习过程，期待与你一起学习一起飞！

        • 阅读更多

      Copyright © 2022 Orillusion | Contact US