104 lines
2.5 KiB
HTML
104 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>RenderLab v1</title>
|
||
|
|
<style>
|
||
|
|
body { margin:0; background:white; }
|
||
|
|
canvas { display:block; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from './threejs/three.module.js';
|
||
|
|
import { GLTFLoader } from './threejs/GLTFLoader.js';
|
||
|
|
import { OrbitControls } from './threejs/OrbitControls.js';
|
||
|
|
import GUI from './threejs/lil-gui.module.min.js';
|
||
|
|
|
||
|
|
const scene = new THREE.Scene();
|
||
|
|
scene.background = new THREE.Color(0xffffff);
|
||
|
|
|
||
|
|
const camera = new THREE.PerspectiveCamera(50, innerWidth/innerHeight, 0.1, 1000);
|
||
|
|
camera.position.set(3,3,3);
|
||
|
|
|
||
|
|
const renderer = new THREE.WebGLRenderer({ antialias:true });
|
||
|
|
renderer.setSize(innerWidth, innerHeight);
|
||
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
||
|
|
document.body.appendChild(renderer.domElement);
|
||
|
|
|
||
|
|
const controls = new OrbitControls(camera, renderer.domElement);
|
||
|
|
|
||
|
|
const light = new THREE.DirectionalLight(0xffffff, 1.5);
|
||
|
|
light.position.set(5,5,5);
|
||
|
|
scene.add(light);
|
||
|
|
|
||
|
|
const ambient = new THREE.AmbientLight(0xffffff, 0.6);
|
||
|
|
scene.add(ambient);
|
||
|
|
|
||
|
|
let mesh, edgeLines;
|
||
|
|
|
||
|
|
const loader = new GLTFLoader();
|
||
|
|
loader.load('./glb/part.glb', gltf => {
|
||
|
|
|
||
|
|
mesh = gltf.scene.children[0];
|
||
|
|
|
||
|
|
mesh.material = new THREE.MeshStandardMaterial({
|
||
|
|
color: 0xdddddd,
|
||
|
|
roughness: 0.9,
|
||
|
|
metalness: 0
|
||
|
|
});
|
||
|
|
|
||
|
|
scene.add(mesh);
|
||
|
|
addEdges(30);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function addEdges(angle) {
|
||
|
|
if (!mesh) return;
|
||
|
|
if (edgeLines) scene.remove(edgeLines);
|
||
|
|
|
||
|
|
const edges = new THREE.EdgesGeometry(mesh.geometry, angle);
|
||
|
|
edgeLines = new THREE.LineSegments(
|
||
|
|
edges,
|
||
|
|
new THREE.LineBasicMaterial({ color: 0x000000 })
|
||
|
|
);
|
||
|
|
|
||
|
|
scene.add(edgeLines);
|
||
|
|
}
|
||
|
|
|
||
|
|
const params = {
|
||
|
|
wireframe: false,
|
||
|
|
edgeAngle: 30,
|
||
|
|
lightIntensity: 1.5,
|
||
|
|
savePNG: () => {
|
||
|
|
const link = document.createElement('a');
|
||
|
|
link.download = 'render.png';
|
||
|
|
link.href = renderer.domElement.toDataURL("image/png");
|
||
|
|
link.click();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const gui = new GUI();
|
||
|
|
gui.add(params, 'wireframe').onChange(v => {
|
||
|
|
if (mesh) mesh.material.wireframe = v;
|
||
|
|
});
|
||
|
|
gui.add(params, 'edgeAngle', 1, 90).onChange(v => addEdges(v));
|
||
|
|
gui.add(params, 'lightIntensity', 0, 3).onChange(v => light.intensity = v);
|
||
|
|
gui.add(params, 'savePNG');
|
||
|
|
|
||
|
|
window.addEventListener('resize', () => {
|
||
|
|
camera.aspect = innerWidth/innerHeight;
|
||
|
|
camera.updateProjectionMatrix();
|
||
|
|
renderer.setSize(innerWidth, innerHeight);
|
||
|
|
});
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
}
|
||
|
|
animate();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|