Проблема с нанесением картинки на Сферу - PullRequest
Новая
       25

Проблема с нанесением картинки на Сферу

1 голос
/ 02 апреля 2019

Я читал довольно много тем здесь, гуглил, смотрел YouTube ... Просто не могу заставить мою Сферу получить текстуру.Запуск этого кода показывает только белую Сферу, но без текстуры ... Пожалуйста, помогите новичку <3 </p>

Полный код ниже: 

import { View as GraphicsView } from 'expo-graphics';
import ExpoTHREE, { THREE } from 'expo-three';
import React from 'react';

export default class App extends React.Component {
  componentWillMount() {
    THREE.suppressExpoWarnings();
  }

  render() {
    // Create an `ExpoGraphics.View` covering the whole screen, tell it to call our
    // `onContextCreate` function once it's initialized.
    return (
      <GraphicsView
        onContextCreate={this.onContextCreate}
        onRender={this.onRender}
      />
    );
  }

  // This is called by the `ExpoGraphics.View` once it's initialized

  onContextCreate = async ({
    gl,
    canvas,
    width,
    height,
    scale: pixelRatio,
  }) => {
    this.renderer = new ExpoTHREE.Renderer({ gl, pixelRatio, width, height });
    this.renderer.setClearColor(0x00cbff)
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(120, width / height, 0.1, 1000);
    this.camera.position.z = 5;
    const loader = new THREE.TextureLoader();
    const geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
    const material = new THREE.MeshPhongMaterial({map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg')});

    this.cube = new THREE.Mesh(geometry, material);
    this.scene.add(this.cube);

    this.scene.add(new THREE.AmbientLight(0x000000));

    const light = new THREE.DirectionalLight(0xffffff, 0.5);
    light.position.set(3, 3, 3);
    this.scene.add(light);
  };

  onRender = delta => {
    this.cube.rotation.x += 3.5 * delta;
    this.cube.rotation.y += 2 * delta;
    this.renderer.render(this.scene, this.camera);
  };
}

1 Ответ

0 голосов
/ 25 мая 2019

Не уверен, что это неприемлемое требование, но я считаю, что expo нужно загружать свои ресурсы из локального хранилища, а не из удаленных URL-адресов.

Сначала загрузите файл wall.jpg и сохраните его локально (в моемcase, папка в корневом каталоге с именем 'assets'.

Теперь вам нужно настроить expo для добавления файлов jpg в ваш пакет. Откройте app.json в корневом каталоге вашего приложения и обновите или добавьте в ""packagerOpts ", чтобы включить jpg: 

    "packagerOpts": {
      "assetExts": ["jpg"]
    },

Вам также может понадобиться создать файл в корневом каталоге вашего приложения с именем" metro.config.js ", который будет содержать следующее: 

module.exports = {
  resolver: {
    assetExts: ["jpg"]
  }
}

Теперь, когда ваш упаковщик включает JPG-файлы в ваш пакет приложений expo, вы можете использовать встроенную функцию ExpoAsREE loadAsync для загрузки вашего jpg: 

const texture = await ExpoTHREE.loadAsync(
  require('./assets/wall.jpg')
);
const geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
const material = new THREE.MeshPhongMaterial({map: texture});

С этими изменениями ваш код будет работать на моем концеВы можете использовать один и тот же процесс для добавления файлов разных типов в ваш пакет и загрузки их для использования в ExpoTHREE. Просто добавьте различные типы файлов в массивы в вашем app.jsonи metro.config.js, и они будут объединены для использования в вашем приложении.

...