Transform control for control image,pos,scale,rotation

Questions
, , , , ,
7

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.

image
image784×557 55.4 KB

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