Trying to build a Sphere with Earth texture: How to use an HTML canvas as an image texture ?

[MordicusEtCubitus]

Dears,

First, thanks for creating this so nice jupyter widget. I've just discovered the threejs library today and I'm really impressed by its huge capabilities !

Second, I have to apologize because as I'm just starting using pythreejs and threejs my question may be a very novice one.

I've started to implement this tutorial in Jupyter to reproduce earth on a sphere: http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/

Mapping threejs code to pythreejs seems at first so easy and exiting:

from pythreejs import *
from IPython.display import display
from math import pi

geometry = SphereGeometry(
    radius=0.5,
    widthSegments=32,
    heightSegments=32)

material = MeshPhongMaterial()
earth_mesh = Mesh(geometry, material)

material.map = ImageTexture(imageUri='threejs_images/earthmap1k.jpg')
material.bumpMap = ImageTexture(imageUri='threejs_images/earthbump1k.jpg')
material.bumpScale = 0.5
material.specularMap = ImageTexture('threejs_images/earthspec1k.jpg')
material.specular = '#808080'

earth_mesh

Until this point following the tutorial and mapping to pythreejs the code was really easy.

But to create the cloud layer, I need an HTML canvas, that is done in javascript using something like

var canvasCloud  = document.createElement('canvas');

So my first question is: How can I do that with pythreejs ?

My second is: How can I configure the widget to have a bigger size, actually earth is displayed in a short window preventing to fully admire this great creation !

Thanks a lot for helping

With kind regards,

[vidartf]

You don't actually need the canvas element. The tutorial only uses that since it needs to add an alpha channel. You should be able to do this in Python by using a 4 channel numpy array and a DataTexture. It will require you to use some library to read the image files though.

[vidartf]

You could also try to use another image format than jpg, that supports an alpha channel.

[vidartf]

Closing as answered.