Как включить THREE.LensFlareElement в Angular Project? - PullRequest
Новая
       2

Как включить THREE.LensFlareElement в Angular Project?

0 голосов
/ 27 января 2019

Я пытался использовать LensFlareElement в моей сцене, но каждый раз, когда я пытаюсь загрузить сцену, я получаю следующее сообщение:

THREE.LensFlare перемещается в / examples / js / objects /Lensflare.js

Я установил Three.js с npm three и включил его следующим образом: 

import * as THREE from 'three';

Так есть ли способ, которым я могу получить этот код, который лежитвнутри файла js, используя машинопись и angular7?

С уважением

1 Ответ

0 голосов
/ 01 февраля 2019

Итак, после публикации на дискурсивном форуме Three.js @ Mugen87 поделился примером того, как преобразовать пример сценария в модуль:

Как включить THREE.LensFlareElement в Angular Project?на discourse.three.org

Как преобразовать модуль: (шаги процесса)

  1. Возьмите оригинальный пример кода
  2. импортировать * как три из 'трех'
  3. Удалить три объявления каждого и поставить export { TheExampleIWant } в конце ... В моем случае: export { Lensflare, LensflareElement }

Примечание: Имейте в виду, я проверял это только с помощью решения, предоставленного Mugen, и не проверял другие примеры.Я могу себе представить, что есть некоторые примеры, которые будет не так просто преобразовать в модули, но, возможно, я ошибаюсь.

По сути, преобразованный пример выглядит очень похоже на предоставленный исходный пример..

Преобразованный пример выглядит следующим образом: (Авторы предоставлены Mugen87, он предоставил мне этот пример) 

import * as THREE from 'three';

function Lensflare() {

  THREE.Mesh.call(this, LensflareGeometry, new THREE.MeshBasicMaterial({ opacity: 0, transparent: true }));

  this.type = 'Lensflare';
  this.frustumCulled = false;
  this.renderOrder = Infinity;

  //

  var positionScreen = new THREE.Vector3();
  var positionView = new THREE.Vector3();

  // textures

  var tempMap = new THREE.DataTexture(new Uint8Array(16 * 16 * 3), 16, 16, THREE.RGBFormat);
  tempMap.minFilter = THREE.NearestFilter;
  tempMap.magFilter = THREE.NearestFilter;
  tempMap.wrapS = THREE.ClampToEdgeWrapping;
  tempMap.wrapT = THREE.ClampToEdgeWrapping;
  tempMap.needsUpdate = true;

  var occlusionMap = new THREE.DataTexture(new Uint8Array(16 * 16 * 3), 16, 16, THREE.RGBFormat);
  occlusionMap.minFilter = THREE.NearestFilter;
  occlusionMap.magFilter = THREE.NearestFilter;
  occlusionMap.wrapS = THREE.ClampToEdgeWrapping;
  occlusionMap.wrapT = THREE.ClampToEdgeWrapping;
  occlusionMap.needsUpdate = true;

  // material

  var geometry = LensflareGeometry;

  var material1a = new THREE.RawShaderMaterial({
    uniforms: {
      'scale': { value: null },
      'screenPosition': { value: null }
    },
    vertexShader: [

      'precision highp float;',

      'uniform vec3 screenPosition;',
      'uniform vec2 scale;',

      'attribute vec3 position;',

      'void main() {',

      ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );',

      '}'

    ].join('\n'),
    fragmentShader: [

      'precision highp float;',

      'void main() {',

      ' gl_FragColor = vec4( 1.0, 0.0, 1.0, 1.0 );',

      '}'

    ].join('\n'),
    depthTest: true,
    depthWrite: false,
    transparent: false
  });

  var material1b = new THREE.RawShaderMaterial({
    uniforms: {
      'map': { value: tempMap },
      'scale': { value: null },
      'screenPosition': { value: null }
    },
    vertexShader: [

      'precision highp float;',

      'uniform vec3 screenPosition;',
      'uniform vec2 scale;',

      'attribute vec3 position;',
      'attribute vec2 uv;',

      'varying vec2 vUV;',

      'void main() {',

      ' vUV = uv;',

      ' gl_Position = vec4( position.xy * scale + screenPosition.xy, screenPosition.z, 1.0 );',

      '}'

    ].join('\n'),
    fragmentShader: [

      'precision highp float;',

      'uniform sampler2D map;',

      'varying vec2 vUV;',

      'void main() {',

      ' gl_FragColor = texture2D( map, vUV );',

      '}'

    ].join('\n'),
    depthTest: false,
    depthWrite: false,
    transparent: false
  });

  // the following object is used for occlusionMap generation

  var mesh1 = new THREE.Mesh(geometry, material1a);

  //

  var elements = [];

  var shader = LensflareElement.Shader;

  var material2 = new THREE.RawShaderMaterial({
    uniforms: {
      'map': { value: null },
      'occlusionMap': { value: occlusionMap },
      'color': { value: new THREE.Color(0xffffff) },
      'scale': { value: new THREE.Vector2() },
      'screenPosition': { value: new THREE.Vector3() }
    },
    vertexShader: shader.vertexShader,
    fragmentShader: shader.fragmentShader,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthWrite: false
  });

  var mesh2 = new THREE.Mesh(geometry, material2);

  this.addElement = function (element) {

    elements.push(element);

  };

  //

  var scale = new THREE.Vector2();
  var screenPositionPixels = new THREE.Vector2();
  var validArea = new THREE.Box2();
  var viewport = new THREE.Vector4();

  this.onBeforeRender = function (renderer, scene, camera) {

    viewport.copy(renderer.getCurrentViewport());

    var invAspect = viewport.w / viewport.z;
    var halfViewportWidth = viewport.z / 2.0;
    var halfViewportHeight = viewport.w / 2.0;

    var size = 16 / viewport.w;
    scale.set(size * invAspect, size);

    validArea.min.set(viewport.x, viewport.y);
    validArea.max.set(viewport.x + (viewport.z - 16), viewport.y + (viewport.w - 16));

    // calculate position in screen space

    positionView.setFromMatrixPosition(this.matrixWorld);
    positionView.applyMatrix4(camera.matrixWorldInverse);

    if (positionView.z > 0) return; // lensflare is behind the camera

    positionScreen.copy(positionView).applyMatrix4(camera.projectionMatrix);

    // horizontal and vertical coordinate of the lower left corner of the pixels to copy

    screenPositionPixels.x = viewport.x + (positionScreen.x * halfViewportWidth) + halfViewportWidth - 8;
    screenPositionPixels.y = viewport.y + (positionScreen.y * halfViewportHeight) + halfViewportHeight - 8;

    // screen cull

    if (validArea.containsPoint(screenPositionPixels)) {

      // save current RGB to temp texture

      renderer.copyFramebufferToTexture(screenPositionPixels, tempMap);

      // render pink quad

      var uniforms = material1a.uniforms;
      uniforms["scale"].value = scale;
      uniforms["screenPosition"].value = positionScreen;

      renderer.renderBufferDirect(camera, null, geometry, material1a, mesh1, null);

      // copy result to occlusionMap

      renderer.copyFramebufferToTexture(screenPositionPixels, occlusionMap);

      // restore graphics

      var uniforms = material1b.uniforms;
      uniforms["scale"].value = scale;
      uniforms["screenPosition"].value = positionScreen;

      renderer.renderBufferDirect(camera, null, geometry, material1b, mesh1, null);

      // render elements

      var vecX = - positionScreen.x * 2;
      var vecY = - positionScreen.y * 2;

      for (var i = 0, l = elements.length; i < l; i++) {

        var element = elements[i];

        var uniforms = material2.uniforms;

        uniforms["color"].value.copy(element.color);
        uniforms["map"].value = element.texture;
        uniforms["screenPosition"].value.x = positionScreen.x + vecX * element.distance;
        uniforms["screenPosition"].value.y = positionScreen.y + vecY * element.distance;

        var size = element.size / viewport.w;
        var invAspect = viewport.w / viewport.z;

        uniforms["scale"].value.set(size * invAspect, size);

        material2.needsUpdate = true;

        renderer.renderBufferDirect(camera, null, geometry, material2, mesh2, null);

      }

    }

  };

  this.dispose = function () {

    material1a.dispose();
    material1b.dispose();
    material2.dispose();

    tempMap.dispose();
    occlusionMap.dispose();

    for (var i = 0, l = elements.length; i < l; i++) {

      elements[i].texture.dispose();

    }

  };

}

Lensflare.prototype = Object.create(THREE.Mesh.prototype);
Lensflare.prototype.constructor = Lensflare;
Lensflare.prototype.isLensflare = true;

//

function LensflareElement(texture, size, distance, color?) {

  this.texture = texture;
  this.size = size || 1;
  this.distance = distance || 0;
  this.color = color || new THREE.Color(0xffffff);

}

LensflareElement.Shader = {

  uniforms: {

    'map': { value: null },
    'occlusionMap': { value: null },
    'color': { value: null },
    'scale': { value: null },
    'screenPosition': { value: null }

  },

  vertexShader: [

    'precision highp float;',

    'uniform vec3 screenPosition;',
    'uniform vec2 scale;',

    'uniform sampler2D occlusionMap;',

    'attribute vec3 position;',
    'attribute vec2 uv;',

    'varying vec2 vUV;',
    'varying float vVisibility;',

    'void main() {',

    '   vUV = uv;',

    '   vec2 pos = position.xy;',

    '   vec4 visibility = texture2D( occlusionMap, vec2( 0.1, 0.1 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.5, 0.1 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.9, 0.1 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.9, 0.5 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.9, 0.9 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.5, 0.9 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.1, 0.9 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.1, 0.5 ) );',
    '   visibility += texture2D( occlusionMap, vec2( 0.5, 0.5 ) );',

    '   vVisibility =        visibility.r / 9.0;',
    '   vVisibility *= 1.0 - visibility.g / 9.0;',
    '   vVisibility *=       visibility.b / 9.0;',

    '   gl_Position = vec4( ( pos * scale + screenPosition.xy ).xy, screenPosition.z, 1.0 );',

    '}'

  ].join('\n'),

  fragmentShader: [

    'precision highp float;',

    'uniform sampler2D map;',
    'uniform vec3 color;',

    'varying vec2 vUV;',
    'varying float vVisibility;',

    'void main() {',

    '   vec4 texture = texture2D( map, vUV );',
    '   texture.a *= vVisibility;',
    '   gl_FragColor = texture;',
    '   gl_FragColor.rgb *= color;',

    '}'

  ].join('\n')

};

var count = 0;

var LensflareGeometry = (function () {

  var geometry = new THREE.BufferGeometry();

  var float32Array = new Float32Array([
    - 1, - 1, 0, 0, 0,
    1, - 1, 0, 1, 0,
    1, 1, 0, 1, 1,
    - 1, 1, 0, 0, 1
  ]);

  var interleavedBuffer = new THREE.InterleavedBuffer(float32Array, 5);

  geometry.setIndex([0, 1, 2, 0, 2, 3]);
  geometry.addAttribute('position', new THREE.InterleavedBufferAttribute(interleavedBuffer, 3, 0, false));
  geometry.addAttribute('uv', new THREE.InterleavedBufferAttribute(interleavedBuffer, 2, 3, false));

  geometry.index.temp = count++;

  return geometry;

})();

export { Lensflare, LensflareElement };

После импорта преобразованного модуля я смог получитьlensflare to work.

Надеюсь, это поможет любому пользователю, который не знает, как преобразовать модуль

Creative Regards

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...