Function App

06-textures/src/App.jsx:7–106

()

import SceneInit from './lib/SceneInit';

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

    // Part 0
    // const boxGeometry = new THREE.BoxGeometry(4, 4, 4);
    // const boxMaterial = new THREE.MeshNormalMaterial();
    // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    // test.scene.add(boxMesh);

    // // Part 1
    // const spaceTexture = new THREE.TextureLoader().load('./assets/space.jpeg');
    // spaceTexture.wrapS = THREE.RepeatWrapping;
    // spaceTexture.wrapT = THREE.RepeatWrapping;
    // spaceTexture.repeat.set(2, 2);
    // test.scene.background = spaceTexture;

    // // Part 2
    const uvTexture = new THREE.TextureLoader().load('./assets/uv.png');
    const crateTexture = new THREE.TextureLoader().load('./assets/crate.png');
    const earthTexture = new THREE.TextureLoader().load('./assets/earth.jpeg');
    const brickTexture = new THREE.TextureLoader().load('./assets/brick.jpeg');

    // Thumbnail
    // const tgeo = new THREE.BoxGeometry(15, 15, 15);
    // const tmat = new THREE.MeshStandardMaterial({
    //   map: crateTexture,
    // });
    // const tmesh = new THREE.Mesh(tgeo, tmat);
    // tmesh.rotation.y = Math.PI / 4;
    // tmesh.rotation.x = Math.PI / 8;
    // test.scene.add(tmesh);

    // Part 1.5
    const ge0 = new THREE.BoxGeometry(7, 7, 7);
    const me0 = new THREE.MeshStandardMaterial({
      map: uvTexture,
    });
    const boxMe0 = new THREE.Mesh(ge0, me0);
    boxMe0.position.x = -9;
    boxMe0.position.y = -5;
    test.scene.add(boxMe0);

    const ge1 = new THREE.BoxGeometry(7, 7, 7);
    const me1 = new THREE.MeshStandardMaterial({
      map: crateTexture,
    });
    const boxMe1 = new THREE.Mesh(ge1, me1);
    boxMe1.position.x = 0;
    boxMe1.position.y = -5;
    test.scene.add(boxMe1);

    const ge2 = new THREE.BoxGeometry(7, 7, 7);
    const me2 = new THREE.MeshStandardMaterial({
      // map: earthTexture,
      map: brickTexture,