Kitchen ThreeJs

customizer.component.ts

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

@Component({
  selector: 'tm-customizer',
  templateUrl: './customizer.component.html',
  styleUrls: ['./customizer.component.scss'],
})
export class CustomizerComponent implements OnInit {
  public textureSrc: string;
  public textureList = [
    { id: 1, name: 'Wood 2', src: '/assets/textures/wood2.jpg' },
    { id: 2, name: 'Wood 1', src: '/assets/textures/wood1.jpg' },
  ];

  public selectedTexture(e): void {
    let find = this.textureList.find((x) => x?.src === e.target.value);
    // console.log(find?.src);
  }

  ngOnInit(): void {
    let scene,
      kitchen,
      camera,
      renderer,
      canvas,
      controls,
      raycaster,
      loader,
      BACKGROUND_COLOR = 0xffffff;

    // Scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(BACKGROUND_COLOR);

    // Set Camera
    camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.z = 5;
    camera.position.x = 5;
    camera.position.y = 1;

    // Renderer with canvas
    canvas = document.getElementById('canvas');
    renderer = new THREE.WebGLRenderer({ canvas: canvas });
    renderer.setSize(window.innerWidth / 1.53, window.innerHeight / 1.5);
    renderer.shadowMap.enabled = true;

    // Controls with options
    controls = new OrbitControls(camera, renderer.domElement);
    controls.maxPolarAngle = Math.PI / 2;
    controls.minPolarAngle = Math.PI / 3;
    controls.enableDamping = true;
    controls.enablePan = false;
    controls.target.set(5, 1, 0);
    controls.maxAzimuthAngle = 0.8;
    controls.minAzimuthAngle = -0.8;
    controls.enableZoom = false;
    controls.dampingFactor = 0.1;
    controls.autoRotate = false; // Toggle this if you'd like the chair to automatically rotate
    controls.autoRotateSpeed = 0.2; // 30

    // Load Kitchen
    var textureLoader = new THREE.TextureLoader();
    var texture = textureLoader.load('assets/textures/img.png');
    texture.flipY = false;

    loader = new GLTFLoader();
    loader.load(
      'assets/3d_models/kitch.glb',
      (gltf) => {
        kitchen = gltf.scene;

        kitchen.traverse((node) => {
          if (node.isMesh) {
            node.material.map = texture;
            console.log(node.material.map);
          }
        });
        // console.log(gltf);
        scene.add(kitchen);
      },
      undefined,
      (err) => {
        console.log(err);
      }
    );

    // Set Lights
    setLights(scene);
    function animate() {
      requestAnimationFrame(animate);
      controls.update();
      renderer.render(scene, camera);

      if (resizeRendererToDisplaySize(renderer)) {
        const canvas = renderer.domElement;
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
      }
    }

    animate();
  }
}

function setLights(scene) {
  // Add lights
  var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.61);
  hemiLight.position.set(0, 50, 0);
  // Add hemisphere light to scene
  scene.add(hemiLight);

  var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
  dirLight.position.set(-8, 12, 8);
  // dirLight.castShadow = true;
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  // Add directional Light to scene
  scene.add(dirLight);

  var light = new THREE.DirectionalLight(0xffffff, 3);
  light.position.set(10, 10, 10);
  scene.add(light);
}
function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var canvasPixelWidth = canvas.width / window.devicePixelRatio;
  var canvasPixelHeight = canvas.height / window.devicePixelRatio;

  const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}