Texture material issue

Questions
,
1

Greetings! I am a totally newbie at Three.js and 3D modeling.
I have a sample model (high poly mesh)

image
image633Ă—616 25.7 KB

And I would like to give some texture to make the model look like this.
image

I painted a rough texture and exported it in blender.

Image_0
Image_02048Ă—2048 82.9 KB

And this is the code snippet.

image
image703Ă—252 15.8 KB

But I am getting this.

image
image635Ă—614 27.6 KB

Is this because it is not a uv-unwrapped model?
In this case, how can I uv-unwrap this high poly mesh model?

I will really appreciate your help.

2

I think it’s already unwrapped, since you were able to paint it in blender.

You don’t need to export the model and texture separately.

If you use the Standard BSDF material in blender, the GLTF exporter will export the textures embedded in the gltf (.glb) file along with the mesh…

then all you need to do is

loader.load( url , (gltf)=>{
scene.add(gltf.scene)
})

3

Thank you so much, @manthrax
I will try that way.
Btw, this is the off-topic, do you have any idea how I can make those eyes move with (look at) the mouse cursor?

1 Like
4

If they are spheres… and separated into separate mesh objects in Blender, you can give each eye a name like “eyeLeft” and “eyeRight” …

then when you load the glb in threejs, you can do
let leftEye = gltf.scene.getObjectByName( “leftEye”)
let rightEye = gltf.scene.getObjectByName( “rightEye”)

then in your render loop… you can look at mouse position and set the right and leftEye.rotation.x, .rotation.y to some angle in radians… like -1 to +1 range approximately.

to make the eyes swivel around their center point.

…

another approach might be to give the eyes their own texture… and then scroll the texture using texture.offset to move the pupil around…

1 Like