78 lines
1.7 KiB
HTML
78 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>GLB Wireframe Viewer</title>
|
||
|
|
<style>
|
||
|
|
body { margin:0; background:white; }
|
||
|
|
canvas { display:block; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<script type="module">
|
||
|
|
|
||
|
|
import * as THREE from './three.module.js';
|
||
|
|
import { GLTFLoader } from './GLTFLoader.js';
|
||
|
|
import { OrbitControls } from './OrbitControls.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);
|
||
|
|
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);
|
||
|
|
|
||
|
|
let mesh, edgeLines;
|
||
|
|
|
||
|
|
const loader = new GLTFLoader();
|
||
|
|
loader.load('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 (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);
|
||
|
|
}
|
||
|
|
|
||
|
|
window.addEventListener('keydown', e => {
|
||
|
|
if (e.key === 'w') mesh.material.wireframe = !mesh.material.wireframe;
|
||
|
|
if (e.key === 'e') addEdges(25);
|
||
|
|
});
|
||
|
|
|
||
|
|
function animate() {
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
renderer.render(scene, camera);
|
||
|
|
}
|
||
|
|
animate();
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|