90 lines
3.1 KiB
HTML
90 lines
3.1 KiB
HTML
<!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 = {{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>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
</body>
|
|
</html> |