|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>depthmap-viewer-three</title>
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.dropzone {
|
|
box-sizing: border-box;
|
|
display: none;
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 99999;
|
|
background: rgba(#60a7dc, .8);
|
|
border: 11px dashed #60a7dc;
|
|
}
|
|
</style>
|
|
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three@0.154.0/build/three.module.js",
|
|
"three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
import { OrbitControls } from "three/addons/controls/OrbitControls";
|
|
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
|
|
|
|
var rgbBase64Img = window.frameElement?.getAttribute('data-rgb') || "public/images/rgb.png"
|
|
var depthBase64Img = window.frameElement?.getAttribute('data-depth') || "public/images/depth.png"
|
|
|
|
|
|
|
|
let mesh;
|
|
let material;
|
|
let stopAnimation = false;
|
|
|
|
const settings = {
|
|
metalness: 0.0,
|
|
roughness: 0.5,
|
|
ambientIntensity: 0.85,
|
|
displacementScale: 100,
|
|
displacementBias: -0.5,
|
|
};
|
|
const meshSettings = {
|
|
rotation: {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0
|
|
}
|
|
}
|
|
|
|
|
|
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
|
|
camera.position.z = 3;
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
|
scene.add(ambientLight);
|
|
|
|
const pointLight = new THREE.PointLight(0xff0000, 0.5);
|
|
pointLight.position.z = 2500;
|
|
scene.add(pointLight);
|
|
|
|
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setAnimationLoop(animation);
|
|
|
|
renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
|
renderer.toneMappingExposure = 1;
|
|
renderer.outputEncoding = THREE.sRGBEncoding;
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
|
|
function animation(time) {
|
|
if (mesh && !stopAnimation) {
|
|
mesh.rotation.x = 0.5 * Math.sin(time / 2000);
|
|
mesh.rotation.y = 0.5 * Math.sin(time / 2000);
|
|
meshSettings.rotation.x = mesh.rotation.x;
|
|
meshSettings.rotation.y = mesh.rotation.y;
|
|
}
|
|
renderer.render(scene, camera);
|
|
|
|
}
|
|
|
|
function onWindowResize() {
|
|
|
|
const aspect = window.innerWidth / window.innerHeight;
|
|
camera.aspect = aspect;
|
|
camera.updateProjectionMatrix();
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
}
|
|
window.addEventListener('resize', onWindowResize);
|
|
|
|
|
|
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableZoom = true;
|
|
controls.enableDamping = true;
|
|
|
|
async function getCanvasTexture(imageSrc) {
|
|
return new Promise((resolve, reject) => {
|
|
const image = new Image();
|
|
image.src = imageSrc;
|
|
image.onload = () => {
|
|
const ctx = document.createElement('canvas').getContext('2d');
|
|
ctx.canvas.width = image.width;
|
|
ctx.canvas.height = image.height;
|
|
ctx.drawImage(image, 0, 0, image.width, image.height);
|
|
const texture = new THREE.CanvasTexture(ctx.canvas);
|
|
resolve(texture);
|
|
}
|
|
})
|
|
|
|
}
|
|
(async () => {
|
|
const rgbTexture = await getCanvasTexture(rgbBase64Img);
|
|
const depthTexture = await getCanvasTexture(depthBase64Img);
|
|
|
|
if (mesh) {
|
|
mesh.geometry.dispose();
|
|
mesh.material.dispose();
|
|
scene.remove(mesh);
|
|
}
|
|
|
|
material = new THREE.MeshStandardMaterial({
|
|
|
|
color: 0xaaaaaa,
|
|
roughness: settings.roughness,
|
|
metalness: settings.metalness,
|
|
|
|
map: rgbTexture,
|
|
|
|
displacementMap: depthTexture,
|
|
displacementScale: settings.displacementScale,
|
|
displacementBias: settings.displacementBias,
|
|
|
|
side: THREE.DoubleSide
|
|
|
|
});
|
|
|
|
const geometry = new THREE.PlaneGeometry(rgbTexture.image.width, rgbTexture.image.height, 512, 512);
|
|
mesh = new THREE.Mesh(geometry, material);
|
|
const scale = 1 / Math.max(rgbTexture.image.width, rgbTexture.image.height);
|
|
mesh.scale.set(scale, scale, scale);
|
|
scene.add(mesh);
|
|
|
|
})()
|
|
|
|
|
|
|
|
|
|
const gui = new GUI();
|
|
gui.close();
|
|
const sceneGUI = gui.addFolder('Scene');
|
|
sceneGUI.add(settings, 'metalness').min(0).max(1).onChange(function (value) {
|
|
material.metalness = value;
|
|
});
|
|
sceneGUI.add(settings, 'roughness').min(0).max(1).onChange(function (value) {
|
|
material.roughness = value;
|
|
});
|
|
sceneGUI.add(settings, 'ambientIntensity').min(0).max(1).onChange(function (value) {
|
|
ambientLight.intensity = value;
|
|
});
|
|
sceneGUI.add(settings, 'displacementScale').min(0).max(500.0).onChange(function (value) {
|
|
material.displacementScale = value;
|
|
});
|
|
sceneGUI.add(settings, 'displacementBias').min(-500).max(500).onChange(function (value) {
|
|
material.displacementBias = value;
|
|
});
|
|
const meshGUI = gui.addFolder('Mesh');
|
|
meshGUI.add(meshSettings.rotation, 'x').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
|
|
mesh.rotation.x = value;
|
|
stopAnimation = true;
|
|
}).listen()
|
|
|
|
|
|
meshGUI.add(meshSettings.rotation, 'y').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
|
|
mesh.rotation.y = value;
|
|
stopAnimation = true;
|
|
}).listen()
|
|
|
|
|
|
meshGUI.add(meshSettings.rotation, 'z').min(-Math.PI).max(Math.PI).step(0.0001).onChange(function (value) {
|
|
mesh.rotation.z = value;
|
|
stopAnimation = true;
|
|
}).listen()
|
|
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
</body>
|
|
|
|
</html> |
