TypeScript WebGLRenderer.render方法代码示例

/**
 * Main animation loop
 */
function animate() {
    requestAnimationFrame(animate);

    now = performance.now();
    deltaTime = now - lastFrame;

    if (deltaTime >= snakeSpeed) {
        lastFrame = now;

        snake.move(playerOrientation);

        if (snake.getPosition().x > frustrumWidth) {
            snake.setPosition(new Vector3(-frustrumWidth, snake.getPosition().y));
        } else if (snake.getPosition().x < -frustrumWidth) {
            snake.setPosition(new Vector3(frustrumWidth, snake.getPosition().y));
        }

        if (snake.getPosition().y > frustrumHeight) {
            snake.setPosition(new Vector3(snake.getPosition().x, -frustrumHeight));
        } else if (snake.getPosition().y < -frustrumHeight) {
            snake.setPosition(new Vector3(snake.getPosition().x, frustrumHeight));
        }

        renderer.render(scene, camera);
    }
}

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

 constructor(rendererSettings: THREE.WebGLRendererParameters = {},
             cameraSettings: PerspectiveCameraParameters = {}){
   super();
   this.addClass('ThreeRendererWidget');
   this._scene = new THREE.Scene();
   this._canvas = document.createElement('canvas');
   $(this._canvas).css({position: "absolute"});
   rendererSettings.canvas = this._canvas;
   this._renderer = new THREE.WebGLRenderer(rendererSettings);
   this._camera = new THREE.PerspectiveCamera(cameraSettings.fov,
                                              cameraSettings.aspect,
                                              cameraSettings.near,
                                              cameraSettings.far);
   this._scene.add(this._camera);
   this._renderer.render(this._scene, this._camera);
   this.node.appendChild(this._canvas);
 }

    const renderFunction = (scene: Scene, camera: Camera, renderTarget?: RenderTarget, forceClear?: boolean) => {
      const oldWarn = window.console.warn;

      // get rid of useless message but warn about everything else
      window.console.warn = (...args: string[]) => {
        if (args.length === 2
          && args[0] === "THREE.WebGLProgram: gl.getProgramInfoLog()"
          && args[1].match(/^\s*$/) !== null) {
          return;
        }

        oldWarn.call(window.console, ...args);
      };

      rendererInstance.render(scene, camera, renderTarget, forceClear);

      window.console.warn = oldWarn;

      // redefine to wrap
      Object.defineProperty(this.wrapper, "render", getWrappedAttributes(property, rendererInstance, "render"));
    };

function render() {
	requestAnimationFrame(render);

	// line.rotation.x += 0.01;
	// line.rotation.y += 0.01;
	// shapeMesh.rotation.y += 0.01;

	geometry.vertices = [];

	points[renderIteration].forEach((point) => {
		geometry.vertices.push(new THREE.Vector3(worldX(point[0]), worldY(point[1])));
	});
	geometry.verticesNeedUpdate = true;

	renderer.render(scene, camera);

	renderIteration++;

	if (renderIteration > 2) {
		renderIteration = 0;
	}
}

const animate = () => {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

const geometry = new THREE.SphereGeometry(sphereRadius, numSegments, numSegments)
const attributes = {
  displacement: {
    type: 'f'
  , value: []
  }
}


const sceneObjects = [
  , new THREE.Mesh(geometry, unlitMaterial)
  , new THREE.Mesh(geometry, fakeLitMaterial)
  , new THREE.Mesh(attributes, geometry, morphingFakeLitMaterial)
]
const sceneObjectOffset:number = 50
const centeredContentOffset:number = Math.floor(sceneObjects.length / 2) * sphereDiameter * -1
sceneObjects.reduce((offset, mesh) => {
  mesh.position.set(offset, 100, 100)
  scene.add(mesh)

  offset += sphereDiameter + sceneObjectOffset
  return offset

}, centeredContentOffset)

attributes.displacement.value = geometry.vertices.map(() => Math.random() * 30)
renderer.setSize(window.innerWidth, window.innerHeight)
camera.position.z = 500
document.body.appendChild(renderer.domElement)
renderer.render(scene, camera)

 public animate() {
   window.requestAnimationFrame(_ => this.animate());
   this.controls.update();
   this.renderer.render(this.scene, this.camera);
 }

function animate(time: number) {
  animationId = requestAnimationFrame(animate);

  if (previousTime != null) {
    const elapsedTime = time - previousTime;
    accumulatedTime = Math.min(accumulatedTime + elapsedTime, maxAccumulatedTime);
  }
  previousTime = time;

  const ticks = Math.floor(accumulatedTime / clientTickDuration);
  accumulatedTime -= ticks * clientTickDuration;

  if (pub != null && pub.match == null) {
    sceneAngleY += Math.PI / 640;
  } else {
    if (Math.abs(sceneAngleY) > 0.1) sceneAngleY = lerp(sceneAngleY, 0, 0.15);
    else sceneAngleY = 0;
  }
  if (sceneAngleY > Math.PI) sceneAngleY -= Math.PI * 2;
  scene.setRotationFromEuler(tmpEuler.set(0, sceneAngleY, 0));

  let width = canvas.parentElement.clientWidth;
  let height = canvas.parentElement.clientHeight;
  if (width > height * 4 / 3) width = height * 4 / 3;
  if (height > width * 3 / 4) height = width * 3 / 4;

  canvas.width = width;
  canvas.height = height;

  camera.updateProjectionMatrix();

  threeRenderer.setSize(canvas.width, canvas.height, false);
  threeRenderer.render(scene, camera);

  input.gather();
  if (input.hasJustPressedLeftTrigger) { socket.emit("throwBall"); }

  for (const playerId in modelsById) {
    const model = modelsById[playerId];
    const { avatar } = players.byId[playerId];
    const hasBall = pub.ball.playerId === playerId;

    model.nametag.setRotationFromEuler(tmpEuler.set(0, -sceneAngleY, 0));

    if (playerId === myPlayerId) {
      for (let i = 0; i < ticks; i++) input.predict(pub.match != null, pub.ball.playerId === myPlayerId, ballThrownTimer > 0);

      model.root.position.set(input.prediction.x, 0, input.prediction.z);
      model.body.setRotationFromEuler(tmpEuler.set(0, -input.prediction.angleY, 0));
      model.shoulders.setRotationFromEuler(tmpEuler.set(0, 0, input.prediction.catching || hasBall ? input.prediction.angleX : -Math.PI * 0.4));
    } else {
      // TODO: Lerp between previous and current!
      model.root.position.set(avatar.x, 0, avatar.z);
      model.body.setRotationFromEuler(tmpEuler.set(0, -avatar.angleY, 0));
      model.shoulders.setRotationFromEuler(tmpEuler.set(0, 0, avatar.catching || hasBall ? avatar.angleX : -Math.PI * 0.4));
    }

    model.root.position.y = shared.getAvatarY(avatar.jump);
  }

  if (pub != null && pub.ball.playerId == null) {
    ballModel.position.set(pub.ball.x, pub.ball.y, pub.ball.z);
    ballMarker.position.set(pub.ball.x, 0.01, pub.ball.z);
  }
}

function render(): void {
	let timer = 0.002 * Date.now()
	box.position.y = 0.5 + 0.5 * Math.sin(timer)
	box.rotation.x += 0.1
	renderer.render(scene, camera)
}