tinyjs-plugin-mars
v1.2.2
Published
The Tiny.js plugin for Mars
Downloads
92
Readme
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.