How to use the three.WebGLRenderer function in three

this.resolution = window.devicePixelRatio;
    this.animationToken = 0;

    // and the targets
    this.rTarget1 = RenderTarget.clone();
    this.rTarget1.texture.name = 'RT1';
    this.rTarget2 = RenderTarget.clone();
    this.rTarget2.texture.name = 'RT2';
    this.writeBuffer = this.rTarget1;
    this.readBuffer = this.rTarget2;

    // Add a render pass
    this.passes = [];

    // now add a renderer, camera and plane to render the textures to
    this.renderer = new WebGLRenderer(options);
    // console.log('EffectRenderer make renderer', this.renderer.id = 'id-internal-renderer');
    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
    this.quad = new Mesh(new PlaneGeometry(2,2), null);
    this.scene = new Scene();
    this.scene.add(this.quad);

    // events
    window.addEventListener('resize', this.resizeHandler.bind(this));

    // set up renderer
    this.renderer.setPixelRatio(this.resolution);
    this.renderer.setSize(width / this.resolution, height / this.resolution);

    // populate the store
    this.setStore();

setupRenderer() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    // this.renderer.setClearColor(0xd3d3d3);  // it's a light gray
    this.renderer.setClearColor(0x222222); // it's a dark gray
    this.renderer.setPixelRatio(window.devicePixelRatio || 1);
    const { clientWidth, clientHeight } = this.container;
    this.renderer.setSize(clientWidth, clientHeight);
    this.renderer.shadowMap.enabled = true;
    this.container.appendChild(this.renderer.domElement);
    this.renderer.domElement.addEventListener("click", this.handleClick);
    this.renderer.domElement.addEventListener(
      "mousemove",
      this.handleMouseMove
    );
  }

createRenderer() {
    // Create the renderer and set some defaults.
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.alpha = true;
    this.renderer.autoClear = false;
    this.renderer.gammaInput = true;
    this.renderer.gammaOutput = true;
    this.renderer.gammaFactor = 2.2;
    this.renderer.shadowMap.enabled = true;
    this.renderer.sortObjects = true;

    this.renderer.toneMappingExposure = 2; // 1.2;
    this.renderer.toneMappingWhitePoint = 3; //1.0;

    this.renderer.setPixelRatio(window.devicePixelRatio || 1);
    this.renderer.setClearColor(0x000000, 1);
    this.renderer.setSize(this.container.width(), this.container.height());

    this.container.append(this.renderer.domElement);

constructor(scene, container) {
    // Properties
    this.scene = scene;
    this.container = container;

    // Create WebGL renderer and set its antialias
    this.threeRenderer = new THREE.WebGLRenderer({antialias: true});

    // Set clear color to fog to enable fog or to hex color for no fog
    this.threeRenderer.setClearColor(0xf0f0f0);
    this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina

    this.threeRenderer.autoClear = false;

    // Appends canvas
    container.appendChild(this.threeRenderer.domElement);

    // Shadow map options
    this.threeRenderer.shadowMap.enabled = true;
    // this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap;

    // Get anisotropy for textures
    Config.maxAnisotropy = this.threeRenderer.getMaxAnisotropy();

constructor(imgUrl) {
    this.runningAnimations = []
    this.render = this.render.bind(this)
    this.imgUrl = imgUrl
    this.viewports = []
    this.scene = new ImageConstructionScene(this.imgUrl)
    this.renderer = new THREE.WebGLRenderer({antialias: true, alpha: true})

    // if (this.renderer.shadowMap) {
    //   this.renderer.shadowMap.enabled = true
    // } else {
    //   this.renderer.shadowMapEnabled = true
    // }
    this.renderer.setClearColor(this.scene.fog.color, 1)
    this.viewports.push(new MeshObserverViewport())
    // this.viewports.push(new MeshPerspectiveViewPort())
    // this.viewports.push(new CubeObserverViewPort())

    this.lighting = new ImageUnderConstructionLighting(this.scene.scene)
    // this.lighting.addHelpers()

    this.scene.onLoad(() => {
      this.viewports[0].setTargetMesh(this.scene.getMainMesh())

export function threejsEntry(itemList){
  const subjectList = [];

  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas, alpha: true});
  renderer.setSize(canvas.clientWidth, canvas.clientHeight);

  // This is the innermost function and will move up in the hierarchy until
  // addSubject()
  function defaultScene(){
    // Default scene setup (including light)

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x7F7F7F);  // Gray
    const skyColor = 0xFFFFFF;  // White
    const groundColor = 0x000000;  // Black
    const intensity = 2;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);

    return scene;

export default (gl: WebGLRenderingContext, initialProps: *) => {
  const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
  const renderer = new THREE.WebGLRenderer({
    canvas: {
      width,
      height,
      style: {},
      addEventListener: () => {},
      removeEventListener: () => {},
      clientHeight: height
    },
    context: gl
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x000000, 1);

  let camera, scene, requestId;
  let isUserInteracting = false,
    downAtPosition,

"block/grass_block_top": { url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB90lEQVR42j2Tx87qUAyEzyOz+em9915F750NAiQ2IPFgvvpGyl2EJCe2p3hw3W7Xfr+fdTody+fzuhqNhiUSCatWqzabzazf71u5XLZCoWClUsn2+735fD6r1Wrmer2eCheLhQ0GAxuNRpZMJnVPp9MadDwebbfbCQQw6hlWqVTMrddrTYrFYpbNZoVQLBat2WzqguF8PrfD4WDX61WNgUBAIM/n05zf77dcLieKMGi1WkJnYLvdFoNMJiMQviMPZGRQ41arlQqYzv1yudjtdhMLnt/vt/39/QmRpvP5bPF4XN/lAWjD4dCCwaB0plIpmYY34/FYlHmmAQDqeK7X65LnmDaZTGy73UoztClEEvTxhSGPx0OMkAgTT47jh4LpdCptDIlGo7bZbNRMoWce7KhnY952HNOgiqOn00koFNIEs/v9rnNWCjsMZ53kA/YOBD6+Xi+Zwo7xhCaMAxnaNIOIdobCBCAHOtMYhA8Mgw2FIH2/XwuFQtKNNzRi4n8P0AldIkyo+MAZiISKd55hFolEhI5+MoDRjj1TBB0OWCuU0RoOh3XGO3eaSCVMYUWfo5GYkkiQKGII5+R+uVxKCjXIZQNI4J3A6b9AEVo9iqSNkNCI0wSJC0Mx0ls5LBxUSR5T0cz+2YI3ADM/n4+yQTP+kBXqMf8fm1m5bOHB3EYAAAAASUVORK5CYII=" },
        "block/grass_block_side": { url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABX0lEQVQ4y3VSSUuDQQydXyN48OhCse4LVg+KFhcUaxXrMqJiFbwoIvKBIBQFexFcEHexrlAQix68+KOeJJCPNG0PmWSyvJdkxqXfYtj46MPaaw9mrxpZlp86MXlaC//Qhq2vIY4v3LUgdR3F/G0zps7r0Z+pwtJjO9z6ey8n7ufHsJMbwO7LIEaj1Zi7aULyooGBjn6mkSkkmISKKZ/AFu9b4Q4+J7jg5M9j5jLCDHRfyXWxpg63C3EcfieR/U2xbzhbg8RZHduODu89X0hWn7tDm4Q6IE3tkt6MR8IY2e7Yx9ggnd8b54D4dLIQSW4IIEnk1GC6UIOJTUKEjg7tDIKgKEHi2tZEzibrTnQ35fwMYJ1aS8u2WMecXYrdshU7itOMdmYBFr8eRXblys2lGejp9Aj6mfkjWacFqSTSVdEIJOmRjpLFyRiyF/1azibpDev5LVEJgP0DsqRK7y8E/2kQKqQTbHIJAAAAAElFTkSuQmCC" },
        "block/grass_block_side_overlay": { url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAeElEQVQ4T+2NsQrAIAxE/WtHUdxUUARXZwcXfzDtXRFa6Cd4IPHlLokaY0jOWVprEmOUzajo4fXeyahrLbHW8g9PwXgPIqBugZ1zZATBtVbWnQ8hiOKWWwh672mAsWwv2tfmnOxprZ/rfyqlfAxjDDml9D9wdHREXc8PflIHcVV8AAAAAElFTkSuQmCC" },
    };

    const canvas = document.getElementById("block-canvas");
    const rect = canvas.getBoundingClientRect();

    const camera = new THREE.PerspectiveCamera(60, rect.width / rect.height, 1, 1000);
    camera.position.x = 16;
    camera.position.x = 16;
    camera.position.x = 32;

    const scene = new THREE.Scene();

    const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
    renderer.setSize(rect.width, rect.height);

    scene.add(new THREE.AmbientLight(0xffffff, 0.97));

    const factory = new BlockModelFactory(textReg);
    const o = factory.getObject(grassBlock);
    scene.add(o);

    const control = new THREE.OrbitControls(camera, renderer.domElement);
    control.enableDamping = true;
    control.dampingFactor = 0.2
    control.zoomSpeed = 1.4
    control.rotateSpeed = 0.6
    control.enableKeys = false

    {

constructor(
    private container: HTMLElement,
    private projectorEventContext: ProjectorEventContext
  ) {
    this.getLayoutValues();

    this.scene = new THREE.Scene();
    this.renderer = new THREE.WebGLRenderer({
      alpha: true,
      premultipliedAlpha: false,
      antialias: false,
    });
    this.renderer.setClearColor(BACKGROUND_COLOR, 1);
    this.container.appendChild(this.renderer.domElement);
    this.light = new THREE.PointLight(0xffecbf, 1, 0);
    this.scene.add(this.light);

    this.setDimensions(3);
    this.recreateCamera(this.makeDefaultCameraDef(this.dimensionality));
    this.renderer.render(this.scene, this.camera);

    this.rectangleSelector = new ScatterPlotRectangleSelector(
      this.container,
      (boundingBox: ScatterBoundingBox) => this.selectBoundingBox(boundingBox)