Search code examples
three.jsgoogle-colaboratory

Three.js texturing from image in google colab not working as expected

I am trying to use the TensorflowGraphics implementation of Three.js in google colab to apply an image to a mesh, but while it can handle modifying the color when I try to load an image it does not work and I'm not sure what is going wrong.

Here is the code:

context = threejs_visualization.build_context()
default_material = context.THREE.MeshPhongMaterial.new_object({
  'map':context.THREE.ImageUtils.loadTexture(samplesfn + "missing_tex.png")
})
default_material['vertexColors'] = context.THREE.NoColors

mesh["material"] = default_material
_ = threejs_visualization.triangular_mesh_renderer(mesh, width=100, height=100)

threejs_visualization.triangular_mesh_renderer is provided at https://github.com/tensorflow/graphics/blob/master/tensorflow_graphics/notebooks/threejs_visualization.py

I know the problem is not that the image can't be loaded properly as in the same file openCV can load it.

Any help is much appreciated.

Solution

  • I've never used this syntax, but I believe you should be able to change the material color by simply modifying the .color property instead of dealing with vertex colors:

    default_material = context.THREE.MeshPhongMaterial.new_object({
  'map':context.THREE.ImageUtils.loadTexture(samplesfn + "missing_tex.png"),
  'color': 0xff9900 // Set to orange
});

    Lights

    PhongMaterial needs to be illuminated by lights if you're going to use the map property. Materials don't usually glow by themselves, they need lights for you to see them. See here for a demo of a simple light setup

    If you want your texture to "glow" instead of reflecting light, set your texture to the emmissiveMap property, instead of map.