Git Product home page Git Product logo

Comments (3)

IRobot1 avatar IRobot1 commented on June 27, 2024 1

I have a simple component that loads a texture into a plane.

import { NgtLoader, NgtVector3 } from "@angular-three/core";
import { Input } from "@angular/core";
import { Component } from "@angular/core";
import { DoubleSide, FrontSide,  MeshBasicMaterialParameters, Texture, TextureLoader } from "three";


@Component({
  selector: 'simple-texture',
  template: `
<ngt-mesh [name]="name" [position]="position" [scale]="scale">
  <ngt-plane-geometry></ngt-plane-geometry>
  <ngt-mesh-basic-material [parameters]="parameters"></ngt-mesh-basic-material>
  <ngt-arrow-helper></ngt-arrow-helper>
</ngt-mesh>`
})
export class SimpleTextureComponent {
  @Input() name = 'simple-texture'
  @Input() position = [0, 0, 0] as NgtVector3;
  @Input() scale = [1, 1, 1] as NgtVector3;
  @Input() color = 'white';
  @Input() doublesided = false;

  @Input() set url(newvalue: string) {
    const s = this.loader.use(TextureLoader, newvalue).subscribe(next => {
      next.flipY = false;
      this.texture = next;
    },
      () => { },
      () => { s.unsubscribe(); }
    );
  }

  texture!: Texture;

  get parameters(): MeshBasicMaterialParameters {
    const p: MeshBasicMaterialParameters = {
      color: this.color,
      side: this.doublesided ? DoubleSide : FrontSide
    }
    // to avoid THREE warning if map is undefined
    if (this.texture) {
      p.map = this.texture;
    }
    return p;
  }

  constructor(private loader: NgtLoader) { }
}

This results in an image that is up-side down. When flipY is true (default), the image looks correct.

image

Here's the code to render the picture frame

  <ngt-canvas [camera]="{ position: [0, 0, 2], fov: 45 }"
              [scene]="{ background: 'lightblue' | color }">
    <ngt-ambient-light></ngt-ambient-light>

    <!--picture frame-->
    <simple-texture [position]="[0, 0.5, -1]" [scale]="[1.28*2.1, 2.1,2]" [doublesided]="true" [color]="'black'" ></simple-texture>
    <simple-texture [position]="[0, 0.5, -0.99]" [scale]="[1.28*2,2,2]" [url]="'assets/Canestra_di_frutta.jpg'" ></simple-texture>

    <ngt-soba-orbit-controls></ngt-soba-orbit-controls>
  </ngt-canvas>

from angular-three.

manhnd98 avatar manhnd98 commented on June 27, 2024

I have used the same workaround, but I think the TextureLoaderService should support this issue, right?

from angular-three.

IRobot1 avatar IRobot1 commented on June 27, 2024

flipY is true by default and results in an image that looks good. I think that's the right default.

from angular-three.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.