Transform control for control image,pos,scale,rotation

Hi
Can you help me How Can I create a 3d configurator like this link for load image on 3d models and control that image by drag and drop.

1 Like

Yes. That is rendering a 2d canvas a the texture. You need to create the 2d canvas with a functionality to load an image, create the controls and then render it as a texture into the mesh. The trickier part is how to get the controls coordinate working properly as it will be projected into a 3d mesh. But it is possible.

1 Like

can you tell me more about control?
I know how to load image on 2d canvas and use as material for model
but I do not know how to add this control

You can use something like http://fabricjs.com/, and use that canvas as the texture. You won’t have the handlers on the model itself out of the box but it does allow you to freely control the image within the canvas texture.

1 Like

can you send some links sample to start

As an option: ZIM TextureActives for Interactive Textures

Thanks for the reference, @prisoner849.

Indeed, ZIM is very advanced in adding 2D interactivity to three.js textures. We call the system TextureActive where we raycast x and y into ZIM instead of pointer events. ZIM is a general canvas framework with all sorts of components, conveniences and controls and all of these can be used in three.js.

image

Here are two examples on transforming 2D on three.js meshes.

https://zimjs.com/015/textureactive_transform.html - simple
https://zimjs.com/015/textureactive_transform2.html - full

The first example has a curved plane which you could overlay on the model. The second example is more complete with changing images, etc. and is on a cylinder to represent the body. You can turn the cylinder transparent by setting the TextureActive color to faint as commented in the code then overlay the cylinder on your model.

The code for the simple case looks like this. Note the note about a raw version. If you do not want to use the ZIM Three helper module as we do in these examples, there are examples where we use raw three.js and still can use the TextureActives. See the code of the other examples. We also can install all this with NodeJS see the videos and examples on the site at https://zimjs.com/015.

import zim from "https://zimjs.org/cdn/016/zim_three"; 

new Frame(FIT, 1024, 768, darker, darker, ready);
function ready() {
    
   	// ~~~~~~~~~~~~~~~~~~~~~~~
    // ZIM

	// also see https://zimjs.com/015/ for a list of TextureActive examples
	// in the examples there are more links including links to raw examples 
	// raw examples are ones that use three.js without  the ZIM Three module

	// TEXTUREACTIVE
	// https://zimjs.com/docs.html?item=TextureActive
	
    const panel = new TextureActive({
        width:W,
        height:H,
        color:light,
        corner:20
    }).addTo();

	// pressing the T key will toggle between the 3D and 2D mode
	// usually we would use this during production then turn it off
	// Here we add a logo that will also toggle when pressed	
	TextureActive.makeLogo("light", true).loc(50,50,panel).tap(()=>{
        textureActives.manager.toggle();
    });

    new Circle(100, purple)
        .center(panel)
        .transform({
			handleSize:20,
			container:panel
		});    



    // ~~~~~~~~~~~~~~~~~~~~~~~
    // THREEJS
   
    const three = new Three({
        width:window.innerWidth, 
        height:window.innerHeight, 
        cameraPosition:new THREE.Vector3(0,0,500),
        textureActive:true
    });

    const renderer = three.renderer;
    const scene = three.scene;
    const camera = three.camera;
    const canvas = three.canvas;
    const controls = new OrbitControls(camera, canvas);

    // TEXTUREACTIVES
	// https://zimjs.com/docs.html?item=TextureActives

    const textureActives = new TextureActives(panel, THREE, three, renderer, scene, camera, controls);

    // if the object is a plane then we can use the makePanel
	// could try just overlaying a curved plane on a model
    const canvasWindow = three.makePanel({
        textureActive:panel, 
        textureActives:textureActives, 
        curve:-100,
        doubleSide:true
    })
    scene.add(canvasWindow);  
	
              
}

USING A MODEL TEXTURE
You could also try using a second body model that is the same as your body model but then make the texture of the second model material be a new THREE.CanvasTexture(logo.canvas). It would be interesting to see how the interactive canvas texture works on your model.

For more information about TextureActive, please go to the ZIM TextureActives for Interactive Textures Resource Page or ZIM TextureActives for VR for TextureActive in VR.

Any questions, perhaps ask them over on our Resource Pages and you are welcome to join us on the ZIM Discourse Forum as well. Cheers.

3 Likes