webgl实现图片直接变成三维立体雕像交互效果代码

代码语言:html

所属分类:三维

代码描述:webgl实现图片直接变成三维立体雕像交互效果代码,通过webgl结合canvas直接将一张人物图片变成三凹凸雕像效果。

代码标签: webgl 图片 变成 三维 立体 雕像 交互

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    body, html {
	touch-action: none;
	content-zooming: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

canvas {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background:#000;
	cursor: crosshair;
}
img {visibility: hidden;}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<canvas></canvas>
<img id="heightmap" src="data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0