How I can cover all around the cup with texture

Questions
1

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.

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;

I want something like that

cup
cup600×600 19.9 KB

2

Welcome aboard!

You need to create the uv map from your DCC tool (Blender for eg).

See:

3

Wait, I got to make change on a cup or in the texture ? .

obs: I’m new and I dont know anything about blender.

4

You must make change in the cup, to add correct uv coordinates to it. There are other tools than Blender to edit 3D objects but I’m no artist, I can’t help in this matter.

5

May be start by forgetting about react for a sec and simply import your mesh in a BJS playground. It will become clearer eventually. The imported object (mesh & submeshes) will eventually display the front or the back of a texture applied to it. This texture will eventually show as it has been distorted and/or rotated and/or scaled. The results you get there is from the setting of your UVs on the object (not texture, except of course if you twist the UVs of the texture). For a better understanding of how this works, I’d rather advise you not to do that on your texture, at least for a start. Use a simple texture with unscaled or modified UVs and project this texture on your object/mesh. Now, you can see how your texture might behave differently on each facet ( or mesh or submesh) on your model. What you see is the result from setting UVs (again on the model/mesh/submesh).
At the very first, you will want to make sure that all ‘normals’ (also used for UVs) are set correctly (basically that front is facing front and back is facing back). Once you have a clear understanding of how this works, you can start to look at how to change UVs on your model (when i.e. merging it or doing other operations that will affect the way your UVs are defined.
Next, speaking about projecting a texture on something like a cylinder or a tube, will also require you to somehow account the shape of the object depending on the projection mode used to display your texture on this object. Finally, there are a number of ways (also in BJS) to account, ignore or rewrite the UVs and projection mode. You would eventually do so if you wanted i.e. to overwrite the material used in your imported mesh with a new material (i.e. created in BJS). Hope this helps at least a little and have fun playing with UVs :smiley:

2 Likes