wew

import { Component, OnInit } from '@angular/core';
import {
  EdgesGeometry, LineSegments, LineBasicMaterial, Color,
  Material, GridHelper, WebGLRenderer, DoubleSide, Scene, PerspectiveCamera, BoxGeometry,
  MeshBasicMaterial, Mesh, Vector3, Group, TextureLoader, LinearFilter, Clock, AmbientLight, SpotLight, HemisphereLight} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
import { Interaction } from 'three.interaction';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'homeshapers';

  protected scene: Scene;
  protected renderer: WebGLRenderer;
  protected textureLoader: TextureLoader;

  ngOnInit() {
    this.scene = new Scene();
    this.scene.background = new Color('black'); // 0xf0f0f0
    this.textureLoader = new TextureLoader();

    var camera = new PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 250, 250);

    this.renderer = new WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);

    const controls = new OrbitControls(camera, this.renderer.domElement);
    // const controls = new PointerLockControls(camera, this.renderer.domElement);

    new Interaction(this.renderer, this.scene, camera);

    const helper = new GridHelper(2000, 100);
    helper.position.y = - 200;
    (helper.material as Material).opacity = 0.25;
    (helper.material as Material).transparent = true;
    this.scene.add(helper);

    var light = new HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
    light.position.set( 0.5, 1, 0.75 );
    this.scene.add( light );

    const wallsAndFloors = [
      // wall
      this.createShape(new BoxGeometry(100, 100, 5), new Vector3(0, 52.5, 47.5), 'wall', [8, 9, 10, 11]),
      this.createShape(new BoxGeometry(100, 100, 5), new Vector3(0, 52.5, -47.5), 'wallcoat', [8, 9, 10, 11]),

      // floor
      this.createShape(new BoxGeometry(100, 5, 100), new Vector3(0, 0, 0), 'carpet', [4, 5]),
      this.createShape(new BoxGeometry(100, 5, 100), new Vector3(100, 0, 0), 'floorwood', [4, 5]),
    ];

    this.scene.add(...wallsAndFloors);

    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    // controls.update(clock.getDelta());

    var animate = () => {
      requestAnimationFrame(() => animate());

      controls.update();

      this.renderer.render(this.scene, camera);
    };

    animate();
  }

  protected createShape(geo: BoxGeometry, pos: Vector3, textureUrl: string, textureFaces: number[]) {
    geo.computeFaceNormals();

    const material = new MeshBasicMaterial({  map: this.getTexture(textureUrl) });
    const materialColor = new MeshBasicMaterial({  map: this.getTexture('concrete') });

    geo.faces.forEach((f, i) => f.materialIndex = textureFaces.indexOf(i) >= 0 ? 0 : 1);

    geo.sortFacesByMaterialIndex();

    const cube = new Mesh(geo, [material, materialColor]);
    const edges = new EdgesGeometry(geo);
    const line = new LineSegments(edges, new LineBasicMaterial({ color: 'grey' }));
    const interactable = cube as any as Interactable;
    interactable.cursor = 'pointer';
    interactable.on('click', (event) => {
      (line.material as LineBasicMaterial).linewidth = 5;
      (line.material as LineBasicMaterial).color = new Color('red');
    });

    cube.position.set(pos.x, pos.y, pos.z);
    line.position.set(pos.x, pos.y, pos.z);

    return new Group().add(line).add(cube);
  }

  protected getTexture(id: string) {
    const textureLoader = new TextureLoader();
    const texture = textureLoader.load(`/assets/textures/${id}.jpg`);
    texture.minFilter = LinearFilter;
    texture.magFilter = LinearFilter;
    return texture;
  }

  protected makeControls(type: string) {

  }
}

export interface Interactable {
  cursor: string;

  on(eventName: string, handler: (event: Event) => void): void;
}