custom: start to implement 3d element

custom_test.py

@@ -9,3 +9,5 @@ ui.button('Add 100', on_click=lambda: custom.add(100))
 label = ui.label()
 
 ui.joystick(on_move=lambda e: print("move", e.vector))
+
+ui.three(on_click=lambda e: print("click", e))

nicegui/elements/three.py

@@ -0,0 +1,45 @@
+import justpy as jp
+from .element import Element
+
+class ThreeView(jp.JustpyBaseComponent):
+
+    vue_type = 'three'
+
+    def __init__(self, on_click):
+
+        self.pages = {}
+        self.classes = ''
+        self.options = jp.Dict()
+
+        self.on_click = on_click
+
+        super().__init__()
+        self.allowed_events = ['onClick']
+        self.initialize(temp=False, onClick=self.handle_click)
+
+    def add_to_page(self, wp: jp.WebPage):
+
+        wp.add_component(self)
+
+    def react(self, _):
+
+        pass
+
+    def convert_object_to_dict(self):
+
+        return {
+            'vue_type': self.vue_type,
+            'id': self.id,
+            'show': True,
+            'options': self.options,
+        }
+
+    def handle_click(self, msg):
+
+        self.on_click(msg.data)
+
+class Three(Element):
+
+    def __init__(self, *, on_click):
+
+        super().__init__(ThreeView(on_click))

nicegui/static/components/three.js

@@ -0,0 +1,35 @@
+Vue.component("three", {
+  template: `<canvas v-bind:id="jp_props.id"></div>`,
+  mounted() {
+    const scene = new THREE.Scene();
+
+    const width = 400;
+    const height = 300;
+
+    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
+    camera.position.z = 4;
+
+    const renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      canvas: document.getElementById(this.$props.jp_props.id),
+    });
+    renderer.setClearColor("#ddd");
+    renderer.setSize(width, height);
+
+    const geometry = new THREE.BoxGeometry(1, 1, 1);
+    const material = new THREE.MeshBasicMaterial({ color: "#433F81" });
+    const cube = new THREE.Mesh(geometry, material);
+    scene.add(cube);
+
+    new THREE.OrbitControls(camera, renderer.domElement);
+
+    const render = function () {
+      requestAnimationFrame(render);
+      renderer.render(scene, camera);
+    };
+    render();
+  },
+  props: {
+    jp_props: Object,
+  },
+});

nicegui/static/templates/quasar.html

@@ -68,6 +68,8 @@
     {% endif %}
 
     <script src="https://cdn.jsdelivr.net/npm/nipplejs@0.9.0/dist/nipplejs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.129.0/build/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.129.0/examples/js/controls/OrbitControls.js"></script>
 
 </head>
 

nicegui/ui.py

@@ -5,6 +5,7 @@ class Ui:
     from .elements.custom import Custom as custom
     from .elements.icon import Icon as icon
     from .elements.input import Input as input
+    from .elements.joystick import Joystick as joystick
     from .elements.label import Label as label
     from .elements.html import Html as html
     from .elements.markdown import Markdown as markdown
@@ -14,8 +15,8 @@ class Ui:
     from .elements.select import Select as select
     from .elements.slider import Slider as slider
     from .elements.switch import Switch as switch
+    from .elements.three import Three as three
     from .elements.toggle import Toggle as toggle
-    from .elements.joystick import Joystick as joystick
 
     from .elements.plot import Plot as plot
     from .elements.line_plot import LinePlot as line_plot