Skip to content

F
fyge_for_tb
Commit e0d95fd4 authored by wjf's avatar wjf
Browse files
Options

2.0.43

parent 2822220d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 16 deletions
build/FYGE.d.ts
View file @ e0d95fd4
declare namespace FYGE{export const VERSION = "2.0.42";
declare namespace FYGE{export const VERSION = "2.0.43";
export const osType: "ios" | "android" | "pc";
......@@ -11285,6 +11285,10 @@ export class Spine extends Container {
private findSlotIndex;
private findSkin;
getAttachment(slotIndex: number, attachmentName: string): any;
/**
* 帧率，即每秒帧数，默认60
*/
fps: number;
private lastTime;
update(): void;
updateTransform(): void;
......
build/fyge.min.js
View file @ e0d95fd4
This diff is collapsed.
build/fyge.min.js.map
View file @ e0d95fd4
This diff is collapsed.
build/types.d.ts
View file @ e0d95fd4
export const VERSION = "2.0.42";
export const VERSION = "2.0.43";
export const osType: "ios" | "android" | "pc";
......@@ -11285,6 +11285,10 @@ export class Spine extends Container {
private findSlotIndex;
private findSkin;
getAttachment(slotIndex: number, attachmentName: string): any;
/**
* 帧率，即每秒帧数，默认60
*/
fps: number;
private lastTime;
update(): void;
updateTransform(): void;
......
examples/previewGlbGltf.html
View file @ e0d95fd4
......@@ -28,6 +28,8 @@
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<div id="anis" style="position: absolute;z-index: 999;top:5%;width: 5%;">
</div>
<script>
window.addEventListener("load", async function () {
//舞台
......@@ -42,6 +44,7 @@
false,
window.devicePixelRatio || 1
);
stage.addWebMouseEvent();
var text = stage.addChild(new FYGE.TextField());
text.size = 50;
text.textWidth = 750;
......@@ -56,6 +59,35 @@
requestAnimationFrame(loop)
})()
//3d相关
var scene = new FYGE.Scene3D()
//加入舞台
stage.addChild(scene);
//相机在场景里面
scene.camera.position.set(10, 10, 10)
scene.camera.lookAt(0, 0, 0)
//设置一下相机的比例
scene.camera.set(undefined, stage.viewRect.width / stage.viewRect.height, 0.1, 100000.00)
// scene.viewY = 500;
//3d视窗y与stage适配
scene.viewY = stage.viewRect.y;
//手势移动相机，暂时只有旋转
scene.setOrbitControl();
//视窗宽度
scene.viewWidth = 750;
//视窗高度
scene.viewHeight = stage.viewRect.height;
//坐标轴
scene.addChild(new FYGE.AxesHelper(10000));
//网格
scene.addChild(new FYGE.GridHelper(20, 20, 0xffffff, 0x00000))
//灯光
var pl = scene.addChild(new FYGE.DirectionalLight(0xffffff, 0.5))
pl.position.set(1, 1, 1)
scene.addChild(new FYGE.DirectionalLight(0xffffff, 0.5))
.position.set(-1, 1, -1)
var pl = scene.addChild(new FYGE.AmbientLight(0xffffff, 0.4))
var URL = window.webkitURL || window.URL;
var container = document.getElementById("cusEngine");
/*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
......@@ -77,18 +109,26 @@
}, false);
name = files[0].name;
console.log(name)
if (name.toLowerCase().indexOf("glb") == -1 || name.toLowerCase().indexOf("gltf") == -1) {
if (name.toLowerCase().indexOf("glb") == -1 && name.toLowerCase().indexOf("gltf") == -1) {
console.warn("请拖入glb文件或gltf文件")
return;
}
var src = URL.createObjectURL(files[0]);
//清空
stage.removeAllChildren();
stage.removeChild(text);
FYGE.loadGltf(
src,
(gltf) => {
let con = new FYGE.Object3D().copy(gltf.scene);
scene.addChild(con);
// let con = new FYGE.Object3D().copy(gltf.scene);
// scene.addChild(con);
let con = new FYGE.Object3D();
scene.addChild(con)
// con.scale.set(0.02, 0.02, 0.02)//把children拷贝一边出来，否则上面的方式，动画无效
for (let i = gltf.scene.children.length - 1; i >= 0; i--) {
let o = gltf.scene.children[i]
con.addChild(o)
}
//尺寸需要处理一下
// con.scale.set(0.02, 0.02, 0.02)
// for (let i = gltf.scene.children.length - 1; i >= 0; i--) {
......@@ -99,6 +139,8 @@
console.log("scene:", gltf)
console.log("动画：", gltf.animations)
con.mouseEnable = con.mouseChildren = false;
if (!gltf.animationManager) return;
var lastTime = Date.now()
con.addEventListener(FYGE.Event.ENTER_FRAME, () => {
let now = Date.now();
......@@ -106,6 +148,23 @@
lastTime = now
gltf.animationManager.update(dt / 1000)
}, this)
//动画播放按钮
var arr = gltf.animations;
var div = document.getElementById("anis");
div.innerHTML = ""
for (var i = 0; i < arr.length; i++) {
let ani = arr[i];
var o = document.createElement("input");
o.type = "button";
o.style.margin = "7px";
o.style.minWidth = "50px";
o.value = ani.name;
o.addEventListener("click", () => {
console.log(ani.name)
gltf.animationManager.showAni(ani.name, 999)
});
div.appendChild(o)
}
// gltf.animationManager.showAni("Dance", 999)
},
(err) => { console.warn(err) }
......
package.json
View file @ e0d95fd4
{
"name": "fyge",
"version": "2.0.42",
"version": "2.0.43",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......
record.txt
View file @ e0d95fd4
......@@ -458,6 +458,7 @@
2.0.42 Event里添加FOCUS事件
EditableText的initElement方法加上htmlElement.onfocus事件的派发
2.0.43 Spine添加属性fps帧率，同时update方法里delta乘上fps/60
外层canvas标签的transform数据在获取鼠标坐标时并未考虑，比如旋转
......
src/2d/const.ts
View file @ e0d95fd4
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.42";
export const VERSION = "2.0.43";
/**
......
src/3d/gltf/GLTFLoader.ts
View file @ e0d95fd4
......@@ -147,12 +147,12 @@ export interface GltfData {
/**
* 直接拿数据解析
* @param json
* @param json 对象数据，可以是序列化的字符串，不能是二进制数据
* @param onLoad
* @param onError
* @param extensions
* @param extensions 内部调用传，外部使用不需要
*/
export function parseGltf(
export function parseGltf(
json: any,
onLoad: (gltf: GltfData) => void,
onError: (err: any) => void,
......@@ -195,9 +195,10 @@ export function loadGltf(
try {
var content: string;
var extensions = {};
if (typeof res === 'string') {
if (typeof res === 'string') {//其实加载到的肯定是二进制对象
content = res;
} else {
//glb文件加载到的magic=glTF，而gltf文件加载到的就是普通的字符串转的二进制数据
var magic = decodeText(new Uint8Array(res, 0, 4));
if (magic === BINARY_EXTENSION_HEADER_MAGIC) {
try {
......
src/spine/Spine.ts
View file @ e0d95fd4
......@@ -495,13 +495,18 @@ export class Spine extends Container {
// return (this.skin || this.defaultSkin).getAttachment(slotIndex, attachmentName) || null
}
/**
* 帧率，即每秒帧数，默认60
*/
fps: number = 60;
private lastTime: number
update() {
var now = Date.now()
var delta = this.lastTime ? (now - this.lastTime) * 0.001 : 0.01667
this.lastTime = now;
//动画更新，比如bone的基础属性
this.animationManager.update(delta);
this.animationManager.update(delta * this.fps / 60);
// this.updateSlots();
// this.updateDrawOrder();放到下面执行
super.update();
......@@ -663,7 +668,7 @@ export class Spine extends Container {
}
else {
// this.children[i] = slotContainer;
this.slotContainer.addChildAt(slot,i)//.children[i] = slot;
this.slotContainer.addChildAt(slot, i)//.children[i] = slot;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment