Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>

    <script type="module">

        import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js';
        import { FBXLoader } from './node_modules/three/examples/jsm/loaders/FBXLoader.js';
        import { Reflector } from './node_modules/three/examples/jsm/objects/Reflector.js';

        //scene
        var scene = new THREE.Scene();

        //materials
        var textureLoader = new THREE.TextureLoader();

        var woodDiff = textureLoader.load("./textures/wood/albedo.png");
        var woodNormal = textureLoader.load('textures/wood/normal.png');
        var woodMetal = textureLoader.load('textures/wood/metallic.png');
        var woodRoughness = textureLoader.load('textures/wood/roughness.png');

        var wood = new THREE.MeshPhysicalMaterial(
            {
                color: 0xFFFFE0,
                map: woodDiff,
                normalMap: woodNormal,
                metalnessMap: woodMetal,
                roughnessMap: woodRoughness
            }
        )

        var mirrorGeometry = new THREE.CircleGeometry(200, 200);
        var groundMirror = new Reflector(mirrorGeometry, {
            clipBias: 0.05,
            textureWidth: window.innerWidth * window.devicePixelRatio,
            textureHeight: window.innerHeight * window.devicePixelRatio,
            color: 0x777777,
            recursion: 1
        });

        groundMirror.position.y = -0.2;
        groundMirror.rotateX(- Math.PI / 2);
        groundMirror.receiveShadows = true;
        scene.add(groundMirror);

        //lights
        var keyLight = new THREE.DirectionalLight(0x404040);
        keyLight.position.set(5, 5, 0);
        scene.add(keyLight);

        var secondLight = new THREE.DirectionalLight(0x404040);
        secondLight.position.set(-5, -5, 0);
        scene.add(secondLight);

        var thirdLight = new THREE.DirectionalLight(0x404040);
        thirdLight.position.set(0, 2, -2);
        scene.add(thirdLight);

        //camera
        let perspectiveCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 2000);
        perspectiveCamera.position.set(50, 100, -160);
        scene.add(perspectiveCamera);

        //renderer creation
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor("#777777");
        renderer.gammaOutput = true;
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);

        //objects
        var loader = new FBXLoader();
        loader.load('meshes/Croissant.fbx', function (object) {
            object.traverse(function (child) {
                if (child.isMesh) {
                    child.material = wood;
                }
            });

            object.castShadows = true;
            scene.add(object);
        },
            function (xhr) {
                console.log((xhr.loaded / xhr.total) * 100 + '% loaded.');
            }
        );

        //orbit controls
        let controls = new OrbitControls(perspectiveCamera, renderer.domElement);
        controls.target.set(0, 0, -1);
        controls.update();

        //Resize event
        window.addEventListener('resize', () => {
            renderer.setSize(window.innerWidth, window.innerHeight);
            perspectiveCamera.aspect = window.innerWidth / window.innerHeight;
            perspectiveCamera.updateProjectionMatrix();
        });

        // //render updated viewport
        var update = function () {
            requestAnimationFrame(update);
            perspectiveCamera.updateMatrixWorld();
            renderer.render(scene, perspectiveCamera);
        };
        update();
    </script>
</body>

</html>