PS&JavaScript教程创建动态3D照片

PS&JavaScript教程创建动态3D照片

在本教程中,我们将向您展示如何使用JavaScript和Pixi.js webGL库从图像创建3D照片的幻觉。让我们来看看!

这个概念

因此,为了将普通照片变成3D照片,我们需要使用深度图(或者有人会调用置换贴图或高度贴图)就像名称所说的那样,深度贴图是一个图像文件,用于显示每个像素的深度。

教程视频

哔哩哔哩观看:

(由于b站对外嵌视频支持不好建议点此观看原视频

YouTube观看:

(YouTube可以直接观看,欢迎去我的频道点赞转发评论哦!点此观看原视频

懒人代码部分:

让我们首先下载最新版本的Pixi.js并将其包含在页面中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3d立体</title>
</head>
<body>
<script src="pixi.js"></script>
<script>

let app = new PIXI.Application({width: window.innerWidth, height: window.innerHeight});
document.body.appendChild(app.view);

let img = new PIXI.Sprite.from("1.jpg");
img.width = window.innerWidth;
img.height = window.innerHeight;
app.stage.addChild(img);

depthMap = new PIXI.Sprite.from("2.jpg");
app.stage.addChild(depthMap);

displacementFilter = new PIXI.filters.DisplacementFilter(depthMap);
app.stage.filters = [displacementFilter];

window.onmousemove = function(e) {
displacementFilter.scale.x = (window.innerWidth / 2 - e.clientX) /20;
displacementFilter.scale.y = (window.innerHeight / 2 - e.clientY) /20;
};

</script>
</body>
</html>

我希望这有助于你并设计灵感。
欣赏这个视频……
在另一个视频中看到你。

感谢收看,如果您有任何疑问,请发表评论,或者您对下一个视频教程有一些不错的建议。

如果你喜欢这个视频,请按,然后分享。
期望在下一个教程中见到你,You see see one day day de。

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×