做了一个 WebGL 的粒子效果 3D 佩奇，祝大家新年快乐~

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2166 天前的主题，其中的信息可能已经有所发展或是发生改变。

ThingJS 在 V 站投了不少广告啦，大家应该都知道我们是做 3D 可视化的啦~快放假了，做一个小猪佩奇的粒子特效 demo，蹭蹭热度，祝大家春节快乐~有 3D 应用开发需求可以试试 ThingJS

大家可以扫码玩一下~有个小彩蛋

DEMO：佩奇粒子特效

第 1 条附言 · 2019-01-28 18:03:49 +08:00

有些同学想要源码，放到百度云了： https://pan.baidu.com/s/1fhf3Zdc1d4ebn0OEyS7xjA

代码复制到 http://www.thingjs.com/guide/?m=sample 可以直接运行，如果要修改模型需要自己上传，改背景换资源文件就行了

粒子

thingjs

佩奇

Demo

41 条回复 • 2019-10-17 20:17:00 +08:00

xiangbulala

2019-01-26 17:07:21 +08:00

据说佩奇后面这个福字能扫到敬业福...

designer

2019-01-26 17:10:14 +08:00 via iPhone

非常棒！

FYK

2019-01-26 17:19:45 +08:00

扩胸为啥都是你在推广你们的程序员呢

geshansuiyue

2019-01-26 17:22:40 +08:00

话说这不是乔治吗

xiangbulala

2019-01-26 17:36:06 +08:00

@geshansuiyue 卧槽真的么！

xiangbulala

2019-01-26 17:38:41 +08:00

@geshansuiyue 骗我，乔治是圆的

xiangbulala

2019-01-26 17:38:57 +08:00

@FYK 写 bug 呢...

xupefei

2019-01-26 18:26:03 +08:00

BUG 报告：真正的佩奇侧面有两只眼（见 6L 图），但你的模型里只有一只眼。3D 模型应该有四只眼才对，请修复！

JinChen

2019-01-26 18:48:00 +08:00 via iPhone

@xupefei 这个好像是这么回事😂

rashawn

2019-01-26 18:50:48 +08:00 via iPhone

http://www.chinabimdata.org/m-index.html?from=timeline&isappinstalled=0#/model-detail/5c46bc87950a426f1ee95645

NonClockworkChen

2019-01-26 21:54:23 +08:00

切换变福字，是真的精髓，牛逼。

jecshcier

2019-01-26 22:00:26 +08:00 via iPhone

ios 测试无法显示，旋转了只看到部分烟花

Mijjj

2019-01-27 04:38:30 +08:00 via iPhone

@jecshcier iOS 可以看到福字、猪以及转换效果

keith1126

2019-01-27 11:25:48 +08:00

多点几次佩奇,就会发现彩蛋哦

alw

2019-01-28 09:46:14 +08:00

这玩意蛮简单的，做两个 3D 模型，然后把顶点显示出来，触发转换时，利用 tween.js 移动顶点。

zepto

2019-01-28 09:46:57 +08:00

原来佩琪的正面这么猎奇

ihoey

2019-01-28 13:08:27 +08:00 via Android

打开音频一直报错，不知道是不是因为在微信

Tink

2019-01-28 13:21:56 +08:00 via iPhone

@jecshcier #12 你的问题

leloext

2019-01-28 13:32:17 +08:00

https://pbs.twimg.com/media/Dw_nNdeXQAAuWXM.jpg

jseanj

2019-01-28 15:33:27 +08:00

你这个不对，佩奇是 4 只眼睛的

jseanj

2019-01-28 15:35:51 +08:00

![]( http://dingyue.nosdn.127.net/sGTDUGah7DLQ3kC8EGW5SjMXebyjORS8IM9SrkJsmgaxZ1524108086448.jpg)

chinayeke

2019-01-28 17:06:23 +08:00

LZ 有源码么？允许我改一下发朋友圈装个 X

xiangbulala

2019-01-28 17:11:46 +08:00

@chinayeke 怎么给你邮箱？

gipsymoth

2019-01-28 17:34:44 +08:00

@xiangbulala 发我一份饿也想装个 X [email protected] 谢谢

xiangbulala

2019-01-28 17:51:03 +08:00

@gipsymoth 发啦

xiangbulala

2019-01-28 18:08:34 +08:00

@chinayeke APPENDl 传到百度云了

zhouyut001

2019-01-28 18:55:34 +08:00

不是应该有 4 个眼睛的嘛？

EyreFree

2019-01-28 19:20:56 +08:00

看起来很酷炫...

SomeBottle

2019-01-29 14:37:47 +08:00

这不是我印象中的比目猪

xiangbulala

2019-01-30 15:11:50 +08:00

这个角度的佩奇看起来好神奇...

lovejunjie1

2019-01-30 15:35:31 +08:00

你这个佩奇是假的，只有一只眼

xiangbulala

2019-01-30 15:40:31 +08:00

@lovejunjie1 是是是，我应该用这只猪才对

locoz

2019-01-30 16:01:40 +08:00

@xiangbulala #32 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈

lovejunjie1

2019-01-30 17:44:02 +08:00

@xiangbulala 哈哈哈哈哈哈哈哈哈哈哈哈哈哈

gsanidt

2019-01-30 17:52:59 +08:00

源码放百度盘，这个是为什么？

xiangbulala

2019-01-30 17:56:44 +08:00

@gsanidt 因为不知道放哪

mamahaha

2019-01-30 18:49:51 +08:00

ThingJS 比 threejs 好使吗？

xupefei

2019-01-30 19:44:46 +08:00

@xiangbulala #32 你这个模型还是有 BUG：
1 ）如果从左边看的话，佩奇的鼻孔没了。正确的模型应该有四个鼻孔，鼻子应该是三角形突出的。
2 ）从左侧看的话，耳朵位置不对。耳朵应该是居中的。
请修复！

dyxang

2019-02-03 22:09:54 +08:00 via Android

楼主我想知道如何在自己网站运行这个……

xiangbulala

2019-02-20 15:42:48 +08:00

@dyxang iframe 过去

@gsanidt 因为不知道放在哪方便下载

@mamahaha 比 three.js 简单些

xcmkxcmk81

2019-10-17 20:17:00 +08:00

@xiangbulala 请问你是否接私活外包呀