3D model help newbie

Questions
,
1

Hi,

Im still new to three.js and am trying go work with this for a school project I would like to use a 3d model robot ln my website that interacts with a user when something on the page is clicked. It would talk with a text to speech software. Im just not sure where to find learning resources that would help me get the robot onto the webpage and then animate some movement. I figured I could do this with three.js but im only assuming because of the loaders.

Id like to get his arms moving when he talks or have him walk across the screen nothing to fancy. Again this js working with a normal website. He is kind of a mascot leading people around our site. Any suggestions?

2

I suggest you create your model first in a DCC tool like Blender. This is also the place where you author the various animations of your mascot. You can then export to glTF, import the asset with GLTFLoader and then trigger the animations in your application.

A simple example that imports an animated glTF model and starts an animation is:

https://threejs.org/examples/webgl_morphtargets_horse

You can also use the three.js editor or glTF viewer to verify whether your asset is imported correctly or not.

3

These examples from the Collection of examples from discourse.threejs.org might be helpful.

https://hofk.de/main/discourse.threejs/2019/RotateModelArm/RotateModelArm.html
https://hofk.de/main/discourse.threejs/2019/RobotSimulation/RobotSimulation.html
https://hofk.de/main/discourse.threejs/2020/LoadGLTF/LoadGLTF.html
https://hofk.de/main/discourse.threejs/2019/RotateAroundPivotPoint/RotateAroundPivotPoint.html
https://hofk.de/main/threejs/modifyGeo/modifyGeo.html
and
https://hofk.de/main/discourse.threejs/2018/Xindex2018.html example 2020-08-0521.28.32

1 Like