Skip to content

Instantly share code, notes, and snippets.

@wrr

wrr/body-end.html

Created Dec 21, 2020
Embed
What would you like to do?
Convert text into an HTML canvas and use it as a Shapespark texture.
<style>
#input-section {
position: absolute;
top: 0px;
width: 256px;
z-index: 200;
}
</style>
<div id="input-section">
<input id="text-input" type="text">
</div>
<script>
var viewer = WALK.getViewer();
viewer.setMaterialEditable('rug');
function textToCanvas(text) {
var canvas = document.createElement('canvas');
canvas.width = 1024;
canvas.height = 1024;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#add8e6';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.font = '700 128px Noto Sans'
ctx.fillStyle = '#ffffff';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, canvas.width / 2, canvas.height / 2);
return canvas;
}
function sceneReadyToDisplay() {
var rugMaterial = viewer.findMaterial('rug');
var textInput = document.getElementById('text-input');
textInput.addEventListener('input', function(event) {
var canvas = textToCanvas(event.target.value);
var texture = new WALK.Texture(canvas);
texture.width = canvas.width;
texture.height = canvas.height;
texture.hasAlpha = false;
texture.minFilter = GLC.LINEAR;
texture.wrapS = GLC.REPEAT;
texture.wrapT = GLC.REPEAT;
texture.needsUpdate = true;
texture.notifyLoaded();
if (rugMaterial.baseColorTexture) {
rugMaterial.baseColorTexture.dispose();
}
rugMaterial.baseColorTexture = texture;
viewer.requestFrame();
});
};
viewer.onSceneReadyToDisplay(sceneReadyToDisplay);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment