Как правильно применить линейный фильтр Three.js в определенной области?[Javascript] - PullRequest
Новая
       17

Как правильно применить линейный фильтр Three.js в определенной области?[Javascript]

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

На данный момент я все еще новичок в JS, но мне нужно найти конкретный способ вызова переменной текстуры через Three.js и Fabricjs. 

var img = document.createElement('img');    
//Upload image to fabric.js canvas. Exists as a reader.onload function inside of a document.getElementByID function in which the final image texture is defined by...
    document.getElementById('file').addEventListener("change", function (e) {
      var file = e.target.files[0];
      var reader = new FileReader();
      reader.onload = function (f) {  
        var data = f.target.result;
        //Declare img as global scope if we need to call it first? Declaring it here gets us nowhere.  
        //var img = document.createElement('img');
        img.onload = function () {
          if (img.width < 1000 || img.height < 1000)
          {
            alert("upload image should be greater then 1000px*1000px");
            return;
          }
          var oImg = new fabric.Image(img);
          var oImg = oImg.set({left: 50, top: 100, angle: 00}).scaleToWidth(90);
          canvas.add(oImg);
          canvas.setActiveObject(oImg);
        };
        img.src = data;
      };
      reader.readAsDataURL(file);
    });
    document.querySelector('#txt').onclick = function (e) {
      e.preventDefault();
      canvas.deactivateAll();
      oImg.resizeFilter = new fabric.Image.filters.resizeFilter({type:'sliceHack'});
      document.querySelector('#preview').src = canvas.toDataURL({
        format: 'png',
        multiplier: 5});
    }

Эта строка, var img = document.createElement('img'); - это, в основном, определение изображения в конце, и я до сих пор не связываю его правильно. Я пытался создать функцию указателя, похожую на C ++, поскольку к этому я привык, но я пытался вызвать только вызов функции. И сфера - это то, с чем я экспериментировал. В настоящее время я просто предупреждаю об изменении размера текстуры, что, по-моему, является основной причиной, по которой я задаю этот вопрос. Мне нужны Canvas.setHeight и setWidth, чтобы можно было протолкнуть достаточно большую текстуру на выход, где она настроена под видом var data, который затем устанавливается через var img.

Я пробовал другой способ определения функции прохода рендеринга, который, казалось, отличался от простого использования return img внутри getTrueImageScope(), но у меня не было никакого успеха.

Вот как я пытаюсь вызвать его через мою функцию рендеринга. 

v = getTrueImageScope();

function render(img) {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  canvas.setHeight(812);
  canvas.setWidth(812);
  canvas.renderAll();
  canvas.calcOffset();
  //render(v);
  getTrueImageScope();
  img.minFilter = THREE.LinearFilter;        //Meant to call my texture, which exists within the FabricJS-rendered canvas inside of a new fabric.Image(img). variable which is then set to ThreeJS's minFilter in order to not constrain high quality images. Possibly needs to be called outside of its own scope.
  //return v;
}

function getTrueImageScope() {
  return img;
}

Вы можете увидеть полный рабочий код здесь. https://github.com/kerry-sandhu/WebGL2-Product-Customizer/blob/master/imageUpdate102v2.html

Таким образом, настоящая цель этого состоит в том, чтобы установить вызов, который существует внутри render (), который является функцией Three.js, чтобы захватить то, что существует внутри визуализированного FabricJS холста внутри нового fabric.Image ( img) переменная, которая затем устанавливается на minFilter ThreeJS, чтобы не ограничивать изображения высокого качества. Он существует внутри модального режима, который я настроил для вызова в первую очередь в пользовательской оболочке Fabricjs, и настроен для управления изображением, а затем для сохранения точной копии этого изображения и точного пространства для сохранения разрешения.

Тэг canvas на самом деле настроен на то, чтобы сделать изображение настолько большим, насколько я могу, не будучи ограниченным в текстурном пространстве, не делая окно Fabricjs слишком большим внутри модального окна. Тем не менее, если я включу его, он все равно повлияет на пространство экрана даже внутри его пользовательского макета div. Пожалуйста, посмотрите полный код Github об этом и просто загрузите его как простую страницу, на которой он настроен для локального запуска atm, извините, я не настроил живую страницу.

https://github.com/kerry-sandhu/WebGL2-Product-Customizer/blob/master/imageUpdate102v2.html

Фильтр Three.js должен применяться к текстуре и позволять мне использовать текстуры с более высоким разрешением. Я думаю, может быть, это меньше хлопот с реализацией SVG? Имейте в виду, что это использует canvas-to-blob и threejs r102 вместе с реализацией OBJLoader.

...