Function App

09-raycaster/src/App.jsx:8–107

()

import SceneInit from './lib/SceneInit';

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

    // inital scene
    // const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
    // const boxMaterial = new THREE.MeshNormalMaterial();
    // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    // test.scene.add(boxMesh);

    const addNewBoxMesh = (x, y, z) => {
      const boxGeometry = new THREE.BoxGeometry(1, 1, 1);
      const boxMaterial = new THREE.MeshPhongMaterial({
        color: 0xfafafa,
      });
      const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
      boxMesh.position.set(x, y, z);
      test.scene.add(boxMesh);
    };

    // top rows
    addNewBoxMesh(0, 2, 0);
    addNewBoxMesh(2, 2, 0);
    addNewBoxMesh(-2, 2, 0);
    addNewBoxMesh(0, 2, -2);
    addNewBoxMesh(2, 2, -2);
    addNewBoxMesh(-2, 2, -2);
    addNewBoxMesh(0, 2, 2);
    addNewBoxMesh(2, 2, 2);
    addNewBoxMesh(-2, 2, 2);

    // middle rows
    addNewBoxMesh(0, 0, 0);
    addNewBoxMesh(2, 0, 0);
    addNewBoxMesh(-2, 0, 0);
    addNewBoxMesh(0, 0, -2);
    addNewBoxMesh(2, 0, -2);
    addNewBoxMesh(-2, 0, -2);
    addNewBoxMesh(0, 0, 2);
    addNewBoxMesh(2, 0, 2);
    addNewBoxMesh(-2, 0, 2);

    // bottom rows
    addNewBoxMesh(0, -2, 0);
    addNewBoxMesh(2, -2, 0);
    addNewBoxMesh(-2, -2, 0);
    addNewBoxMesh(0, -2, -2);
    addNewBoxMesh(2, -2, -2);
    addNewBoxMesh(-2, -2, -2);
    addNewBoxMesh(0, -2, 2);
    addNewBoxMesh(2, -2, 2);
    addNewBoxMesh(-2, -2, 2);

    // add shiba model
    const glftLoader = new GLTFLoader();
    glftLoader.load('./assets/shiba/scene.gltf', (gltfScene) => {