TypeScript THREE.WebGLRenderer类代码示例

export async function main(target: HTMLElement) {
  const THREE = await import("three");
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(20, 1, 0.002, 1000);
  camera.rotation.x = -0.02 * (Math.random() * 0.5 + 0.5);
  camera.rotation.y = 0.02 * (Math.random() * 0.5 + 0.5);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  target.appendChild(renderer.domElement);
  const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ff00ff" }),
  );
  const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: "#ffff00" }),
  );
  cube.position.z = -2.1;
  cube2.position.z = -2.10001;
  cube2.position.x = -0.01;
  cube2.position.y = -0.01;
  scene.add(cube);
  scene.add(cube2);
  function render() {
    camera.rotation.x += 0.0000001;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  render();
}

    initCubeScene() {
        var camera, scene, renderer;
        var mesh;

        camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 400;
        scene = new THREE.Scene();
        //var texture = new THREE.TextureLoader().load('textures/crate.gif');
        var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
        //var material = new THREE.MeshBasicMaterial({ map: texture });
        mesh = new THREE.Mesh(geometry);
        scene.add(mesh);
        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        window.addEventListener('resize', onWindowResize, false);
        
        animate();

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
    }

export function createRenderer(elm: HTMLElement): THREE.WebGLRenderer {
  const renderer = new WebGLRenderer({ antialias: true });
  renderer.setSize(elm.clientWidth, elm.clientHeight);
  elm.appendChild(renderer.domElement);
  renderer.setClearColor(0xffffff, 1.0);
  return renderer;
}

( { require, cache, detached } ) => {
  const THREE = require ( 'THREE' )
  const container = document.getElementById ( 'screen' )
  const screen: Screen = container.getBoundingClientRect ()

  if ( !cache.renderer ) {
    const renderer = new THREE.WebGLRenderer ( { antialias: true } )
    renderer.setPixelRatio ( window.devicePixelRatio )
    renderer.setSize ( screen.width, screen.height )
    container.appendChild ( renderer.domElement )
    cache.renderer = renderer

    cache.camera = new THREE.PerspectiveCamera
    ( 60, screen.width / screen.height, 0.1, 100 )
  }

  const renderer = cache.renderer
  const camera   = cache.camera

  if ( detached ) {
    container.removeChild ( renderer.domElement )
  }

  camera.position.z = 2
  camera.aspect = screen.width / screen.height
  camera.updateProjectionMatrix ()

  renderer.setSize ( screen.width, screen.height )

  return { renderer, camera, screen }
}

 createRenderer() {
   var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setClearColor('#ebe5e7');
   renderer.setSize(this.WIDTH, this.HEIGHT);
   renderer.shadowMap.enabled = true;
   return renderer;
 }

    this.hasPropGroup(["width", "height"], (instance: WebGLRenderer,
                                            newSize: {
                                              width?: number,
                                              height?: number,
                                            }) => {
      const updatedSize: { width: number, height: number } = Object.assign({}, instance.getSize(), newSize);

      instance.setSize(updatedSize.width, updatedSize.height);
    });

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.z = 1000;
  geometry = new THREE.BoxGeometry( 200, 200, 200 );
  material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );
}

  public init(container: HTMLElement, meshFactory: MeshFactory, heightStretch:number, widthStretch:number, viewWidth:number, viewDepth:number) {
    this.container = container;
    this.meshFactory = meshFactory;
    this.heightStretch = heightStretch;
    this.widthStretch = widthStretch;
    this.viewWidth = viewWidth;
    this.viewDepth = viewDepth;


    const width = this.container.clientWidth;
    const height = this.container.clientHeight;

    // Clock
  	this.clock = new Clock();

    // Camera
    this.camera = new PerspectiveCamera( 60, width / height, 1, 20000 );
    this.camera.position.y = 3000;
    this.camera.position.x = 2000;
    this.camera.position.z = 1800;

    // Controls
    this.controls = new OrbitControls(this.camera, container);
    this.controls.center.set( 0.0, 100.0, 0.0 );
    this.controls.keyPanSpeed = 100;
    this.controls.center.y = 1000;

    // Scene
    this.scene = new Scene();

    this.renderer = new WebGLRenderer();
    this.renderer.setClearColor( 0xbfd1e5 );
    this.renderer.setSize( width, height );

    // Mouse
    this.mouse = new Vector2();

    // Raycaster
    this.raycaster = new Raycaster();

    // RollOverMesh
//      	this.rollOverMesh = rollOverMesh.clone();
//      	this.scene.add(this.rollOverMesh);

    container.appendChild( this.renderer.domElement );

    // start animation
    this.animate();

    // bind to window resizes
    window.addEventListener('resize', _ => this.onResize());
  }

 this.hasPropGroup(["clearColor", "clearAlpha"], (instance: WebGLRenderer,
                                                  newColors: {
                                                    clearColor?: number,
                                                    clearAlpha?: number,
                                                  }) => {
   if (newColors.clearColor !== undefined) {
     if (newColors.clearAlpha !== undefined) {
       instance.setClearColor(newColors.clearColor, newColors.clearAlpha);
     } else {
       instance.setClearColor(newColors.clearColor, instance.getClearAlpha());
     }
   } else if (newColors.clearAlpha !== undefined) {
     instance.setClearAlpha(newColors.clearAlpha);
   }
 });

export function updateMaterialUniforms (group: Object3D, camera: Camera, renderer: WebGLRenderer, cDist: number, bRadius: number) {
  const {width, height} = renderer.getSize()
  const canvasHeight = height
  const pixelRatio = renderer.getPixelRatio()
  const ortho = camera.type === 'OrthographicCamera'

  resolution.set(width, height)
  projectionMatrixInverse.getInverse(camera.projectionMatrix)
  projectionMatrixTranspose.copy(camera.projectionMatrix).transpose()

  group.traverse(function (o: any) {
    const m = o.material
    if (!m) return

    const u = m.uniforms
    if (!u) return

    if (m.clipNear) {
      const nearFactor = (50 - m.clipNear) / 50
      const nearClip = cDist - (bRadius * nearFactor)
      u.clipNear.value = nearClip
    }

    if (u.canvasHeight) {
      u.canvasHeight.value = canvasHeight
    }

    if (u.resolution) {
      u.resolution.value.copy(resolution)
    }

    if (u.pixelRatio) {
      u.pixelRatio.value = pixelRatio
    }

    if (u.projectionMatrixInverse) {
      u.projectionMatrixInverse.value.copy(projectionMatrixInverse)
    }

    if (u.projectionMatrixTranspose) {
      u.projectionMatrixTranspose.value.copy(projectionMatrixTranspose)
    }

    if (u.ortho) {
      u.ortho.value = ortho
    }
  })
}