EdgesGeometry with 3MF model
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - animation - keyframes</title>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>
<link type="text/css" rel="stylesheet" href="main.css" />
<style>
body {
background-color: #bfe3dd;
color: #000;
}
a {
color: #2983ff;
}
</style>
</head>
<body>
<div id="WebGL-output">
<style>
body{margin: 0;overflow: hidden;}
</style>
</div>
<script type="module">
// https://threejs.org/
import * as THREE from "https://threejs.org/build/three.module.js";
import Stats from "https://threejs.org/examples/jsm/libs/stats.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { RoomEnvironment } from "https://threejs.org/examples/jsm/environments/RoomEnvironment.js";
let screenWidth=document.documentElement.clientWidth || document.body.clientWidth;
let screenHeight=document.documentElement.clientHeight || document.body.clientHeight;
//scene
let scene=new THREE.Scene();
//geometry
let geometry= new THREE.TorusKnotGeometry(50,10,50,20);
//material
let matColor=new THREE.MeshPhongMaterial({color:0xffffff});
let mesh=new THREE.Mesh(geometry,matColor);
scene.add(mesh);
//outlineScene
let outlineScene=new THREE.Scene();
//轮廓着色器
//着色器材质
const matShader=new THREE.ShaderMaterial({
uniforms: {
offset:{
type: 'f', //指定变量类型为float
value:1.0 //偏移值
}
},
vertexShader: [
"uniform float offset;",
"void main() {",
"vec4 pos = modelViewMatrix * vec4(...