多边形轮廓-开孔，HTML代码在线实时编辑、实时预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13

            
            <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="./main.js"></script>
</body>
</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

            
            import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
const renderer = new THREE.WebGLRenderer({ antialias: true });

// 绘制多边形
const shape = new THREE.Shape();
shape.lineTo(100, 0);
shape.lineTo(100, 100);
shape.lineTo(0, 100);

// 绘制开孔
const path1 = new THREE.Path();
path1.absarc(20, 20, 10);
const path2 = new THREE.Path();
path2.absarc(80, 20, 10);
const path3 = new THREE.Path();
path3.moveTo(50, 50);
path3.lineTo(80, 50);
path3.lineTo(80, 80);
path3.lineTo(50, 80);

// 在多边形中插入开孔
shape.holes.push(path1, path2, path3);

// 对二维轮廓进行拉伸效果 ExtrudeGeometry
const geometry = new THREE.ExtrudeGeometry(shape, {
  depth: 20, // 拉伸长度
  curveSegments: 150, // shape曲线对应曲线细分数
  bevelEnabled: false, // 禁止默认倒角
  
  // bevelSegments: 1, // 倒直角
  
  // bevelThickness: 2, //倒角尺寸:拉伸方向
  // bevelSize: 2, //倒角尺寸:垂直拉伸方向
  // bevelSegments: 5, //倒圆角：倒角细分精度，默认3
});
const material = new THREE.MeshLambertMaterial({ color: 0x41bdff });
const mesh = new THREE.Mesh(geometry, material);

// 添加模型边界线
const edges = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({
  color: 0x00ffff,
});
const line = new THREE.LineSegments(edges, edgesMaterial);

const axesHelper = new THREE.AxesHelper(100);
const ambientLight = new THREE.AmbientLight(0x404040, 2); // 添加环境光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 添加方向光
const pointLight = new THREE.PointLight(0xff0000, 2, 10); // 添加点光源，红色的点光源 

const controls = new OrbitControls(camera, renderer.domElement); // 添加轨道控制器

directionalLight.position.set(5, 5, 5).normalize();
directionalLight.castShadow = true; // 方向光投射阴影

pointLight.position.set(2, 2, 2);
pointLight.castShadow = true; // 点光源投射阴影

controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 阻尼系数

mesh.add(line);

scene.add(mesh);
scene.add(axesHelper);
scene.add(directionalLight);
scene.add(ambientLight);
scene.add(pointLight);

// 设置相机位置
camera.position.set(200, 200, 200);
camera.lookAt(0, 0, 0);

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影
renderer.setClearColor(0x444444, 1);

document.body.appendChild(renderer.domElement);


// 动画循环
const animate = () => {
  requestAnimationFrame(animate);
  // 渲染场景
  renderer.render(scene, camera);
};

// 启动动画
animate();

// 窗口大小调整时更新相机和渲染器
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

            
                1
2
3
4
5

            
            {
  "dependencies": {
    "three": "0.173.0"
  }
}