Skip to content

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

2.0.41和2.0.42

parent 1e9dd75d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 26 deletions
build/FYGE.d.ts
View file @ 2822220d
declare namespace FYGE{export const VERSION = "2.0.40"; declare namespace FYGE{export const VERSION = "2.0.42";
export const osType: "ios" | "android" | "pc"; export const osType: "ios" | "android" | "pc";
...@@ -309,6 +309,16 @@ export class Event extends HashObject { ...@@ -309,6 +309,16 @@ export class Event extends HashObject {
* @since 1.0.0 * @since 1.0.0
*/ */
static BLUR: string; static BLUR: string;
/**
* 输入框聚焦事件
* @Event
* @property FOCUS
* @type {string}
* @static
* @public
* @since 1.0.0
*/
static FOCUS: string;
/** /**
* 输入框输入事件 * 输入框输入事件
* @Event * @Event
...@@ -10455,6 +10465,8 @@ export interface GltfData { ...@@ -10455,6 +10465,8 @@ export interface GltfData {
parser: GLTFParser; parser: GLTFParser;
} }
export function parseGltf(json: any, onLoad: (gltf: GltfData) => void, onError: (err: any) => void, extensions?: any): void;
export function loadGltf(url: string, onLoad: (gltf: GltfData) => void, onError: (err: any) => void): void; export function loadGltf(url: string, onLoad: (gltf: GltfData) => void, onError: (err: any) => void): void;
export class GLTFParser { export class GLTFParser {
......
build/fyge.min.js
View file @ 2822220d
This diff is collapsed.
build/fyge.min.js.map
View file @ 2822220d
This diff is collapsed.
build/types.d.ts
View file @ 2822220d
export const VERSION = "2.0.40"; export const VERSION = "2.0.42";
export const osType: "ios" | "android" | "pc"; export const osType: "ios" | "android" | "pc";
...@@ -309,6 +309,16 @@ export class Event extends HashObject { ...@@ -309,6 +309,16 @@ export class Event extends HashObject {
* @since 1.0.0 * @since 1.0.0
*/ */
static BLUR: string; static BLUR: string;
/**
* 输入框聚焦事件
* @Event
* @property FOCUS
* @type {string}
* @static
* @public
* @since 1.0.0
*/
static FOCUS: string;
/** /**
* 输入框输入事件 * 输入框输入事件
* @Event * @Event
...@@ -10455,6 +10465,8 @@ export interface GltfData { ...@@ -10455,6 +10465,8 @@ export interface GltfData {
parser: GLTFParser; parser: GLTFParser;
} }
export function parseGltf(json: any, onLoad: (gltf: GltfData) => void, onError: (err: any) => void, extensions?: any): void;
export function loadGltf(url: string, onLoad: (gltf: GltfData) => void, onError: (err: any) => void): void; export function loadGltf(url: string, onLoad: (gltf: GltfData) => void, onError: (err: any) => void): void;
export class GLTFParser { export class GLTFParser {
......
examples/2d.html
View file @ 2822220d
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
// var ss = stage.addChild(new FYGE.EditableText()) // var ss = stage.addChild(new FYGE.EditableText())
// ss.size = 40; // ss.size = 40;
// ss.prompt = "啊实打实大苏打" // ss.prompt = "啊实打实大苏打"
// ss.addEventListener("oninput",(e)=>{ // ss.addEventListener("onInput",(e)=>{
// console.log(e) // console.log(e)
// }) // })
......
examples/previewGlbGltf.html 0 → 100644
View file @ 2822220d
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>预览Glb或Gltf模型</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<style>
body,
html {
background-color: #ccc;
margin: 0px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
</style>
<script src="//yun.duiba.com.cn/db_games/libs0924/svgaParser.minWeb.js" crossorigin="anonymous"></script>
<script src="../build/fyge.min.js"></script>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0;position: absolute;">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<script>
window.addEventListener("load", async function () {
//舞台
var stage = new FYGE.Stage(
document.getElementById("canvas"),
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL,
false,
false,
window.devicePixelRatio || 1
);
var text = stage.addChild(new FYGE.TextField());
text.size = 50;
text.textWidth = 750;
text.textAlign = "center";
text.textHeight = stage.stageHeight;
text.verticalAlign = "middle"
text.fillColor = "#999999";
text.text = "拖入glb文件或\ngltf文件";
(function loop() {
stage.flush();
FYGE.Tween.flush();
requestAnimationFrame(loop)
})()
var URL = window.webkitURL || window.URL;
var container = document.getElementById("cusEngine");
/*拖拽的目标对象------ document 监听drop 并防止浏览器打开客户端的图片*/
document.ondragover = function (e) {
e.preventDefault(); //只有在ondragover中阻止默认行为才能触发 ondrop 而不是 ondragleave
};
document.ondrop = function (e) {
e.preventDefault(); //阻止 document.ondrop的默认行为 *** 在新窗口中打开拖进的图片
};
/*拖拽的源对象----- 客户端的一张图片 */
/*拖拽目标对象-----div#container 若图片释放在此元素上方，则需要在其中显示*/
container.ondragover = function (e) {
e.preventDefault();
};
container.ondrop = function (e) {
var files = [];
[].forEach.call(e.dataTransfer.files, function (file) {
files.push(file);
}, false);
name = files[0].name;
console.log(name)
if (name.toLowerCase().indexOf("glb") == -1 || name.toLowerCase().indexOf("gltf") == -1) {
console.warn("请拖入glb文件或gltf文件")
return;
}
var src = URL.createObjectURL(files[0]);
//清空
stage.removeAllChildren();
FYGE.loadGltf(
src,
(gltf) => {
let con = new FYGE.Object3D().copy(gltf.scene);
scene.addChild(con);
//尺寸需要处理一下
// con.scale.set(0.02, 0.02, 0.02)
// for (let i = gltf.scene.children.length - 1; i >= 0; i--) {
// let o = gltf.scene.children[i]
// con.addChild(o)
// }
// con.z = -5
console.log("scene:", gltf)
console.log("动画：", gltf.animations)
con.mouseEnable = con.mouseChildren = false;
var lastTime = Date.now()
con.addEventListener(FYGE.Event.ENTER_FRAME, () => {
let now = Date.now();
var dt = now - lastTime
lastTime = now
gltf.animationManager.update(dt / 1000)
}, this)
// gltf.animationManager.showAni("Dance", 999)
},
(err) => { console.warn(err) }
)
}
})
</script>
<!-- <script src="http://172.16.228.98:8090/dist/index.js"></script>
<script>
agent.start()
setTimeout(()=>{
sssss
},1000)
</script> -->
</body>
</html>
\ No newline at end of file
examples/previewLottieSvga.html
View file @ 2822220d
...@@ -42,6 +42,14 @@ ...@@ -42,6 +42,14 @@
false, false,
window.devicePixelRatio || 1 window.devicePixelRatio || 1
); );
var text = stage.addChild(new FYGE.TextField());
text.size = 50;
text.textWidth = 750;
text.textAlign = "center";
text.textHeight = stage.stageHeight;
text.verticalAlign = "middle"
text.fillColor = "#999999";
text.text = "拖入svga文件或\nlottie的json文件";
(function loop() { (function loop() {
stage.flush(); stage.flush();
FYGE.Tween.flush(); FYGE.Tween.flush();
......
package.json
View file @ 2822220d
{ {
"name": "fyge", "name": "fyge",
"version": "2.0.40", "version": "2.0.42",
"description": "canvas渲染引擎", "description": "canvas渲染引擎",
"main": "./build/fyge.min.js", "main": "./build/fyge.min.js",
"types": "./build/types.d.ts", "types": "./build/types.d.ts",
......
record.txt
View file @ 2822220d
...@@ -453,12 +453,18 @@ ...@@ -453,12 +453,18 @@
ShaderMaterial文件里UniformType新增any类型 ShaderMaterial文件里UniformType新增any类型
Sprite3dMaterial添加uFrameUvs，涉及片元着色器，uniforms字段，map的set方法需要多处理uFrameUvs Sprite3dMaterial添加uFrameUvs，涉及片元着色器，uniforms字段，map的set方法需要多处理uFrameUvs
2.0.41 GLTFLoader封装parseGltf，并导出，可直接拿数据解析
2.0.42 Event里添加FOCUS事件
EditableText的initElement方法加上htmlElement.onfocus事件的派发
外层canvas标签的transform数据在获取鼠标坐标时并未考虑，比如旋转 外层canvas标签的transform数据在获取鼠标坐标时并未考虑，比如旋转
记录为了trim过的纹理，需要处理片元着色器，浮点数就是纹理原uv，再trim矩形内部的才绘制，考虑是否用discard，考虑用宏定义还是if，还是所有的都传都计算 //记录为了trim过的纹理，需要处理片元着色器，浮点数就是纹理原uv，再trim矩形内部的才绘制，考虑是否用discard，考虑用宏定义还是if，还是所有的都传都计算
"vec2 s = step(vec2(0.6669921875,0.4111328125),vTextureCoord) - step(vec2(0.951171875,0.65625),vTextureCoord);", //"vec2 s = step(vec2(0.6669921875,0.4111328125),vTextureCoord) - step(vec2(0.951171875,0.65625),vTextureCoord);",
"color *= abs(s.x * s.y);", //"color *= abs(s.x * s.y);",
大尺寸纹理首次传gpu使用时会掉帧，越大耗时越多。考虑如何处理（图片解析还是啥） 大尺寸纹理首次传gpu使用时会掉帧，越大耗时越多。考虑如何处理（图片解析还是啥）
......
src/2d/const.ts
View file @ 2822220d
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
* @name VERSION * @name VERSION
* @type {string} * @type {string}
*/ */
export const VERSION = "2.0.40"; export const VERSION = "2.0.42";
/** /**
......
src/2d/events/Event.ts
View file @ 2822220d
...@@ -148,6 +148,16 @@ export class Event extends HashObject { ...@@ -148,6 +148,16 @@ export class Event extends HashObject {
* @since 1.0.0 * @since 1.0.0
*/ */
public static BLUR: string = "onBlur"; public static BLUR: string = "onBlur";
/**
* 输入框聚焦事件
* @Event
* @property FOCUS
* @type {string}
* @static
* @public
* @since 1.0.0
*/
public static FOCUS: string = "onFocus";
/** /**
* 输入框输入事件 * 输入框输入事件
* @Event * @Event
......
src/2d/text/EditableText.ts
View file @ 2822220d
...@@ -174,6 +174,11 @@ export class EditableText extends TextField { ...@@ -174,6 +174,11 @@ export class EditableText extends TextField {
//抛出原生的input的事件 //抛出原生的input的事件
if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e) if (s.hasEventListener(Event.INPUT)) s.dispatchEvent(Event.INPUT, e)
} }
//聚焦事件
htmlElement.onfocus = function (e) {
//抛出原生的聚焦的事件
if (s.hasEventListener(Event.FOCUS)) s.dispatchEvent(Event.FOCUS, e)
}
} }
destroy() { destroy() {
......
src/3d/gltf/GLTFLoader.ts
View file @ 2822220d
...@@ -144,6 +144,40 @@ export interface GltfData { ...@@ -144,6 +144,40 @@ export interface GltfData {
parser: GLTFParser, parser: GLTFParser,
// userData: {} // userData: {}
} }
/**
* 直接拿数据解析
* @param json
* @param onLoad
* @param onError
* @param extensions
*/
export function parseGltf(
json: any,
onLoad: (gltf: GltfData) => void,
onError: (err: any) => void,
extensions?
) {
//如果是字符串
if (typeof json === 'string') json = JSON.parse(json);
//
var parser = new GLTFParser(json, extensions);
parser.parse(function (scene, scenes, cameras, animations, json) {
const obj: any = {
scene,
scenes,
cameras,
animations,
asset: json.asset,
parser,
// userData: {}
}
//有动画，创建一个管理器
if (animations && animations.length) obj.animationManager = new AnimationManager(animations);
onLoad(obj)
}, onError);
}
/** /**
* 直接按函数导出，不用类， * 直接按函数导出，不用类，
* TODO 后续是否考虑优化，gltf格式其实不需要用二进制解析，再说吧，就怕后缀能修改， * TODO 后续是否考虑优化，gltf格式其实不需要用二进制解析，再说吧，就怕后缀能修改，
...@@ -183,22 +217,25 @@ export function loadGltf( ...@@ -183,22 +217,25 @@ export function loadGltf(
onError && onError("版本格式有问题") onError && onError("版本格式有问题")
return; return;
} }
var parser = new GLTFParser(json, extensions);
parseGltf(json, onLoad, onError, extensions)
parser.parse(function (scene, scenes, cameras, animations, json) {
const obj: any = { // var parser = new GLTFParser(json, extensions);
scene,
scenes, // parser.parse(function (scene, scenes, cameras, animations, json) {
cameras, // const obj: any = {
animations, // scene,
asset: json.asset, // scenes,
parser, // cameras,
// userData: {} // animations,
} // asset: json.asset,
//有动画，创建一个管理器 // parser,
if (animations && animations.length) obj.animationManager = new AnimationManager(animations); // // userData: {}
onLoad(obj) // }
}, onError); // //有动画，创建一个管理器
// if (animations && animations.length) obj.animationManager = new AnimationManager(animations);
// onLoad(obj)
// }, onError);
} catch (e) { } catch (e) {
onError && onError(e); onError && onError(e);
} }
...@@ -213,6 +250,7 @@ export function loadGltf( ...@@ -213,6 +250,7 @@ export function loadGltf(
// } // }
GlobalLoader.loadAB(callback, url); GlobalLoader.loadAB(callback, url);
} }
/** /**
* 去掉了除mesh和node以外的所有东西（骨骼，线等都没有） * 去掉了除mesh和node以外的所有东西（骨骼，线等都没有）
* 动画需要烘焙打点 * 动画需要烘焙打点
......
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