Renderer properties¶
[1]:
from pythreejs import *
from IPython.display import display
import ipywidgets
[2]:
# Reduce repo churn for examples with embedded state:
from pythreejs._example_helper import use_example_model_ids
use_example_model_ids()
Transparent background¶
To have the render view use a transparent background, there are three steps you need to do: 1. Ensure that the background
property of the Scene
object is set to None
. 2. Ensure that alpha=True
is passed to the constructor of the Renderer
object. This ensures that an alpha channel is used by the renderer. 3. Ensure that the clearOpacity
property of the Renderer
object is set to 0. For more details about this, see below.
[3]:
ball = Mesh(geometry=SphereGeometry(),
material=MeshLambertMaterial(color='red'))
key_light = DirectionalLight(color='white', position=[3, 5, 1], intensity=0.5)
c = PerspectiveCamera(position=[0, 5, 5], up=[0, 1, 0], children=[key_light])
scene = Scene(children=[ball, c, AmbientLight(color='#777777')], background=None)
renderer = Renderer(camera=c,
scene=scene,
alpha=True,
clearOpacity=0,
controls=[OrbitControls(controlling=c)])
display(renderer)
The use of clear color/opacity is explained in more detailed in the docs of three.js, but in short: - If autoClear
is true the renderer output is cleared on each rendered frame. - If autoClearColor
is true the background color is cleared on each frame. - When the background color is cleared, it is reset to Renderer.clearColor
, with an opacity of Renderer.clearOpacity
.
[4]:
# Let's set up some controls for the clear color/opacity:
opacity = ipywidgets.FloatSlider(min=0., max=1.)
ipywidgets.jslink((opacity, 'value'), (renderer, 'clearOpacity'))
color = ipywidgets.ColorPicker()
ipywidgets.jslink((color, 'value'), (renderer, 'clearColor'))
display(ipywidgets.HBox(children=[
ipywidgets.Label('Clear color:'), color, ipywidgets.Label('Clear opactiy:'), opacity]))
Scene background¶
If we set the background property of the scene, it will be filled in on top of whatever clear color is there, basically making the clear color ineffective.
[5]:
scene_background = ipywidgets.ColorPicker()
_background_link = None
def toggle_scene_background(change):
global _background_link
if change['new']:
_background_link = ipywidgets.jslink((scene_background, 'value'), (scene, 'background'))
else:
_background_link.close()
_background_link = None
scene.background = None
scene_background_toggle = ipywidgets.ToggleButton(False, description='Scene Color')
scene_background_toggle.observe(toggle_scene_background, 'value')
display(ipywidgets.HBox(children=[
ipywidgets.Label('Scene background color:'), scene_background, scene_background_toggle]))
[ ]: