使用threejs创建一个长方体

  // 创建设备 正方体
  // x1 X轴坐标  y1 Y轴坐标 item 设备的信息 可以把 item 嵌入到正方体里面  h ： 高度
  private initQuare1(x1:any,y1:any,item:any,h:any) {
    var geometry = new THREE.BoxGeometry( 0.5, 1, 0.5 );
    // 确定颜色  根据设备的状态动态显示正方体的颜色
    let color123 = 'gray'
    item.runState === 'running' ? color123 = 'green' : item.runState === 'warning'
     ? color123 = 'yellow' : item.runState === 'alarm' ?  color123 = 'red'  :  color123 = color123
    var material =[
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2(item,color123)) } ), // right
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2(item,color123)) } ), // left
      new THREE.MeshBasicMaterial( { color: color123 } ), // top
      new THREE.MeshBasicMaterial( { color: color123 } ), // bottom
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2(item,color123)) } ), // back
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2(item,color123)) } ) // front 
    ];
    var square :any = new THREE.Mesh( geometry, material );
    square.position.x = x1;
    square.data1  = item;
    square.position.y = h+0.5;
    square.position.z = y1;
    // square.asdName = "腔室"
    // this.viewer.setRaycasterObjects(square);
    this.viewer.scene.add(square);
    // 注册事件
    square.traverse((item1:any) => {
      // console.log(item);
      item1.deviceName = '设备';
      item1.item = item;
      // console.log(item);
      this.list.push(item1)
   });
    this.viewer.setRaycasterObjects(this.list)
  }