I want to click the button to switch the material to rotate the model to the position of the material, but I have no idea and don't know how to start

I hope everyone can give me some ideas,thank you.

I can get mesh information. but I don’t know how can I use.

Hi @haoguang_shen

It would really help if you were able to create a simple playground example so people can understand your problem and provide tangible code solutions.

To change a material, you can just use myCustomMesh.material = myCustomMaterial; but possibly I’m not understanding what you’re asking for.

If you’re using an HTML user interface, you’d need to add a click event listener to your element that calls a function to swap the material of your shoes.

You may not understand what I mean, so please watch the video
A model will have many parts, I want to click a button, the camera can rotate to this part, user can face this part .
and you can clone my project

It looks like you’re already achieving what you asked in your question - the model is rotating and the material changing.

So I don’t know what the problem is you’re trying to solve.

This video is not my project, I just imitated his project and wanted to achieve such an effect,

this is my project GitHub - shenhaoguangDayDayUp/3d

I mainly don’t have any ideas now, I don’t know how to start

I want to click the button to switch …

If you are using Babylon.js GUI for button then The Babylon GUI | Babylon.js Documentation

If HTML GUI for button then Element: click event - Web APIs | MDN or with JavaScript MouseEvent.button - Web APIs | MDN

Simply put, I clicked a button, I can get the data of the model, and I want to use this data to let the camera point at a certain part of the model.
How to aim the camera at this mesh according to the data of the mesh.

I don’t know if I made it clear?

Please give me an idea, let me realize it.

Not entirely clear, what type of camera, what part of the model.

Please produce a simplified playground using a box or a sphere as your model and a camera of a type that you are using.

Show what is the certain part of the mesh you want the camera to point to.

Similar to this effect, just click on the model, replaced by a click button, and click the button to make the camera rotate.

this is model: https://api.nike.com/customization/model_assets/v1/3f885af9-549b-423a-8b66-ff203eb9c839/1607623565723/model.gltf

https://playground.babylonjs.com/#TZTHV1#10

Sorry but

is a specific question that need a little clarity such as what type of camera and what part of the mesh.

is a different less specific question.

oK , camera is ArcRotateCamera ,

This is the name of the mesh corresponding to the mesh on the picture
let meshList = [
{ name: “rt_base_vamp”, title: “mesh2” },
{ name: “rt_swoosh”, title: “mesh3” },
{ name: “rt_laces”, title: “mesh1” },
{ name: “rt_base_collar”, title: “mesh4” }
];

Somethins like this https://www.babylonjs-playground.com/#3U658N#32

Is this your question?

I have a model made up of several components. When I choose a component on a button click I would like the arcRotateCamera to orbit that component. How do I do this?

yes!!

Use camera.target

3 Likes

To expand a little, you probably want to store the correct position and target position of the camera (both Vector3s) for each part of the product. When the user switches to a different part of the product, you can just transition the camera to that position and target using animations.

1 Like

thank you,I already achieving by your way. thank you for your patience . :grinning: 3D展示

2 Likes

Yes, I did it in this way, this is a demo,3D展示

2 Likes