Search the Community

Hello everyone ! I'm learning babylonjs with reactjs and I stuck in some trouble. I want to texture not to repeat and just cover the cup. I see some people talk about the uv and I want to know more specific how to do that. The code import React, { useEffect, Suspense } from "react"; import * as BABYLON from "babylonjs"; import "babylonjs-loaders"; type SceneEventArgs = { engine: BABYLON.Engine; scene: BABYLON.Scene; canvas: HTMLCanvasElement; }; type SceneProps = { engineOptions?: BABYLON.EngineOptions; adaptToDeviceRatio?: boolean; onSceneMount?: (args: SceneEventArgs) => void; width?: number; height?: number; }; const Scene: React.FC<SceneProps & React.HTMLAttributes<HTMLCanvasElement>> = ( props ) => { var scene: BABYLON.Scene; var engine: BABYLON.Engine; var canvas: HTMLCanvasElement; const onResizeWindow = () => { if (engine) { engine.resize(); } }; useEffect(() => { engine = new BABYLON.Engine( canvas, true, props.engineOptions, props.adaptToDeviceRatio ); let sceneD = new BABYLON.Scene(engine); scene = sceneD; // scene.clearColor = new BABYLON.Color3.Black; BABYLON.SceneLoader.ImportMesh( "", "./", "chavena.glb", scene, function (meshes) { scene.createDefaultCameraOrLight(true, true, true); scene.createDefaultEnvironment(); const myTexture = new BABYLON.Texture( "./texture1.jpg", scene ); myTexture.uScale = -0.5; myTexture.vScale = 0.2; const materialForCup = new BABYLON.StandardMaterial("city", scene); materialForCup.diffuseTexture = myTexture; myTexture.wAng = -Math.PI / 6; meshes[1].material = materialForCup; } ); if (typeof props.onSceneMount === "function") { props.onSceneMount({ scene: sceneD, engine: engine, canvas: canvas, }); } else { console.error("onSceneMount function not available"); } // Resize the babylon engine when the window is resized window.addEventListener("resize", onResizeWindow); return () => { window.removeEventListener("resize", onResizeWindow); }; }, []); const onCanvasLoaded = (c: HTMLCanvasElement) => { if (c !== null) { canvas = c; } }; // 'rest' can contain additional properties that you can flow through to canvas: // (id, className, etc.) let { width, height, ...rest } = props; let opts: any = {}; if (width !== undefined && height !== undefined) { opts.width = width; opts.height = height; } return ( <canvas style={{ width: "100%", height: "100vh" }} {...opts} ref={onCanvasLoaded} /> ); }; export default Scene; That's my result now ! That's that I want to get Thanks in advance !

Hi all, I am new here and new with BJS so I might ask for something obvious. Though, I looked well in the resources, how-tos and was digging pretty deeply into BJS codebase and couldn't find any answer. Also, in case of lack of satisfying answers, I'll also post my own solution to my problem (a hack). I want to load a 3D texture of a brain (MRI) and display it on 3 orthogonal planes, then i can move my plane-set around, and even spin it to display oblique slices. On my GLSL code, i need to load my 3D texture as a sampler3D and lookup for some world coordinates to feed gl_FragColor with the colors (actually LUMINANCE) from the texture (Look at the screenshot). And it works, but with a hack, because I could not find how to build a raw 3D texture object because the `RawTexture` class, even though it inherits `Texture`, will only call `engine.createRawTexture()` and never `engine.createRawTexture3D()`. At first, I thought I would just create my texture 3D object calling directly `engine.createRawTexture3D()` but this doesn't create an instance of the prototype/class `Texture`, only an `InternalTexture`, so when the texture validation time comes, calling methods like `myTexture.isReady()` would fail because `isReady()` (as well as other methods) are part of the `Texture` prototype/class. What is missing here is the 3D counterpart of `RawTexture`, so I made it myself and called it `RawTexture3D`, that I declared somewhere in my code where I have access to the BABYLON module: /* (In ES6 syntax) Here, 'data' is an Uint8Array and the rest is the usual things */ class RawTexture3D extends BABYLON.Texture { constructor(data, width, height, depth, format, scene, generateMipMaps = true, invertY = false, samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE, type = BABYLON.Engine.TEXTURETYPE_UNSIGNED_INT) { super(null, scene, !generateMipMaps, invertY); this._texture = scene.getEngine().createRawTexture3D( data, width, height, depth, format, generateMipMaps, invertY, samplingMode ) this.is3D = true; } } This works well but it would be much better if it was part of the core, especially for maintenance. Say tomorrow `Texture.is3D` gets renamed into `Texture._is3D`, I would probably find out the hard way... If you have another solution to this hack, please share! We are not a lot having to work with 3D textures, so let's help each other! If you were looking for a hack, then this one is yours, and if you are one of the core dev of BabylonJS, then, could you add that to the core, pleeeeaaase? (or maybe i will do a PR at some point but I am not super familiar with TS) And also, thanks for this awesome lib! (I've started to use it yesterday so I don't even fully realize how awesome it is) Cheers.