Hi everyone,
I am currently working on a project where I need to animate a smartwatch screen change and the rotation of the crown using Three.js.
I want to animate the screen changing from one interface to another while crown is rotating. My question: how should I approach the problem. Thanks.
Are the screens interactive or just flat textures?
Just flat textures. Is it possible to achieve this?
This is simple and, I believe, uses the same base you need for your project: Codepen Example
You can use Texture.offset.y, depending on the transition you’re looking for. For something fancier and smoother, you can also use simple shaders.
I tried it with html but it didn’t look realistic
Ross, I don’t know how you divided the mesh, but you can use GSAP to control mesh position and material opacity. Focus on understand how to handle the meshs and material with gsap.to or gsap.fromTo and gsap timeline.
For screens like that… I sometimes create a separate renderTarget, then you can render whatever 2d/3d stuff into it you want.
You can also use THREE.CanvasTexture() and use canvas drawing commands to draw into that canvas…
Here’s an example of using a renderTarget, (and the second scene being rendered to the rendertarget)
