viteGradio/src/3Dviewer.jsx

import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

import MyTexture from  "./assets/input.png";
import MyDepth from  "./assets/image (2).png";

import './App.css';
 const renderer = new THREE.WebGLRenderer({ antialias: true });

function Render3D(isVisible) {
    let mesh;
    let material;
    let image_ar;
    

    const settings = {
        metalness: 0.0,
        roughness: 0.14,
        ambientIntensity: 0.85,
        displacementScale: 5, 
        displacementBias: -0.5,
        emissive: 0xffffff,
    };

    // init
    const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 3.5;

    const scene = new THREE.Scene();

    const ambientLight = new THREE.AmbientLight( 0xffffff, 4 );
    scene.add( ambientLight );

    const pointLight = new THREE.PointLight( 0xff0000, 1 );
    pointLight.position.z = 2500;
    scene.add( pointLight );

   
    // const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth/1.3, window.innerHeight/1.5 );
    renderer.setAnimationLoop( animation );
    //renderer.xr.enabled = true;
    renderer.toneMapping = THREE.ACESFilmicToneMapping;
    renderer.toneMappingExposure = 1;
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    document.body.appendChild( renderer.domElement )
    //console.log("isVisible ", isVisible)
    

    // animation
    function animation( time ) {

        //mesh.rotation.x = time / 2000;
        //mesh.rotation.y = time / 1000;

        renderer.render( scene, camera );

    }

    function onWindowResize() {

        const aspect = window.innerWidth / window.innerHeight;
        camera.aspect = aspect;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth/1.3, window.innerHeight/1.5 );

    }
    window.addEventListener( 'resize', onWindowResize );


    // orbit controls
    const controls = new OrbitControls( camera, renderer.domElement );
    controls.enableZoom = true;
    controls.enableDamping = true;


    const image = new Image();
    const image2 = new Image();
    (image.onload) = function() { 

        if (mesh) {
            mesh.geometry.dispose();
            mesh.material.dispose();
            scene.remove( mesh );
        }
        
        image_ar = image.width / image.height ;
        
        const ctx = document.createElement('canvas').getContext('2d');
        ctx.canvas.width = image.width;
        ctx.canvas.height = image.height;
        ctx.drawImage(image, 0, 0);
        const myrgbmap = new THREE.CanvasTexture(ctx.canvas);

        const ctx2 = document.createElement('canvas').getContext('2d');
        ctx2.canvas.width = image2.width;
        ctx2.canvas.height = image2.height;
        ctx2.drawImage(image2, 0, 0);
        const mydepthmap = new THREE.CanvasTexture(ctx2.canvas);

        
        // material
        material = new THREE.MeshStandardMaterial( {

            color: 0xaaaaaa,
            roughness: settings.roughness,
            metalness: settings.metalness,

            map: myrgbmap,

            displacementMap: mydepthmap,
            displacementScale: settings.displacementScale,
            displacementBias: settings.displacementBias,

            emissive: image, // Add this line for emissive color
            emissiveIntensity: 10,

            side: THREE.DoubleSide

        } );
        
        // generating geometry and add mesh to scene
        const geometry = new THREE.PlaneGeometry( 10, 10, 512, 512 );
        mesh = new THREE.Mesh( geometry, material );
        mesh.scale.y = 1.0 / image_ar;
        mesh.scale.multiplyScalar( 0.23 );
        scene.add( mesh );
        
    }
    image.src = MyTexture;
    image2.src = MyDepth;


    // // setup gui
    // const gui = new GUI();
    // gui.add( settings, 'metalness' ).min( 0 ).max( 1 ).onChange( function ( value ) {
    //     material.metalness = value;
    // } );
    // gui.add( settings, 'roughness' ).min( 0 ).max( 1 ).onChange( function ( value ) {
    //     material.roughness = value;
    // } );
    // gui.add( settings, 'ambientIntensity' ).min( 0 ).max( 1 ).onChange( function ( value ) {
    //     ambientLight.intensity = value;
    // } );
    // gui.add( settings, 'displacementScale' ).min( 0 ).max( 30.0 ).onChange( function ( value ) {
    //     material.displacementScale = value;
    // } );
    // gui.add( settings, 'displacementBias' ).min( -10 ).max( 10 ).onChange( function ( value ) {

    //     material.displacementBias = value;
    // } );


    // setup drop zone
    // var dropZone = document.getElementById('dropzone');

    // function showDropZone() {
    //     dropZone.style.display = "block";
    // }
    // function hideDropZone() {
    //     dropZone.style.display = "none";
    // }

    // function allowDrag(e) {
    //     if (true) {  // Test that the item being dragged is a valid one
    //         e.dataTransfer.dropEffect = 'copy';
    //         e.preventDefault();
    //     }
    // }

    // function handleDrop(e) {
    //     e.preventDefault();
    //     hideDropZone();
    //     const fileList = event.dataTransfer.files;
    //     if (fileList.length > 0) {
    //         readImage(fileList[0]);
    //     }
    // }

    // function readImage(file) {
    //     const reader = new FileReader();
    //     reader.addEventListener('load', (event) => {
    //         image.src = event.target.result;
    //     });
    //     reader.readAsDataURL(file);
    // }

    // window.addEventListener('dragenter', function(e) {
    //     showDropZone();
    // });
    // dropZone.addEventListener('dragenter', allowDrag);
    // dropZone.addEventListener('dragover', allowDrag);
    // dropZone.addEventListener('dragleave', function(e) {
    //     console.log('dragleave');
    //     hideDropZone();
    // });
    // dropZone.addEventListener('drop', handleDrop);


    // // listen for messages
    // window.addEventListener('message', function(e) {
    // if (e.data?.imagedata) {
    //     image.src = e.data.imagedata;
    // }
    // });

}

function Viewer3D({ isVisible }) {
    // console.log("called ")
    renderer.clear();
    renderer.setSize( 0, 0);
  
    return (
      <>
        {isVisible ? (
            <div style={{ position: 'static', display: 'inline-block' }}>
            <Render3D isVisible={isVisible} />
            </div>
        ) : null}
      
      </>
    );
  }
  
  export default Viewer3D;