Let's Encrypt is a free, automated, and open certificate authority brought to you by the nonprofit Internet Security Research Group. The web is fast turning to a battleground where the good guys are working extremely hard to ensure that the bad guys are kept away from hacking, conning, and ransoming online facilities and data. The best weapon deployed to ensure this is Encryption. Encryption helps us in building trust for our web system. In fact, HTTPS provides just that. However, a website needs to get a free SSL certificate from the Certificate Authorities to use the Encryption. What Is it? Let’s Encrypt will only issue you the file if you have control over your domain. To do this, you can use a software client that utilizes the Automatic Certificate Management Environment (ACME) protocol. That you have a free SSL certificate means that your communication has end-to-end encryption. With that, when files are transferred between a web server and the users, they become unreadable to anybody who tries to intercept them. Also, no one can tamper the files Why A Certificate Authority Is Important? The primary assignment of the Certificate Authority The authenticity of an SSL certificate is being verified and validated using cryptography. Browsers and operating systems make use of a directory of trusted Certificate Authorities to ensure that the site certificates are authentic. In the past, this authentication was always being paid for. But now, Let’s Encrypt is offering the automated creation of all free SSL certificate for everybody. They are able to do this with the funding they get from donors and sponsors. How Let’s Encrypt Does its Thing The ACME protocol that is being used by Let’s Encrypt involves how clients and servers interact together when confirming domain ownership and asking for certificates. Very soon, it will get the recognition of an official IETF standard. How Let’s Encrypt Work for HTTPS Let’s Encrypt gives free SSL certificates that are domain validated. This means that after you make a request for free https certificate, Let’s Encrypt ensures it is the person in full control of the domain that makes the request. A token is sent to the client to create a key. The domain provider will thereafter provide this through DNS or web. How Let’s Encrypt Work for HTTP For HTTP, the process is a little different. The client generates the key using an account token and also a unique token. The result will be transferred to the file made available by the web server. Let’s Encrypt servers then get the file from the address. Once it is established that the key matches, the client has proved domain control and can get a free SSL certificate. The ACME protocol can list some tests that a client can utilize to verify the ownership of the domain. The client then creates a self-signed certificate that includes the key. Let’s Encrypt Certificates Update Once you get Let’s Encrypt SSL certificate(s), it is valid for 90 days. After this period, the certificate needs to be renewed so as to ensure that the encryption remains active and working. By default, the updated SSL certificates that you request for can be automatically applied 30 days before the expiration of the current validity period.

I want to improve the quality of MeshPhongMaterial

AnotherJobs

First of all, please understand that I am not good at English.
I'm using react three fiber so hard. I uploaded the obj file using OBJLoader.
In this way, image A was rendered. But the quality is very, very bad...
I want to increase the quality like image B.
I don't know if I matched the map of the material incorrectly What should I do??
Thanks for sharing your wisdom

Image A

Image B

import React, {useMemo, useRef, useEffect, useState, Suspense} from 'react';
import * as THREE from 'three';
import {Canvas, useFrame, useGraph, useLoader, useThree, createPortal, ObjectMap} from "@react-three/fiber";
import {OrbitControls, OrthographicCamera, useCamera, Html, useProgress, Stats, Center} from "@react-three/drei";
import styled from "styled-components";
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader'
import {CameraControls, CameraControlsType} from "./cameraControls";
import LightController from "./lightController";
// @ts-ignore
import objectImage from 'assets/images/NT_NO061/NT_NO061.obj';
import aoMapImage from 'assets/images/NT_NO061/Textures/T_NT_NO061_AO.png';
import mapImage from 'assets/images/NT_NO061/Textures/T_NT_NO061_D.png';
import normalMapImage from 'assets/images/NT_NO061/Textures/T_NT_NO061_N.png';
import roughnessMapImage from 'assets/images/NT_NO061/Textures/T_NT_NO061_R.png';

type geometryType = {
    attach: string,
    vertices: any,
    onUpdate: any
}

type flag = {
    video: boolean,
    minimap: boolean
}

const Wrapper = styled.div`
    canvas {
        height: 594px
    }
`

const ReactThreeFiber = () => {
    const cameraControls = useRef<CameraControlsType | null>(null) as any;
    const [aoMap, map, normalMap, roughnessMap] = useLoader(THREE.TextureLoader, [
        aoMapImage,
        mapImage,
        normalMapImage,
        roughnessMapImage
    ])

    const [progressValue, setProgressValue] = useState<number>(0);
    const scene = useLoader(OBJLoader, objectImage, loader => {
        loader.manager.onProgress = (url, loaded, total) => {
            console.log('url, loaded, total', url, loaded, total)
        }
    }) as any;
    
    const {nodes} = useGraph(scene) as ObjectMap;
    const {geometry} = useMemo(() => nodes[Object.keys(nodes)[0]] as any, []);

    const material = new THREE.MeshPhongMaterial();

*** Question!! What should I add here to improve the quality?? ***
    material.map = map;
    material.normalMap = normalMap;
    material.shininess = 70;

    let startPoint = 3
    const lookAtPos = new THREE.Vector3()

    return (
      <Wrapper>
          <Canvas
            camera={{position: [3, 3, 3]}}
            onCreated={({scene}) => scene.background = new THREE.Color('#000')}
            frameloop={'demand'}
          >
              <CameraControls
                ref={cameraControls}
                minDistance={2}
                maxDistance={7}
              />
              <LightController/>
              <OrbitControls/>
              <Center>
                  <mesh
                    position={[0, -2, 0]}
                    geometry={geometry}
                    material={material}
                  />
              </Center>
              <Stats/>
          </Canvas>
      </Wrapper>
    );
}

export default React.memo(ReactThreeFiber);