HTML5 Canvas Room 3D Model Animation Readable Microphone and Camera

HTML5 Canvas Room 3D Model Animation Readable Microphone and Camera: BY Scott15 Jan,2021; Tags:
HTML5 3D HTML5 Animation HTML5 Canvas

Introduction

This is a 3D room simulation animation based on HTML5 Canvas. The room has a TV, sofa, bookcase, lamps and a character model, which are all drawn on Canvas. What's more, this 3D animation can use HTML5 features to read the local microphone and camera so that you can project yourself onto the TV through the camera, which looks pretty amazing.

HTML5 Canvas Room 3D Model Animation Readable Microphone and Camera

Instructions

HTML Body Code

function generate_color(x,y,z){
	if(x < 1){
		x += .01;
	}else{
		x = 0;
	}
	if(y < 1){
		y += .01;
	}else{
		y = 0;
	}
	if(z < 1){
		z += .01;
	}else{
		z = 0;
	}

	return [x,y,z];
}

function getRandomColor() {
    var letters = '0123433333000ccc'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }

    return color;
}

Css Code

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  min-width: 100%;
  min-height: 100%;
  background-color: #222;
  font-family: 'Lato', sans-serif;
}

body {
  font-size: 80%;
  font-weight: lighter;
  background: radial-gradient(#1A5970 0%, #000 100%);
  overflow: hidden;
}

canvas {
  -webkit-filter: drop-shadow(0 0 3em black);
          filter: drop-shadow(0 0 3em black);
}

video#myVideo {
  position: absolute;
  top: 0;
}

VIEW NOW