html template
This commit is contained in:
nicolalandro
parent
32d6d5c872
commit
b07c5152bb
1
.gitignore
vendored
1
.gitignore
vendored
@ -9,3 +9,4 @@ __pycache__
|
||||
MANIFEST
|
||||
dist
|
||||
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
|
||||
* 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
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,110 +1,25 @@
|
||||
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:
|
||||
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
|
||||
with open(obj_path, "r") as f:
|
||||
content = f.readlines()
|
||||
content = '\n'.join(content)
|
||||
js_cont = {'obj': content}
|
||||
js_string = json.dumps(js_cont)
|
||||
|
||||
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')
|
||||
Loading…
Reference in New Issue
Block a user