Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

examples: add example 'offscreen-render'

This commit is contained in:
Haowei Wen 2020-09-10 01:39:19 +08:00
parent da09d950aa
commit 80bb7a049c
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
2 changed files with 86 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/index.html
View File

@ -96,6 +96,11 @@
label { label {
white-space: nowrap; white-space: nowrap;
} }
.control-section ul {
margin-top: 0;
padding-left: 20px;
}
</style> </style>
</head> </head>
@ -190,6 +195,13 @@
</div> </div>
</div> </div>
<div class="control-section">
<h1>Other examples</h1>
<ul>
<li><a href="offscreen-render.html">offscreen-render</a></li>
</ul>
</div>
</div> </div>
<footer> <footer>

74
examples/offscreen-render.html Normal file
View File

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>skinview3d / offscreen-render</title>
</head>
<body>
<div id="rendered_imgs"></div>
<script src="../bundles/skinview3d.bundle.js"></script>
<script>
const textures = [
{
skin: "img/1_8_texturemap_redux.png",
cape: null
},
{
skin: "img/hacksore.png",
cape: "img/legacy_cape.png"
},
{
skin: "img/haka.png",
cape: null
},
{
skin: "img/hatsune_miku.png",
cape: "img/mojang_cape.png"
},
{
skin: "img/ironman_hd.png",
cape: "img/hd_cape.png"
},
{
skin: "img/sethbling.png",
cape: null
}
];
(async function () {
const skinViewer = new skinview3d.FXAASkinViewer({
width: 200,
height: 300,
alpha: false,
renderPaused: true
});
skinViewer.renderer.setClearColor(0x5a76f3);
skinViewer.camera.rotation.x = -0.620;
skinViewer.camera.rotation.y = 0.534;
skinViewer.camera.rotation.z = 0.348;
skinViewer.camera.position.x = 30.5;
skinViewer.camera.position.y = 18.0;
skinViewer.camera.position.z = 42.0;
for (const { skin, cape } of textures) {
await Promise.all([skinViewer.loadSkin(skin), skinViewer.loadCape(cape)]);
skinViewer.render();
const image = skinViewer.canvas.toDataURL();
const imgElement = document.createElement("img");
imgElement.src = image;
imgElement.width = skinViewer.width;
imgElement.height = skinViewer.height;
document.getElementById("rendered_imgs").appendChild(imgElement);
}
skinViewer.dispose();
})();
</script>
</body>
</html>