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 源码
`` html

`
` js
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 编辑器设置的相机（与显示对象位置有关）

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

##### 3、事件绑定

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

##### 4、改变形态

` js
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

` js
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 所提供的图片。

` js
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 资源重复使用，是否使用已经装载的资源，而不用每次都重新拉取。

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

##### 8、使用压缩纹理

和 TinyJS 标准使用姿势一致

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

依赖


- Tiny.js`: Link

API文档

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

License

MIT license.