streamlit support

README.md

@@ -32,6 +32,8 @@ display(HTML('index.html'))
 - [x] guide for notebook
 - [x] pypi doc add image
 - [x] edit html positions and other 3D params
+- [x] add param for streamlit
+- [ ] document param for streamlit
 - [ ] dist wheel
 - [ ] load three.js as static file
 - [ ] .mat files support

obj2html/elements.html

@@ -0,0 +1,79 @@
+<canvas id="c"></canvas>
+<script type="module">
+  var obj_3d = {{obj_3d}};
+        import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/build/three.module.js';
+        import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/controls/OrbitControls.js';
+        import {OBJLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r132/examples/jsm/loaders/OBJLoader.js';
+
+        function main() {
+        const canvas = document.querySelector('#c');
+        const renderer = new THREE.WebGLRenderer({canvas});
+
+        const fov = {{camera.fov}};
+        const aspect = {{camera.aspect}};  // the canvas default
+        const near = {{camera.near}};
+        const far = {{camera.far}};
+        const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+        camera.position.set({{camera.pos_x}}, {{camera.pos_y}}, {{camera.pos_z}});
+
+        const controls = new OrbitControls(camera, canvas);
+        controls.target.set({{camera.orbit_x}}, {{camera.orbit_y}}, {{camera.orbit_z}});
+        controls.update();
+
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color('black');
+
+        {
+            const skyColor = 0xB1E1FF;  // light blue
+            const groundColor = 0xB97A20;  // brownish orange
+            const intensity = 1;
+            const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
+            scene.add(light);
+        }
+
+        {
+            const color = {{light.color}};
+            const intensity = {{light.intensity}};
+            const light = new THREE.DirectionalLight(color, intensity);
+            light.position.set({{light.pos_x}}, {{light.pos_y}}, {{light.pos_z}});
+            light.target.position.set({{light.target_x}}, {{light.target_y}}, {{light.target_z}});
+            scene.add(light);
+            scene.add(light.target);
+        }
+
+        {
+            const objLoader = new OBJLoader();
+            const mesh = objLoader.parse(obj_3d['obj']);
+            mesh.scale.set({{obj_options.scale_x}}, {{obj_options.scale_y}}, {{obj_options.scale_z}});
+            scene.add(mesh);
+        }
+
+        function resizeRendererToDisplaySize(renderer) {
+            const canvas = renderer.domElement;
+            const width = canvas.clientWidth;
+            const height = canvas.clientHeight;
+            const needResize = canvas.width !== width || canvas.height !== height;
+            if (needResize) {
+            renderer.setSize(width, height, false);
+            }
+            return needResize;
+        }
+
+        function render() {
+
+            if (resizeRendererToDisplaySize(renderer)) {
+            const canvas = renderer.domElement;
+            camera.aspect = canvas.clientWidth / canvas.clientHeight;
+            camera.updateProjectionMatrix();
+            }
+
+            renderer.render(scene, camera);
+
+            requestAnimationFrame(render);
+        }
+
+        requestAnimationFrame(render);
+        }
+
+        main();
+</script>

obj2html/obj2html.py

@@ -4,13 +4,15 @@ import re
 import copy
 
 TEMPLATE_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'index.html')
+TEMPLATE_ELEMENTS_ONLYT_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'elements.html')
+
 
 def simple_mustache(input_string, value_dict):
   output_string = copy.deepcopy(input_string)
   mustache_variables = re.findall(r"{{.*?}}",output_string)
 
   for v_text in mustache_variables:
-    v_name = v_text[2:-2]
+    v_name = v_text[2:-2].strip()
     if '.' in v_name:
       dict_name, dict_subname = v_name.split(".")
       v = value_dict[dict_name][dict_subname]
@@ -47,7 +49,8 @@ def obj2html(
       "scale_x": 30,
       "scale_y": 30,
       "scale_z": 30,
-    }
+    },
+    html_elements_only=False
   ):
   with  open(obj_path, "r") as f:
     content = f.readlines()
@@ -55,7 +58,10 @@ def obj2html(
   js_cont = {'obj': content}
   js_string = json.dumps(js_cont)
 
-  with  open(TEMPLATE_PATH, "r") as f:
+  template_path = TEMPLATE_PATH
+  if html_elements_only:
+    template_path  = TEMPLATE_ELEMENTS_ONLYT_PATH
+  with  open(template_path, "r") as f:
     html_template = f.read()
 
   data_dict = {
@@ -74,4 +80,4 @@ def obj2html(
     return html_string
 
 if __name__ == '__main__':
-  obj2html('test/assets/model.obj', 'tmp.html')
+  obj2html('model.obj', 'tmp.html', html_elements_only=True)

setup.py

@@ -7,7 +7,7 @@ with open(os.path.join(os.path.dirname(os.path.abspath(__file__)), 'pipy_readme.
 setup(
   name = 'obj2html',
   packages = ['obj2html'],
-  version = '0.12',
+  version = '0.13',
   license='MIT',
   description = 'Create an html with three.js that contains the given .obj file.',
   long_description = long_des,