How to use the expo-three.THREE.PerspectiveCamera function in expo-three

To help you get started, we’ve selected a few expo-three examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github expo / expo-graphics / examples / three / App.js View on Github external
onContextCreate = async ({ gl, canvas, width, height, scale }) => {
    // Based on https://threejs.org/docs/#manual/introduction/Creating-a-scene
    // In this case we instead use a texture for the material (because textures
    // are cool!). All differences from the normal THREE.js example are
    // indicated with a `NOTE:` comment.
    // NOTE: How to create an `Expo.GLView`-compatible THREE renderer
    this.renderer = ExpoTHREE.createRenderer({ gl, canvas });
    this.renderer.setPixelRatio(scale);
    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0x000000, 1.0);
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    this.camera.position.z = 5;
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    let map;
    if (Platform.OS === 'web') {
      map = require('./assets/icons/app-icon.png');
    } else {
      map = await ExpoTHREE.loadAsync(require('./assets/icons/app-icon.png'));
    }
    const material = new THREE.MeshBasicMaterial({
      // NOTE: How to create an Expo-compatible THREE texture
      map,
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  };
github expo / expo-three / example / screens / Shaders / LavaExample.js View on Github external
setupCamera({ width, height }) {
    this.camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 200);
    // this.camera.position.z = 400;
    this.camera.position.set(0, 0, 2);

    this.camera.lookAt(new THREE.Vector3());
  }
github expo / expo-three / example / screens / CubeTexture.js View on Github external
onContextCreate = async ({
    gl,
    canvas,
    width,
    height,
    scale: pixelRatio,
  }) => {
    this.renderer = new ExpoTHREE.Renderer({
      gl,
      canvas,
      width,
      height,
      pixelRatio,
    });
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    this.camera.position.z = 5;
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const map = await ExpoTHREE.loadAsync(Assets.icons['ios.png']);

    const material = new THREE.MeshBasicMaterial({
      // NOTE: How to create an Expo-compatible THREE texture
      map,
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    this.cubeTexture = new ExpoTHREE.CubeTexture();
    await this.cubeTexture.loadAsync({
      assetForDirection: direction => Assets.skybox[direction + '.jpg'],
    });
    this.scene.background = this.cubeTexture;
github expo / expo-three / example / screens / Simple.js View on Github external
onContextCreate = async ({
    gl,
    canvas,
    width,
    height,
    scale: pixelRatio,
  }) => {
    this.renderer = new ExpoTHREE.Renderer({
      gl,
      canvas,
      width,
      height,
      pixelRatio,
    });
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    this.camera.position.z = 5;
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const map = await ExpoTHREE.loadAsync(Assets.icons['ios.png']);

    const material = new THREE.MeshBasicMaterial({
      // NOTE: How to create an Expo-compatible THREE texture
      map,
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  };
github expo / expo-three / example / screens / Simple.js View on Github external
onContextCreate = async ({
    gl,
    canvas,
    width,
    height,
    scale: pixelRatio,
  }) => {
    this.renderer = new ExpoTHREE.Renderer({
      gl,
      canvas,
      width,
      height,
      pixelRatio,
    });
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    this.camera.position.z = 5;
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const map = await ExpoTHREE.loadAsync(Assets['icon.png']);

    const material = new THREE.MeshBasicMaterial({
      // NOTE: How to create an Expo-compatible THREE texture
      map,
    });
    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);
  };
github expo / expo-three / example / screens / Shaders / SkyExample.js View on Github external
setupCamera({ width, height }) {
    this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 20000);
    this.camera.position.z = 400;
  }
}
github expo / expo-three / example / screens / Effects / VirtualBoyExample.js View on Github external
setupCamera({ width, height }) {
    this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 5000);
    this.camera.position.z = 400;
    this.camera.lookAt(new THREE.Vector3());
  }
github EvanBacon / Expo-Voxel / js / lib / voxel-view.js View on Github external
this.height = height || 512;
    this.aspectRatio = aspectRatio || this.width / this.height;
    this.nearPlane = nearPlane || 1;
    this.farPlane = farPlane || 10000;
    this.skyColor = skyColor || 0xbfd1e5;
    this.ortho = ortho;
    this.camera = this.ortho
      ? new THREE.OrthographicCamera(
          this.width / -2,
          this.width / 2,
          this.height / 2,
          this.height / -2,
          this.nearPlane,
          this.farPlane,
        )
      : new THREE.PerspectiveCamera(
          this.fov,
          this.aspectRatio,
          this.nearPlane,
          this.farPlane,
        );
    this.camera.lookAt(new THREE.Vector3(0, 0, 0));
    this.context = context;
    this.createRenderer({
      fov,
      width,
      height,
      aspectRatio,
      nearPlane,
      farPlane,
      skyColor,
      ortho,
github expo / expo-three / example / screens / ThreeStage.js View on Github external
setupCamera({ width, height }) {
    this.camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 10000);
    this.camera.position.set(0, 6, 12);
    this.camera.lookAt(0, 0, 0);
  }
github expo / expo-three / example / screens / Effects / GlitchExample.js View on Github external
setupCamera({ width, height }) {
    this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 5000);
    this.camera.position.z = 400;
    this.camera.lookAt(new THREE.Vector3());
  }