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.
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
There was a question about custom controls for moving, rotating, scaling and a garbage can. We did an example and posted it here - seems we have two threads going. Three.js + Fabric.js but with mouse and touch raycast - #61 by danzen - I also did not mean to step on anyone’s toes if this work is their job - sorry if that is the case ;-). Cheers.
1 Like
cool you invent this simple code!
2 Likes
Hello,
I’ve recently implemented a similar feature on my website and would appreciate any feedback or insights from the community. You can check out my implementation here: 3D Cloth Customizer.
Please select “Home Logo” & “Text” > “Front Logo” to see the functionality in action.
Thank you!
Feel free to modify or add anything if needed.
Please check out this code
2 Likes
this is by zim.js?
Hi Parisa Shahbazi,
I wanted to share my latest project with you. It’s an interactive 3D configurator for customizing models, where users can add, move, scale, rotate, and delete logos using Three.js. You can check it out on CodePen:
Looking forward to your thoughts and feedback!
Best regards,
Tarun Thummar
Let me know if you need any further adjustments!
3 Likes
Hello, Tarun Thummar!
Faced with the problem of adding similar functionality to the bottle model.
Could you please review the UV map of the model? I believe the issue might be related to it.
Yes, that was the problem! Thank you very much for your help!!! 
1 Like