Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
2b2217b5
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
2b2217b5
编写于
10月 29, 2020
作者:
M
Mr.doob
提交者:
GitHub
10月 29, 2020
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #20585 from mrdoob/lottie
Added LottieLoader
上级
e99f3e5e
887a0d60
变更
7
展开全部
隐藏空白更改
内联
并排
Showing
7 changed file
with
12961 addition
and
0 deletion
+12961
-0
examples/files.json
examples/files.json
+1
-0
examples/js/libs/lottie_canvas.js
examples/js/libs/lottie_canvas.js
+12751
-0
examples/jsm/loaders/LottieLoader.d.ts
examples/jsm/loaders/LottieLoader.d.ts
+13
-0
examples/jsm/loaders/LottieLoader.js
examples/jsm/loaders/LottieLoader.js
+71
-0
examples/screenshots/webgl_loader_texture_lottie.jpg
examples/screenshots/webgl_loader_texture_lottie.jpg
+0
-0
examples/textures/lottie/24017-lottie-logo-animation.json
examples/textures/lottie/24017-lottie-logo-animation.json
+1
-0
examples/webgl_loader_texture_lottie.html
examples/webgl_loader_texture_lottie.html
+124
-0
未找到文件。
examples/files.json
浏览文件 @
2b2217b5
...
...
@@ -119,6 +119,7 @@
"webgl_loader_texture_hdr"
,
"webgl_loader_texture_ktx"
,
"webgl_loader_texture_ktx2"
,
"webgl_loader_texture_lottie"
,
"webgl_loader_texture_pvrtc"
,
"webgl_loader_texture_rgbm"
,
"webgl_loader_texture_tga"
,
...
...
examples/js/libs/lottie_canvas.js
0 → 100755
浏览文件 @
2b2217b5
此差异已折叠。
点击以展开。
examples/jsm/loaders/LottieLoader.d.ts
0 → 100644
浏览文件 @
2b2217b5
import
{
CanvasTexture
,
Loader
,
LoadingManager
}
from
'
../../../src/Three
'
;
export
class
LottieLoader
extends
Loader
{
constructor
(
manager
?:
LoadingManager
);
load
(
url
:
string
,
onLoad
:
(
texture
:
CanvasTexture
)
=>
void
,
onProgress
?:
(
event
:
ProgressEvent
)
=>
void
,
onError
?:
(
event
:
ErrorEvent
)
=>
void
)
:
void
;
}
examples/jsm/loaders/LottieLoader.js
0 → 100644
浏览文件 @
2b2217b5
import
{
FileLoader
,
Loader
,
CanvasTexture
}
from
"
../../../build/three.module.js
"
;
var
LottieLoader
=
function
(
manager
)
{
Loader
.
call
(
this
,
manager
);
};
LottieLoader
.
prototype
=
Object
.
assign
(
Object
.
create
(
Loader
.
prototype
),
{
constructor
:
LottieLoader
,
load
:
function
(
url
,
onLoad
,
onProgress
,
onError
)
{
const
texture
=
new
CanvasTexture
();
const
loader
=
new
FileLoader
(
this
.
manager
);
loader
.
setPath
(
this
.
path
);
loader
.
setWithCredentials
(
this
.
withCredentials
);
loader
.
load
(
url
,
function
(
text
)
{
const
data
=
JSON
.
parse
(
text
);
// bodymoving uses container.offetWidth and offsetHeight
// to define width/height
const
container
=
document
.
createElement
(
'
div
'
);
container
.
style
.
width
=
data
.
w
+
'
px
'
;
container
.
style
.
height
=
data
.
h
+
'
px
'
;
document
.
body
.
appendChild
(
container
);
const
animation
=
bodymovin
.
loadAnimation
(
{
container
:
container
,
animType
:
'
canvas
'
,
loop
:
true
,
autoplay
:
true
,
animationData
:
data
,
rendererSettings
:
{
dpr
:
1
}
}
);
texture
.
animation
=
animation
;
texture
.
image
=
animation
.
container
;
animation
.
addEventListener
(
'
enterFrame
'
,
function
()
{
texture
.
needsUpdate
=
true
;
}
);
container
.
style
.
display
=
'
none
'
;
if
(
onLoad
!==
undefined
)
{
onLoad
(
texture
);
}
},
onProgress
,
onError
);
return
texture
;
}
}
);
export
{
LottieLoader
};
examples/screenshots/webgl_loader_texture_lottie.jpg
0 → 100644
浏览文件 @
2b2217b5
4.1 KB
examples/textures/lottie/24017-lottie-logo-animation.json
0 → 100644
浏览文件 @
2b2217b5
此差异已折叠。
点击以展开。
examples/webgl_loader_texture_lottie.html
0 → 100644
浏览文件 @
2b2217b5
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - lottie loader
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<link
type=
"text/css"
rel=
"stylesheet"
href=
"main.css"
>
</head>
<body>
<div
id=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener"
>
three.js
</a>
webgl - lottie
<br/></br>
<input
id=
"scrubber"
type=
"range"
value=
"0"
style=
"width: 300px"
>
</div>
<script
src=
"js/libs/lottie_canvas.js"
></script>
<script
type=
"module"
>
import
*
as
THREE
from
'
../build/three.module.js
'
;
import
{
LottieLoader
}
from
'
./jsm/loaders/LottieLoader.js
'
;
let
renderer
,
scene
,
camera
;
let
mesh
;
init
();
animate
();
function
init
()
{
camera
=
new
THREE
.
PerspectiveCamera
(
50
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
10
);
camera
.
position
.
z
=
3
;
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x222222
);
//
const
loader
=
new
LottieLoader
();
loader
.
load
(
'
textures/lottie/24017-lottie-logo-animation.json
'
,
function
(
texture
)
{
setupControls
(
texture
.
animation
);
const
geometry
=
new
THREE
.
BoxBufferGeometry
();
const
material
=
new
THREE
.
MeshBasicMaterial
(
{
map
:
texture
}
);
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
}
);
//
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
setupControls
(
animation
)
{
// console.log( animation );
const
scrubber
=
document
.
getElementById
(
'
scrubber
'
);
scrubber
.
max
=
animation
.
totalFrames
;
scrubber
.
addEventListener
(
'
pointerdown
'
,
function
()
{
animation
.
pause
();
}
);
scrubber
.
addEventListener
(
'
pointerup
'
,
function
()
{
animation
.
play
();
}
);
scrubber
.
addEventListener
(
'
input
'
,
function
()
{
animation
.
goToAndStop
(
parseFloat
(
scrubber
.
value
),
true
);
}
);
animation
.
addEventListener
(
'
enterFrame
'
,
function
()
{
scrubber
.
value
=
animation
.
currentFrame
;
}
);
}
function
onWindowResize
()
{
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
}
//
function
animate
()
{
requestAnimationFrame
(
animate
);
if
(
mesh
)
{
mesh
.
rotation
.
x
+=
0.001
;
mesh
.
rotation
.
y
+=
0.01
;
}
renderer
.
render
(
scene
,
camera
);
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录