Comments (3)
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.
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.
I have used the same workaround, but I think the TextureLoaderService should support this issue, right?
from angular-three.
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)
- Support for threejs r141 HOT 4
- Error: export 'XRRigidTransform' (imported as 'XRRigidTransform') was not found in 'three' HOT 4
- [Feature] Method to remove physics body HOT 1
- [Bug?/Feature] Missing loader objects HOT 5
- [Bug] Objects not added to scene after Enter VR on Oculus Quest HOT 1
- NgtPrimitiveModule not working. "'ngt-primitve' is not a known element" HOT 5
- Angular 14 support HOT 5
- THREE.WebGLRenderer: Context Lost. HOT 1
- 6.0.0-beta HOT 5
- Missing LUT3DEffect error HOT 4
- Cannon JS problem HOT 1
- How to import an glb object with no gemotery prop in node HOT 2
- Can't access useBody internal UUID when adding constraints against instance mesh bodies HOT 2
- NgtSobaOrbitControls missing update HOT 2
- QUESTION: Porting/Wrapping different physics engine "Force Directed layout in 3D" as a new component HOT 2
- THREE.MeshStandardMaterial: 'Uniform' is not a property of this material issue HOT 1
- Cannot load two same GLTF models in component HOT 1
- Bug - Soba Text whiteSpace
- How to deal with the disappearance of gizmo after adding NgtEffectComposer effects? HOT 2
- Issue with achieving the same result as with Threejs HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-three.