| | <!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> |
