How can I hide this gray frame?

Questions
1

1714301652461
17143016524611565×834 63.3 KB

import {
  AfterViewInit,
  Component,
  ElementRef,
  Input,
  OnInit,
  ViewChild,
} from "@angular/core";
import { MockContainerDataService } from "src/service/data-mock-up/mock-container-data";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

@Component({
  selector: 'app-three-d',
  templateUrl: './three-d.component.html',
  styleUrls: ['./three-d.component.scss'],
  styles: [
    `
      canvas {
        width: 100%;
        height: 100%;
      }
    `,
  ],
  providers: [MockContainerDataService],
})
export class ThreeDComponent implements OnInit, AfterViewInit {
  //@ViewChild('canvasContainer') canvasContainer :any;
  @ViewChild("canvasContainer") private canvasRef: ElementRef;
  private renderer: THREE.WebGLRenderer;
  private scene: THREE.Scene;
  private camera: THREE.PerspectiveCamera;
  private cube: THREE.Mesh;
  @Input('data') set data(value: any) {
    console.log('value', value);
    //this.datasources = value;

  }
  @Input() public cameraZ: number = 300;
  @Input() public fieldOfView: number = 1;
  @Input("nearClipping") public nearClippingPlane: number = 10;
  @Input("farClipping") public farClippingPlane: number = 1000;

  private get canvas(): HTMLCanvasElement {
    return this.canvasRef.nativeElement;
  }
  datasources: any = [];
  constructor(private mockContainerDataService: MockContainerDataService) {
    this.datasources = this.mockContainerDataService.getBox();
  }
  ngOnInit(): void {

  }

  getBoxMaster(){

  }

  ngAfterViewInit(): void {
    this.initThree();
    this.renderScene();
    this.createControls();
  }

  private initThree(): void {
    // Create renderer
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setPixelRatio(devicePixelRatio);
   /*  this.renderer.setSize(window.innerWidth, window.innerHeight); */
   this.renderer.setSize(800, 500);


    // Append renderer to DOM
    this.canvasRef.nativeElement.appendChild(this.renderer.domElement);
    // Create scene
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xffffff);
    // Create camera
    let aspectRatio = this.getAspectRatio();
    this.camera = new THREE.PerspectiveCamera(
      this.fieldOfView,
      aspectRatio,
      this.nearClippingPlane,
      this.farClippingPlane
    );
    this.camera.position.z = this.cameraZ;
    var containerGeometry = new THREE.BoxGeometry(5.9, 2.3, 2.3);
    var containerMaterial = new THREE.MeshBasicMaterial({
      color: 0xe8e8e8,
      wireframe: true,
    });
    var container = new THREE.Mesh(containerGeometry, containerMaterial);
    container.position.set(-2.95, -1.15, -1.15);
    this.scene.add(container);
    //สร้างกรอบตู้คอนเทนเนอร์ และ set position
    var containerEdges = new THREE.EdgesGeometry(containerGeometry);
    var containerLine = new THREE.LineSegments(
      containerEdges,
      new THREE.LineBasicMaterial({ color: 0x000000 })
    );

    this.scene.add(containerLine);

    // Create cube
    for (let i = 0; i < this.datasources.length; i++) {
      let box = this.datasources[i];
      let geometry = new THREE.BoxGeometry(
        box.size.width ,
        box.size.height ,
        box.size.depth
      );
      let material = new THREE.MeshBasicMaterial({ color: box.color });
      let cube = new THREE.Mesh(geometry, material);
      cube.position.set(box.position.x, box.position.y, box.position.z);
      // เพิ่มกล่องย่อยลงในตู้คอนเทนเนอร์
      container.add(cube);

      //border
      let edges = new THREE.EdgesGeometry(geometry);
      let line = new THREE.LineSegments(
        edges,
        new THREE.LineBasicMaterial({ color: 0x000000 })
      );
      line.position.set(box.position.x, box.position.y, box.position.z);
      // เพิ่มเส้นขอบลงในตู้คอนเทนเนอร์
      container.add(line);
    }


  }

  private renderScene(): void {
    const animate = () => {
      requestAnimationFrame(animate);
      //this.cube.rotation.x += 0.01;
      //this.cube.rotation.y += 0.01;
      this.renderer.render(this.scene, this.camera);
    };
    animate();
  }
  private getAspectRatio() {
    return window.innerWidth / window.innerHeight;
  }
  private createControls = () => {
    let controls = new OrbitControls(this.camera, this.renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enableZoom = true;
  };
  private startRenderingLoop() {
    //* Renderer
    // Use canvas element in the template
    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
    this.renderer.setPixelRatio(devicePixelRatio);
    this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);
    //* Rendering
    let component: ThreeDComponent = this;
    (function render() {
      //* Request new frame
      requestAnimationFrame(render);
      //* Animation
      component.renderScene();
      //* Rendering
      component.renderer.render(component.scene, component.camera);
    })();
  }
  CancelDataTrip(){
    alert('Cancel');
  }
}
2

What does happen when this line is commented (or removed)?

this.scene.add(container);