解决: WARNING: Too many active WebGL contexts. Oldest context will be lost.

在spa应用中使用threejs时, 页面unmount不会自动清除已经创建的webgl实例, 需要手动清除.

import * as React from 'react';
import {
  Scene,
  PerspectiveCamera,
  WebGLRenderer,
  BoxGeometry,
  MeshBasicMaterial,
  Mesh
} from 'three';
import BaseComponent from '@components/Base';

export default class HelloWorld extends BaseComponent {

  container: HTMLDivElement = null;

  renderer: WebGLRenderer;

  componentDidMount() {
    setTimeout(() => {
      this.init();
    }, 100);
  }

  componentWillUnmount() {
    this.renderer.forceContextLoss();
    this.renderer = null;
  }

  init = () => {
    const { clientWidth, clientHeight } = this.container;
    const scene = new Scene();
    const camera = new PerspectiveCamera(75, clientWidth / clientHeight, 0.1, 1000);
    this.renderer = new WebGLRenderer({
      antialias: true
    });
    this.renderer.setSize(clientWidth, clientHeight);
    this.renderer.setClearColor(0xFFFFFF, 1);
    this.container.appendChild(this.renderer.domElement);
    const geometry = new BoxGeometry(1, 1, 5);
    const material = new MeshBasicMaterial({ color: 0xff5555 });
    const cube = new Mesh(geometry, material);
    camera.position.z = 5;
    scene.add(cube);
    const render = () => {
      if (!this.renderer) {
        return;
      }
      this.renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    render();
  }

  render() {
    return (
      
 this.container = ref} />
    )
  }
}