implement basic version

2021-11-13 14:55:57 +01:00 · 2021-11-13 14:55:57 +01:00 · c914a8f5ed
commit c914a8f5ed
parent 389cc6b450
8 changed files with 306249 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+__pycache__
+venv
+.idea
+.pyc
+.coverage
--- a/README.md
+++ b/README.md
@ -2,12 +2,36 @@
 This lib is able to transform an .obj file to HTML that use three.js.
 In this way it is possible to have an interactive 3D view that can be used on the browser or into a jupyter notebook.

+* run into jupyter notebook
+```
+!pip install obj2html
+from obj2html import obj2html
+from IPython.display import display, HTML
+
+obj_path = 'model.obj'
+obj2html(obj_path, 'index.html')
+
+display(HTML('index.html'))
+```
+
 ## Features
 - [] .obj files support
- [] guide for notebook
 - [] pipy delivery
+- [] guide for notebook
+- [] edit html positions and other 3D params
+- [] load three.js as static file
 - [] .mat files support

+# Dev
+```
+python3.8 -m unittest discover
+
+
+pip install coverage
+python3.8 -m coverage run --source=src -m unittest discover
+python3.8 -m coverage report -m
+```
+
 # References
 In this chapter I add at least a link for each of the knowledge needed for develop this project.
 * python
--- a/setup.py
+++ b/setup.py
--- a/src/init.py
+++ b/src/init.py
--- a/src/obj2html.py
+++ b/src/obj2html.py
@ -0,0 +1,110 @@
+import json
+
+html1 = """
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+
+    <script type="module">
+var obj_3d = """
+
+html2 = """
+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 = 45;
+  const aspect = 2;  // the canvas default
+  const near = 0.1;
+  const far = 100;
+  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+  camera.position.set(0, 10, 20);
+
+  const controls = new OrbitControls(camera, canvas);
+  controls.target.set(0, 5, 0);
+  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 = 0xFFFFFF;
+    const intensity = 1;
+    const light = new THREE.DirectionalLight(color, intensity);
+    light.position.set(0, 10, 0);
+    light.target.position.set(-5, 0, 0);
+    scene.add(light);
+    scene.add(light.target);
+  }
+
+  {
+    const objLoader = new OBJLoader();
+    const mesh = objLoader.parse(obj_3d['obj']);
+    mesh.scale.set(30, 30, 30);
+    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>
+  </head>
+  <body>
+    <canvas id="c"></canvas>
+  </body>
+</html>
+
+"""
+
+def obj2html(obj_path, output_html_path=None):
+    with  open(obj_path, "r") as f:
+        content = f.readlines()
+    content = '\n'.join(content)
+    js_cont = {'obj': content}
+    js_string = json.dumps(js_cont)
+    html_string = html1+js_string+html2
+    if output_html_path != None:
+        with  open(output_html_path, "w") as f:
+            f.write(html_string)
+    else:
+        return html_string
--- a/test/init.py
+++ b/test/init.py
--- a/test/assets/model.obj
+++ b/test/assets/model.obj
--- a/test/test_obj2html.py
+++ b/test/test_obj2html.py
@ -0,0 +1,27 @@
+import unittest
+from src.obj2html import obj2html
+import os
+
+class TestObj2Html(unittest.TestCase):
+    def setUp(self):
+        self.model_assets_path = 'test/assets/model.obj'
+
+    def test_obj2html_without_output_file_path(self):
+        string_out = obj2html(self.model_assets_path)
+
+        self.assertTrue(isinstance(string_out, str))
+
+    def test_obj2html_write_html_file(self):
+        html_path = '/tmp/index.html'
+        if os.path.isfile(html_path):
+            os.remove(html_path) 
+
+        self.assertFalse(os.path.isfile(html_path))
+        
+        obj2html(self.model_assets_path, html_path)
+
+        self.assertTrue(os.path.isfile(html_path))
+        os.remove(html_path) 
+
+if __name__ == '__main__':
+    unittest.main()