How to use the expo-three.createTextureAsync 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 EvanBacon / expo-rpg / components / Sprite.js View on Github external
// Save props
    let _props = {
      image,
      tilesHoriz,
      tilesVert,
      numTiles,
      tileDispDuration,
      filter,
      size,
      position,
      ...props
    };

    Object.keys(_props).map(v => (this[`__${v}`] = _props[v]));

    this._texture = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(image)
    });
    /// Preserve Pixel Texture - no smoothing
    this._texture.magFilter = this._texture.minFilter = filter;

    this.animation = new TextureAnimator(
      this._texture,
      tilesHoriz,
      tilesVert,
      numTiles,
      tileDispDuration
    ); // texture, #horiz, #vert, #total, duration.
    this.material = new THREE.MeshBasicMaterial({
      map: this._texture,
      transparent: true
    });
github EvanBacon / expo-three-demo / Scenes / FlameApp.js View on Github external
_setupScene = async () => {
    const { innerWidth: width, innerHeight: height } = window;
    // Initialize Three.JS

    const texture = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(require('../assets/images/particle.png')),
    });

    const flame = new Flame(texture);
    const scale = 100;
    flame.scale.set(scale, scale, scale);
    scene.add(flame);

    const speed = 0.002;
  };
github EvanBacon / expo-three-demo / assets / components / Tree.js View on Github external
setTimeout(function () {
                        tween.start();
                    }, timer);
                }
            }
            if (data.fireDensity) {
                for (var i = 0; i < data.fireDensity; i = i + 1) {
                    var distUpTree = data.height * 0.8 * (2 / 3) + Math.random() * 0.2 * (2 / 3);
                    var distUpTreeVec = dirVec.clone().multiplyScalar(distUpTree);
                    var fireSize = Math.random() * data.height / 1.5 + data.height * 2;
                    var fireGeo = new THREE.PlaneGeometry(fireSize, fireSize);

                    //fire2.png


                    var explosionTexture = await ExpoTHREE.createTextureAsync({
                        asset: Expo.Asset.fromModule(images.fire),
                    });
                    this.explosions.push(new TextureAnimator(explosionTexture, 4, 4, 16, 90)); // texture, #horiz, #vert, #total, duration.
                    var fireMat = new THREE.MeshBasicMaterial({
                        map: explosionTexture,
                        transparent: true,
                        side: THREE.DoubleSide,
                        depthWrite: false,
                        alphaTest: 0.5
                        //blending: THREE.AdditiveBlending
                    });

                    var fire = new THREE.Mesh(fireGeo, fireMat);
                    fire.rotation.x = Math.random() * Math.PI * 2;
                    fire.rotation.y = Math.random() * Math.PI * 2;
                    fire.rotation.z = Math.random() * Math.PI * 2;
github expo / expo-three / example / screens / Legacy.js View on Github external
}) => {
    this.renderer = ExpoTHREE.createRenderer({
      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 asset = Asset.fromModule(Assets.icons['ios.png']);
    await asset.downloadAsync();
    const map = await ExpoTHREE.createTextureAsync({ asset });

    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 EvanBacon / expo-three-demo / Scenes / VoxelPainter.js View on Github external
_onGLContextCreate = async (gl) => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;
    this.scene = this.configureScene();
    const camera = this.configureCamera({ width, height });

    // roll-over helpers
    this.rollOverGeo = new THREE.BoxGeometry(50, 50, 50);
    this.rollOverMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true });
    this.rollOverMesh = new THREE.Mesh(this.rollOverGeo, this.rollOverMaterial);
    this.scene.add(this.rollOverMesh);
    // cubes
    this.cubeGeo = new THREE.BoxGeometry(50, 50, 50);

    var cubeTex = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(require('../assets/images/square-outline-textured.png')),
    });


    this.cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xfeb74c, map: cubeTex });
    // grid
    var size = 500, step = 50;
    var geometry = new THREE.Geometry();
    for (var i = - size; i <= size; i += step) {
      geometry.vertices.push(new THREE.Vector3(- size, 0, i));
      geometry.vertices.push(new THREE.Vector3(size, 0, i));
      geometry.vertices.push(new THREE.Vector3(i, 0, - size));
      geometry.vertices.push(new THREE.Vector3(i, 0, size));
    }
    var material = new THREE.LineBasicMaterial({ color: 0x000000, opacity: 0.2, transparent: true });
    var line = new THREE.LineSegments(geometry, material);
github EvanBacon / expo-three-demo / Scenes / VrHelloWorldApp.js View on Github external
_setupScene = async () => {
    const { innerWidth: width, innerHeight: height } = window;

    const geometry = new THREE.SphereBufferGeometry(500, 60, 40);
    // invert the geometry on the x-axis so that all of the faces point inward
    geometry.scale(-1, 1, 1);

    const material = new THREE.MeshBasicMaterial({
      // NOTE: How to create an Expo-compatible THREE texture
      map: await ExpoTHREE.createTextureAsync({
        asset: Expo.Asset.fromModule(require('../assets/images/nik.png')),
      }),
    });

    const mesh = new THREE.Mesh(geometry);
    this.scene.add(mesh);

    const helperGeometry = new THREE.BoxBufferGeometry(100, 100, 100, 4, 4, 4);
    const helperMaterial = new THREE.MeshBasicMaterial({
      color: 0xff00ff,
      wireframe: true,
    });
    const helper = new THREE.Mesh(helperGeometry, helperMaterial);
    this.scene.add(helper);
  };
github EvanBacon / expo-three-demo / Scenes / AnimationCloth.js View on Github external
// cloth mesh
    let object = new THREE.Mesh(this.clothGeometry, clothMaterial);
    object.position.set(0, 0, 0);
    object.castShadow = true;
    this.scene.add(object);
    object.customDepthMaterial = new THREE.ShaderMaterial({
      uniforms: uniforms,
      vertexShader: vertexShader,
      fragmentShader: fragmentShader,
      side: THREE.DoubleSide,
    });

    this.configureSphere();
    // ground

    var groundTexture = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(
        require('../assets/images/grasslight-big.jpg')
      ),
    });
    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
    groundTexture.repeat.set(25, 25);
    groundTexture.anisotropy = 16;
    var groundMaterial = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      specular: 0x111111,
      map: groundTexture,
    });
    var mesh = new THREE.Mesh(
      new THREE.PlaneBufferGeometry(20000, 20000),
      groundMaterial
    );
github EvanBacon / expo-three-demo / Scenes / LavaShader.js View on Github external
_onGLContextCreate = async (gl) => {
    const { drawingBufferWidth: width, drawingBufferHeight: height } = gl;

    gl.createFramebuffer = () => null;
    gl.createRenderbuffer = () => null;
    gl.bindRenderbuffer = (target, renderbuffer) => { };
    gl.renderbufferStorage = (target, internalFormat, width, height) => { };
    gl.framebufferTexture2D = (target, attachment, textarget, texture, level) => { };
    gl.framebufferRenderbuffer = (target, attachmebt, renderbuffertarget, renderbuffer) => { };

    this.scene = this.configureScene();
    const camera = this.configureCamera({ width, height });
    this.controls = new THREE.OrbitControls(camera);
    this.setupLights();

    var cloud = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(require('../assets/images/cloud.png')),
    });
    var lavatile = await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(require('../assets/images/lavatile.jpg')),
    });

    var textureLoader = new THREE.TextureLoader();
    let uniforms = {
      fogDensity: { value: 0.45 },
      fogColor: { value: new THREE.Vector3(0, 0, 0) },
      time: { value: 1.0 },
      resolution: { value: new THREE.Vector2() },
      uvScale: { value: new THREE.Vector2(3.0, 1.0) },
      texture1: { value: cloud },
      texture2: { value: lavatile }
    };
github expo / examples / with-three-js / App.js View on Github external
const createCubeMesh = async ({ scene, gl }) => {
  const geometry = new THREE.BoxGeometry(40, 40, 70);
  const material = new THREE.MeshBasicMaterial({
    transparent: true,
    opacity: 0.7,
    map: await ExpoTHREE.createTextureAsync({
      asset: Expo.Asset.fromModule(require('./assets/ice.jpg')),
    }),
  });

  const cube = new THREE.Mesh(geometry, material);
  cube.position.y = getRandomArbitrary(-60, 60);

  scene.add(cube);
  return cube;
};
github expo / expo / apps / native-component-list / screens / GL / GLScreens.js View on Github external
const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        gl.drawingBufferWidth / gl.drawingBufferHeight,
        0.1,
        1000
      );

      const renderer = ExpoTHREE.createRenderer({ gl });
      renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
      renderer.setClearColor(0xffffff);

      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshBasicMaterial({
        transparent: true,
        map: await ExpoTHREE.createTextureAsync({
          asset: Expo.Asset.fromModule(require('../../assets/images/nikki.png')),
        }),
      });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 3;

      return {
        onTick() {
          cube.rotation.x += 0.04;
          cube.rotation.y += 0.07;

          renderer.render(scene, camera);

          gl.endFrameEXP();