godber/obj2html
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

html template

Browse Source
This commit is contained in:
nicolalandro 2021-11-14 09:12:37 +01:00
parent 32d6d5c872
commit b07c5152bb
5 changed files with 115 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -9,3 +9,4 @@ __pycache__
MANIFEST
dist
build
tmp.html

1
README.md
View File

@ -66,3 +66,4 @@ In this chapter I add at least a link for each of the knowledge needed for devel
* coverage
* gitlab ci/cd
* three.js
* [pymustache](https://github.com/lotabout/pymustache): for using html template, but in the end I use replace with similar sintax

90
obj2html/index.html Normal file
View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<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 = 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>

105
obj2html/obj2html.py
View File

@ -1,100 +1,8 @@
import os
import json
html1 = """
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
TEMPLATE_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'index.html')
<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:
@ -102,9 +10,16 @@ def obj2html(obj_path, output_html_path=None):
content = '\n'.join(content)
js_cont = {'obj': content}
js_string = json.dumps(js_cont)
html_string = html1+js_string+html2
with open(TEMPLATE_PATH, "r") as f:
html_template = f.read()
html_string = html_template.replace("{{obj_3d}}", js_string)
if output_html_path != None:
with open(output_html_path, "w") as f:
f.write(html_string)
else:
return html_string
if __name__ == '__main__':
obj2html('test/assets/model.obj', 'tmp.html')

3
setup.py
View File

@ -45,4 +45,7 @@ setup(
author_email = 'nicolaxx94@live.it',
url = 'https://gitlab.com/nicolalandro/obj2html',
keywords = ['3D', '.obj', '.html', 'jupyter', '3D viewer'],
project_urls={
'Source': 'https://gitlab.com/nicolalandro/obj2html',
},
)