tinyjs-plugin-mars

Mars 插件

注意事项

• 该插件不支持Mars滤镜，如使用到滤镜需要引入mars-player项目的滤镜系统
• 按照tiny实际应用的画布大小来制作mars动效

查看demo

http://tinyjs.net/plugins/tinyjs-plugin-mars.html#demo

引用方法

• 推荐作为依赖使用

  • npm install tinyjs-plugin-mars --save

• 也可以直接引用线上cdn地址，注意要使用最新的版本号，例如：

  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-mars/0.3.10/index.js
  • https://gw.alipayobjects.com/os/lib/tinyjs-plugin-mars/0.3.10/index.debug.js

起步

首先当然是要引入，推荐NPM方式，当然你也可以使用CDN或下载独立版本，先从几个例子入手吧！

1、最简单的例子

引用 Tiny.js 源码

<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.5.0/tiny.js"></script>

import * as mars from 'tinyjs-plugin-mars';

const app = new Tiny.Application({
  ...
  renderOptions: {
    preserveDrawingBuffer: true,
    transparent: true,
  },
});
const loader = new Tiny.loaders.Loader();
const container = new Tiny.Container();
const player = new mars.Player(app.renderer);

loader
  .add({
    name: 'marsRes',
    url: 'https://gw.alipayobjects.com/os/gltf-asset/mars-cli/RHFPJNXPWOBN/-1085805134-4f3cc.json',
  })
  .load(function (loader, res) {
    const scene = res.marsRes.scene;
    const marsContainer = player.generateContainer(scene);

    container.addChild(marsContainer);
  });

app.run(container);

2、锁定相机

即：使用 Mars 编辑器设置的相机（与显示对象位置有关）

const marsContainer = player.generateContainer(scene, {
  fixCamera: true,
});

3、事件绑定

const marsContainer = player.generateContainer(scene, {
  interactive: true,
  delegate: {
    onItemClicked(e) {
      console.log(e);
    },
  },
});

4、改变形态

const marsContainer = player.generateContainer(scene);
const action = Tiny.MoveBy(1000, Tiny.point(10, 20));

marsContainer.setPosition(100);
marsContainer.setRotation(Tiny.deg2radian(135));
marsContainer.runAction(Tiny.RepeatForever(action));

5、使用 JSON Object

const marsJSONObject = '{"compositionId":2,"requires":[],...}';

loader.add({
  url: 'marsRes',
  metadata: {
    JSONObject: marsJSONObject,
  },
  xhrType: Tiny.loaders.Resource.XHR_RESPONSE_TYPE.JSONOBJECT,
});

6、降级相关

TinyJS 的 Mars 插件会在你设置 metadata.holder 时自动检测当前环境是否支持渲染 Mars，如果不支持，就渲染 holder 所提供的图片。

loader.add({
  name: 'marsRes',
  url: '...',
  metadata: {
    // 是否直接降级，默认 false，自动检测当前环境是否支持渲染 Mars 来决策是否走降级方案。如果为 true，则直接降级，不使用自动检测
    directDowngrade: true,
    // 降级方案，使用占位图
    holder: 'https://gw.alipayobjects.com/mdn/rms_87dcb9/afts/img/A*Qp57S7dolLgAAAAAAAAAAAAAARQnAQ',
  },
})

7、资源维持

此功能会告诉 Mars 插件，如果此 Mars 资源重复使用，是否使用已经装载的资源，而不用每次都重新拉取。

const marsContainer = player.generateContainer(scene, {
  keepResource: true
});

8、使用压缩纹理

和 TinyJS 标准使用姿势一致

loader.add([{
  name: 'marsRes',
  url: '...',
  metadata: {
    useCompressedTexture: true,
  },
}]);

依赖

• Tiny.js: Link

API文档

http://tinyjs.net/plugins/tinyjs-plugin-mars.html#docs

License

MIT license.