Spaces:
Runtime error
Runtime error
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; |