Hugging Face's logo

Spaces:
ClaireOzzz
/
ShopGenV2
Runtime error

App Files Community
ShopGenV2
File size: 5,068 Bytes 
a8f64d2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
 
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  "./../images/result.png";
import MyDepth from  "./../images/depth.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( 50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 8.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 );
    scene.background = new THREE.Color( 0xffffff );
    // const renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
    renderer.setAnimationLoop( animation );
    // renderer.toneMapping = THREE.ACESFilmicToneMapping;
    // renderer.toneMappingExposure = 1;
    // renderer.outputColorSpace = THREE.SRGBColorSpace;
    document.body.appendChild( renderer.domElement )

    // animation
    window.addEventListener("mousemove", onmousemove, false);
    var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0.5); // it's up to you how you will create THREE.Plane(), there are several methods
    var raycaster = new THREE.Raycaster(); //for reuse
    var mouse = new THREE.Vector2();       //for reuse
    var intersectPoint = new THREE.Vector3();//for reuse

    function onmousemove(event) {
    //get mouse coordinates
        mouse.x = (event.clientX / window.innerWidth)  - 1;
        mouse.y = -(event.clientY / window.innerHeight)- 1;
        raycaster.setFromCamera(mouse, camera);//set raycaster
        raycaster.ray.intersectPlane(plane, intersectPoint); // find the point of intersection
        mesh.lookAt(intersectPoint); // face our arrow to this point
    }

    function animation( time ) {
        renderer.render( scene, camera );
    }

    function onWindowResize() {

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

        renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
    }
    window.addEventListener( 'resize', onWindowResize );


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


    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,
            map: myrgbmap,
            displacementMap: mydepthmap,
            emissive: 0xffffff,
            emissiveIntensity: 0.9, 
            emissiveMap :  myrgbmap,
            roughness: settings.roughness,
            metalness: settings.metalness,
            displacementScale: settings.displacementScale,
            displacementBias: settings.displacementBias,
            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.5);
        scene.add( mesh );
        
    }
    image.src = MyTexture;
    image2.src = MyDepth;
}

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}
       {/* <iframe src="./../another-page.html" width="100%" height="1000px" frameborder="0"></iframe> */}
      </>
    );
  }

  export default Viewer3D;