Function App

05-lighting/src/App.jsx:8–168

()

import SceneInit from './lib/SceneInit';

function App() {
  useEffect(() => {
    const test = new SceneInit('myThreeJsCanvas');
    test.initialize();
    test.animate();

    // initialize gui
    const gui = new GUI();

    // main group
    const mainGroup = new THREE.Group();
    mainGroup.position.y = 0.5;
    test.scene.add(mainGroup);

    // normal box
    // const bg0 = new THREE.BoxGeometry(1, 1, 1);
    // const bm0 = new THREE.MeshNormalMaterial();
    // const boxMesh0 = new THREE.Mesh(bg0, bm0);
    // test.scene.add(boxMesh0);

    // set up ground
    const groundGeometry = new THREE.BoxGeometry(8, 0.5, 8);
    const groundMaterial = new THREE.MeshPhongMaterial({ color: 0xfafafa });
    const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
    groundMesh.receiveShadow = true;
    groundMesh.position.y = -2;
    mainGroup.add(groundMesh);

    // set up torus for youtube thumbnail
    // const bg1 = new THREE.TorusGeometry(1.5, 0.75, 64, 64);
    // const bm1 = new THREE.MeshNormalMaterial({ color: 0xff0000 });
    // const boxMesh1 = new THREE.Mesh(bg1, bm1);
    // boxMesh1.castShadow = true;
    // boxMesh1.position.y = 1;
    // boxMesh1.position.z = 1;
    // boxMesh1.rotation.x = -Math.PI / 3;
    // mainGroup.add(boxMesh1);

    // set up red box mesh
    const bg1 = new THREE.BoxGeometry(1, 1, 1);
    const bm1 = new THREE.MeshPhongMaterial({ color: 0xff0000 });
    const boxMesh1 = new THREE.Mesh(bg1, bm1);
    boxMesh1.castShadow = true;
    boxMesh1.position.x = -2;
    mainGroup.add(boxMesh1);

    // set up green box mesh
    const bg2 = new THREE.BoxGeometry(1, 1, 1);
    const bm2 = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const boxMesh2 = new THREE.Mesh(bg2, bm2);
    boxMesh2.castShadow = true;
    boxMesh2.position.x = 0;
    mainGroup.add(boxMesh2);

    // set up blue box mesh
    const bg3 = new THREE.BoxGeometry(1, 1, 1);
    const bm3 = new THREE.MeshPhongMaterial({ color: 0x0000ff });
    const boxMesh3 = new THREE.Mesh(bg3, bm3);