custom: move camera via slider

custom_test.py

@@ -10,4 +10,5 @@ label = ui.label()
 
 ui.joystick(on_move=lambda e: print("move", e.vector))
 
-ui.three(on_click=lambda e: print("click", e))
+three = ui.three(on_click=lambda e: print("click", e))
+ui.slider(min=0, max=10, on_change=lambda e: three.move_camera(e.value))

nicegui/elements/three.py

@@ -9,7 +9,7 @@ class ThreeView(jp.JustpyBaseComponent):
 
         self.pages = {}
         self.classes = ''
-        self.options = jp.Dict()
+        self.options = jp.Dict(camera_z=4)
 
         self.on_click = on_click
 
@@ -43,3 +43,7 @@ class Three(Element):
     def __init__(self, *, on_click):
 
         super().__init__(ThreeView(on_click))
+
+    def move_camera(self, z):
+
+        self.view.options.camera_z = z

nicegui/static/components/three.js

@@ -1,3 +1,5 @@
+var camera;
+
 Vue.component("three", {
   template: `<canvas v-bind:id="jp_props.id"></div>`,
   mounted() {
@@ -6,8 +8,8 @@ Vue.component("three", {
     const width = 400;
     const height = 300;
 
-    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-    camera.position.z = 4;
+    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+    camera.position.z = this.$props.jp_props.options.camera_z;
 
     const renderer = new THREE.WebGLRenderer({
       antialias: true,
@@ -29,6 +31,9 @@ Vue.component("three", {
     };
     render();
   },
+  updated() {
+    camera.position.z = this.$props.jp_props.options.camera_z;
+  },
   props: {
     jp_props: Object,
   },