Comments (4)
Hello,
Can you doublecheck that the transform is actually there? The transform object is only there if you are setting a texture from a spritesheet or the model you are loading is using texture transform.
console.log(mesh.material.baseColorTexture.transform)
// Add transform if it's not there
mesh.material.baseColorTexture.transform = new TextureTransform()
from pixi3d.
Hey,
Thanks, when I create transform during material setup it works.
Just in case, I'm attaching modified "standard material" example code with working scale manipulation. So I guess that transform is there.
import { Application } from "pixi.js";
import {
Model,
LightingEnvironment,
ImageBasedLighting,
CameraOrbitControl,
Color,
StandardMaterialTexture,
TextureTransform
} from "pixi3d";
import "./styles.css";
let app = new Application({
backgroundColor: 0xdddddd,
resizeTo: window,
antialias: true
});
document.body.appendChild(app.view);
app.loader.add(
"diffuse.cubemap",
"https://raw.githubusercontent.com/jnsmalm/pixi3d-examples/master/assets/chromatic/diffuse.cubemap"
);
app.loader.add(
"specular.cubemap",
"https://raw.githubusercontent.com/jnsmalm/pixi3d-examples/master/assets/chromatic/specular.cubemap"
);
app.loader.add(
"teapot.gltf",
"https://raw.githubusercontent.com/jnsmalm/pixi3d-examples/master/assets/teapot/teapot.gltf"
);
const walltexture = StandardMaterialTexture.from(
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Surfaces_bumpy_walkway_between_sidewalk_and_street_closeup_view.JPG/1280px-Surfaces_bumpy_walkway_between_sidewalk_and_street_closeup_view.JPG"
);
walltexture.transform = new TextureTransform();
walltexture.transform.offset += Math.random()*100;
// const walltexture = StandardMaterialTexture.from(
// "https://static.wikia.nocookie.net/portalworldsgame/images/a/a7/Background_Block_Icon.png"
// );
var model = new Model();
app.loader.load((_, resources) => {
// Create and add the model, it uses the standard material by default.
model = Model.from(resources["teapot.gltf"].gltf);
app.stage.addChild(model);
model.y = -0.8;
model.meshes.forEach((mesh) => {
mesh.material.unlit = false; // Set unlit = true to disable all lighting.
// mesh.material.baseColor = new Color(1, 1, 1, 1); // The base color will be blended together with base color texture (if available).
mesh.material.baseColorTexture = walltexture;
console.log(mesh.material.baseColorTexture);
mesh.material.alphaMode = "opaque"; // Set alpha mode to "blend" for transparency (base color alpha less than 1).
mesh.material.exposure = 2; // Set exposure to be able to control the brightness.
mesh.material.metallic = 0; // Set to 1 for a metallic material.
// mesh.material.roughness = 0.3; // Value between 0 and 1 which describes the roughness of the material.
});
// Create the image-based lighting (IBL) object which is used to light the model. Depending on which IBL environment is used, it will greatly affect the visual appearence of the model.
let ibl = new ImageBasedLighting(
resources["diffuse.cubemap"].cubemap,
resources["specular.cubemap"].cubemap
);
LightingEnvironment.main = new LightingEnvironment(app.renderer, ibl);
});
let control = new CameraOrbitControl(app.view);
control.angles.x = 25;
var t = 0;
app.ticker.add(() => {
model.meshes.forEach((mesh) => {
t++;
mesh.material.baseColorTexture.transform.scale.set( Math.sin(t/100), Math.sin(t/100) );
})
});
from pixi3d.
If you just load a regular jpg image it won't include a transform by default. Your code must have done something different before, because if I run your code using "transform.scale.set" it's doesn't work if I don't create the texture transform. This is working as intended :-)
from pixi3d.
Okay, looks like
mesh.material.baseColorTexture.transform = new TextureTransform()
works as expected so I close that :)
Thanks again
from pixi3d.
Related Issues (20)
- Sprite3D zIndex is not applied to internal ProjectionSprite zIndex HOT 3
- Error: Extension class must have an extension object HOT 4
- vec3/planes changes errors HOT 2
- Unlit mesh color is brighter than it should be HOT 9
- iOS 16.4 rendering issue HOT 3
- Compile errors when using @pixi/math-extras HOT 3
- 3d Model and ImageBasedLighting visibility issue HOT 5
- Render shadow on "invisible" plane. HOT 5
- Can't load GLTF with shape-keys animations HOT 6
- Textures smaller than 200x200 pixels do not render with Sprite3D HOT 15
- Memory not cleared when destroying models HOT 38
- Not an issue, just greetings! HOT 1
- Boilerplate from create-pixi3d-app fails with PixiJs 7.2.4 HOT 2
- render point clouds HOT 13
- Possible to trim CompositeSprite to make it only fit the rendered object? HOT 14
- Is there a use case for pixi v7? The following code will not work properly in v7 HOT 1
- Support of LODs and map level geometry culling HOT 2
- Crashes with "Unrecognized source type to auto-detect resource" when imported in NodeJS HOT 6
- Crashes with "Could not find dependency: '@pixi/<it varies>' relative to '/node_modules/pixi3d/dist/cjs/pixi5/pixi3d.js" HOT 4
- Support for PixiJS 8 HOT 1
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 pixi3d.