html template
This commit is contained in:
nicolalandro
parent
32d6d5c872
commit
b07c5152bb
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,3 +9,4 @@ __pycache__
|
|||||||
MANIFEST
|
MANIFEST
|
||||||
dist
|
dist
|
||||||
build
|
build
|
||||||
|
tmp.html
|
||||||
@ -66,3 +66,4 @@ In this chapter I add at least a link for each of the knowledge needed for devel
|
|||||||
* coverage
|
* coverage
|
||||||
* gitlab ci/cd
|
* gitlab ci/cd
|
||||||
* three.js
|
* 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
90
obj2html/index.html
Normal 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>
|
||||||
@ -1,100 +1,8 @@
|
|||||||
|
import os
|
||||||
import json
|
import json
|
||||||
|
|
||||||
html1 = """
|
TEMPLATE_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'index.html')
|
||||||
<!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):
|
def obj2html(obj_path, output_html_path=None):
|
||||||
with open(obj_path, "r") as f:
|
with open(obj_path, "r") as f:
|
||||||
@ -102,9 +10,16 @@ def obj2html(obj_path, output_html_path=None):
|
|||||||
content = '\n'.join(content)
|
content = '\n'.join(content)
|
||||||
js_cont = {'obj': content}
|
js_cont = {'obj': content}
|
||||||
js_string = json.dumps(js_cont)
|
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:
|
if output_html_path != None:
|
||||||
with open(output_html_path, "w") as f:
|
with open(output_html_path, "w") as f:
|
||||||
f.write(html_string)
|
f.write(html_string)
|
||||||
else:
|
else:
|
||||||
return html_string
|
return html_string
|
||||||
|
|
||||||
|
if __name__ == '__main__':
|
||||||
|
obj2html('test/assets/model.obj', 'tmp.html')
|
||||||
3
setup.py
3
setup.py
@ -45,4 +45,7 @@ setup(
|
|||||||
author_email = 'nicolaxx94@live.it',
|
author_email = 'nicolaxx94@live.it',
|
||||||
url = 'https://gitlab.com/nicolalandro/obj2html',
|
url = 'https://gitlab.com/nicolalandro/obj2html',
|
||||||
keywords = ['3D', '.obj', '.html', 'jupyter', '3D viewer'],
|
keywords = ['3D', '.obj', '.html', 'jupyter', '3D viewer'],
|
||||||
|
project_urls={
|
||||||
|
'Source': 'https://gitlab.com/nicolalandro/obj2html',
|
||||||
|
},
|
||||||
)
|
)
|
||||||
Loading…
Reference in New Issue
Block a user