jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
934 stars 185 forks source link

Mapping earth on a sphere : how to create and use a canvas as a texture ? #348

Closed MordicusEtCubitus closed 3 years ago

MordicusEtCubitus commented 3 years ago

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

earth_threejs

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,

MordicusEtCubitus commented 3 years ago

Sorry due to a submit error/404 with github, I have duplicated the question