How to use the three.BoxGeometry function in three

const GIFEncoder = require('gifencoder');
const {createCanvas} = require('../lib');

const width = 512,
  height = 512;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const canvas = createCanvas(width, height);

const renderer = new THREE.WebGLRenderer({
  canvas,
});

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

const encoder = new GIFEncoder(width, height);
encoder.createReadStream().pipe(fs.createWriteStream('./snapshot/threejs-cube.gif'));
encoder.start();
encoder.setRepeat(0); // 0 for repeat, -1 for no-repeat
encoder.setDelay(16); // frame delay in ms
encoder.setQuality(10); // image quality. 10 is default.

let idx = 0;
function update() {
  cube.rotation.x += 0.01;

})

  const texture = new THREE.Texture(canvas)
  texture.wrapS = THREE.ClampToEdgeWrapping
  texture.wrapT = THREE.ClampToEdgeWrapping
  if (renderer) {
    texture.anisotropy = renderer.capabilities.getMaxAnisotropy()
  }
  texture.needsUpdate = true

  material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide
  })

  geometry = new THREE.BoxGeometry(4096, 4096, 4096)
  const uvs = [
    // back
    [[0.75, 0.499], [1.0, 0.499], [0.75, 0.251]],
    [[1.0, 0.499], [1.0, 0.251], [0.75, 0.251]],
    // front
    [[0.5, 0.251], [0.25, 0.251], [0.5, 0.499]],
    [[0.25, 0.251], [0.25, 0.499], [0.5, 0.499]],
    // left
    [[0.5, 0.251], [0.5, 0.499], [0.75, 0.251]],
    [[0.5, 0.499], [0.75, 0.499], [0.75, 0.251]],
    // right
    [[0.25, 0.5], [0.25, 0.25], [0.0, 0.5]],
    [[0.25, 0.25], [0.0, 0.25], [0.0, 0.5]],
    // up
    [[0.249, 0.749], [0.249, 0.5], [0.0, 0.749]],
    [[0.249, 0.5], [0.0, 0.5], [0.0, 0.749]],

this.group.add(this.underside)
    this.group.add(this.undersideL)
    this.group.add(this.undersideR)

    // box occluder
    let planeX = this.plane.geometry.attributes.planeOffset.array[0]
    let planeZ = this.plane.geometry.attributes.planeOffset.array[1]
    let quat = new THREE.Quaternion(
      this.plane.geometry.attributes.quaternion.array[0],
      this.plane.geometry.attributes.quaternion.array[1],
      this.plane.geometry.attributes.quaternion.array[2],
      this.plane.geometry.attributes.quaternion.array[3]
    )

    let boxGeo = new THREE.BoxGeometry(this.planeSize + 15, this.planeSize + 15, 10)
    this.boundingBoxObj = new THREE.Mesh(boxGeo, new THREE.MeshBasicMaterial({
      colorWrite: false
    }))

    this.boundingBoxObj.visible = false

    this.boundingBoxObj.position.y = -2.5
    this.boundingBoxObj.frustumCulled = false
    this.boundingBoxObj.position.x = planeX
    this.boundingBoxObj.position.z = planeZ
    this.boundingBoxObj.applyQuaternion(quat)
    this.boundingBoxObj.rotateX(Math.PI / 2)
    this.boundingBoxObj.updateMatrix()
    this.boundingBoxObj.updateMatrixWorld()
    this.boundingBoxObj.geometry.computeBoundingBox()
    this.boundingBoxObj.updateMatrixWorld(true)

createMesh() {
        /** @type {?} */
        const geometry = new BoxGeometry(5, 5, 5);
        /** @type {?} */
        const material = new MeshLambertMaterial({ color: 0xff0000 });
        this.mesh = new Mesh(geometry, material);
        this.scene.add(this.mesh);
    }
    /**

export function threeDebugBox(rot) {
    var box = new three.BoxGeometry(1, 1, 1);
    var mat = new three.MeshBasicMaterial({
        wireframe: true
    });
    return new three.Mesh(box, mat);
}

import { LifeCycleComponent } from 'ember-lifecycle-component';

import THREE from 'three';

let geometry = new THREE.BoxGeometry( 2, 2, 2 );
let material = new THREE.MeshNormalMaterial();

export default class SceneBoxComponent extends LifeCycleComponent {
  constructor(owner, args) {
    super(owner, args);

    this.mesh = new THREE.Mesh(geometry, material);

    let { x, y, z } = this.args.rotation;
    this.mesh.rotation.set(x, y, z);
    this.mesh.position.set(0, 0, 0);

    args.scene.add(this.mesh);
  }

  didReceiveArgs() {

export const addPowerup = (camPos, scene) => {
  const powerupGeo = new t.BoxGeometry(30, 30, 30);
  const powerupMat = new t.MeshPhongMaterial({
    emissive: 0xffffff,
    emissiveIntensity: 4
  });
  const powerup = new t.Mesh(powerupGeo, powerupMat);
  powerup.position.copy(camPos);
  powerup.position.y += 5;
  scene.add(powerup);
};

side2.position.set(0,0.525,-0.725);
  body.add(side2);

  //top
  let top = new Three.Mesh(new Three.BoxGeometry(1,0.20,1.5), steelTexture);
  top.position.set(0,1.1,0);
  body.add(top);

  //logo
  let logo = new Three.Mesh(new Three.PlaneGeometry(0.1,0.05),logoTexture);
  logo.position.set(-0.51,1.13,0);
  logo.rotation.y=-0.5*Math.PI;
  body.add(logo);

  //front
  let front = new Three.Mesh(new Three.BoxGeometry(0.05,0.99,1.4), steelTexture);
  front.position.set(-0.47,0.525,0);
  body.add(front);

  //oven
  let oven = new Three.Mesh(new Three.BoxGeometry(0.05,0.9,1.3), steelTexture);
  oven.position.set(-0.53,0.525,0);
  body.add(oven);

  //handle
  let handle1 = new Three.Mesh(new Three.CylinderGeometry(0.02,0.02,1),darkSteelTexture);
  handle1.position.set(-0.6,0.85,0);
  handle1.rotation.x=0.5*Math.PI;
  body.add(handle1);

  let handle2 = new Three.Mesh(new Three.CylinderGeometry(0.02,0.02,0.06),darkSteelTexture);
  handle2.position.set(-0.56,0.85,-0.4);

positive: codeMapMaterialFactory.positive(),
            neutral: codeMapMaterialFactory.neutral(),
            negative: codeMapMaterialFactory.negative(),
            odd: codeMapMaterialFactory.odd(),
            even: codeMapMaterialFactory.even(),
            selected: codeMapMaterialFactory.selected(),
            hovered: codeMapMaterialFactory.hovered(),
            default: codeMapMaterialFactory.default(),
            positiveDelta: codeMapMaterialFactory.positiveDelta(),
            negativeDelta: codeMapMaterialFactory.negativeDelta()
        };

        /**
         * @type {BoxGeometry}
         */
        this.cubeGeo = new THREE.BoxGeometry(1,1,1);

    }

renderTemplateEdges(appProperties: TemplateAppProperties) {
        const {width, depth, height} = appProperties;
        let geometry: THREE.Geometry | undefined = undefined;
        switch (this.props.metadata.appProperties.templateShape) {
            case TemplateShape.RECTANGLE:
                geometry = new THREE.BoxGeometry(width, height, depth);
                break;
            case TemplateShape.CIRCLE:
                geometry = new THREE.CylinderGeometry(width, width, Math.max(0.01, height), 32*Math.max(width, height));
                break;
            case TemplateShape.ARC:
                const angle = Math.PI / (appProperties.angle ? (180 / appProperties.angle) : 6);
                const shape = new THREE.Shape();
                shape.absarc(0, 0, width, -angle / 2, angle / 2, false);
                shape.lineTo(0, 0);
                if (height < 0.01) {
                    geometry = new THREE.ShapeGeometry(shape);
                } else {
                    geometry = new THREE.ExtrudeGeometry(shape, {amount: height, bevelEnabled: false, extrudeMaterial: 1});
                }
                break;
        }