fl-web-component 2.0.0-beta.1 → 2.0.0-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,127 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="zh">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Three.js OutlinePass 点击高亮 Demo</title>
6
- <style>
7
- body { margin: 0; overflow: hidden; background-color: #000; }
8
- canvas { display: block; }
9
- .info { position: absolute; top: 10px; left: 10px; color: white; font-family: sans-serif; pointer-events: none; }
10
- </style>
11
- </head>
12
- <body>
13
- <div class="info">点击立方体或球体触发 OutlinePass 高亮</div>
14
-
15
- <script type="importmap">
16
- {
17
- "imports": {
18
- "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
19
- "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
20
- }
21
- }
22
- </script>
23
-
24
- <script type="module">
25
- import * as THREE from 'three';
26
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
27
- import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
28
- import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
29
- import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
30
-
31
- // --- 1. 基础场景初始化 ---
32
- const scene = new THREE.Scene();
33
- const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
34
- camera.position.set(0, 5, 10);
35
-
36
- const renderer = new THREE.WebGLRenderer({ antialias: true });
37
- renderer.setSize(window.innerWidth, window.innerHeight);
38
- renderer.setPixelRatio(window.devicePixelRatio);
39
- document.body.appendChild(renderer.domElement);
40
-
41
- const controls = new OrbitControls(camera, renderer.domElement);
42
-
43
- // 灯光
44
- scene.add(new THREE.AmbientLight(0x404040, 2));
45
- const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
46
- directionalLight.position.set(5, 5, 5);
47
- scene.add(directionalLight);
48
-
49
- // --- 2. 添加测试模型 ---
50
- const geometry1 = new THREE.BoxGeometry(2, 2, 2);
51
- const material1 = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
52
- const cube = new THREE.Mesh(geometry1, material1);
53
- cube.position.x = -3;
54
- scene.add(cube);
55
-
56
- const geometry2 = new THREE.SphereGeometry(1.5, 32, 32);
57
- const material2 = new THREE.MeshStandardMaterial({ color: 0xaa4488 });
58
- const sphere = new THREE.Mesh(geometry2, material2);
59
- sphere.position.x = 3;
60
- scene.add(sphere);
61
-
62
- // --- 3. 配置后期处理 (OutlinePass) ---
63
- const composer = new EffectComposer(renderer);
64
-
65
- // 常规渲染通道
66
- const renderPass = new RenderPass(scene, camera);
67
- composer.addPass(renderPass);
68
-
69
- // 轮廓线通道
70
- const outlinePass = new OutlinePass(
71
- new THREE.Vector2(window.innerWidth, window.innerHeight),
72
- scene,
73
- camera
74
- );
75
- // 配置轮廓线样式
76
- outlinePass.edgeStrength = 8.0; // 边框强度
77
- outlinePass.edgeGlow = 1.0; // 发光度
78
- outlinePass.edgeThickness = 2.0; // 边框粗细
79
- outlinePass.pulsePeriod = 2; // 呼吸闪烁周期 (0为不闪烁)
80
- outlinePass.visibleEdgeColor.set('#ffffff'); // 可见边缘颜色
81
- outlinePass.hiddenEdgeColor.set('#190a05'); // 被遮挡边缘颜色
82
-
83
- composer.addPass(outlinePass);
84
-
85
- // --- 4. 射线检测 (Raycaster) 与点击事件 ---
86
- const raycaster = new THREE.Raycaster();
87
- const mouse = new THREE.Vector2();
88
-
89
- window.addEventListener('click', (event) => {
90
- // 将鼠标位置归一化
91
- mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
92
- mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
93
-
94
- raycaster.setFromCamera(mouse, camera);
95
-
96
- // 检测交点
97
- const intersects = raycaster.intersectObjects(scene.children);
98
-
99
- if (intersects.length > 0) {
100
- const selectedObject = intersects[0].object;
101
- // 将选中的对象放入 OutlinePass 的选中列表
102
- outlinePass.selectedObjects = [selectedObject];
103
- } else {
104
- // 点击空白处取消高亮
105
- outlinePass.selectedObjects = [];
106
- }
107
- });
108
-
109
- // --- 5. 渲染循环 ---
110
- function animate() {
111
- requestAnimationFrame(animate);
112
- controls.update();
113
- // 注意:使用后期处理后,需调用 composer.render() 而非 renderer.render()
114
- composer.render();
115
- }
116
-
117
- window.addEventListener('resize', () => {
118
- camera.aspect = window.innerWidth / window.innerHeight;
119
- camera.updateProjectionMatrix();
120
- renderer.setSize(window.innerWidth, window.innerHeight);
121
- composer.setSize(window.innerWidth, window.innerHeight);
122
- });
123
-
124
- animate();
125
- </script>
126
- </body>
127
- </html>
@@ -1,63 +0,0 @@
1
- diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
2
- index 08a8fd6..76089cb 100644
3
- --- a/node_modules/camera-controls/dist/camera-controls.module.js
4
- +++ b/node_modules/camera-controls/dist/camera-controls.module.js
5
- @@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
6
- * @category Methods
7
- */
8
- dolly(distance, enableTransition = false) {
9
- - return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
10
- + return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
11
- }
12
- /**
13
- * Dolly in/out camera position to given distance.
14
- @@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
15
- * @param enableTransition Whether to move smoothly or immediately.
16
- * @category Methods
17
- */
18
- - dollyTo(distance, enableTransition = false) {
19
- + dollyTo(distance, minDistance, enableTransition = false) {
20
- this._isUserControllingDolly = false;
21
- this._lastDollyDirection = DOLLY_DIRECTION.NONE;
22
- this._changedDolly = 0;
23
- - return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
24
- + return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
25
- }
26
- _dollyToNoClamp(distance, enableTransition = false) {
27
- const lastRadius = this._sphericalEnd.radius;
28
- @@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
29
- if (isPerspectiveCamera(this._camera)) {
30
- const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
31
- promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
32
- - promises.push(this.dollyTo(distance, enableTransition));
33
- + promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
34
- promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
35
- }
36
- else if (isOrthographicCamera(this._camera)) {
37
- @@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
38
- promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
39
- if (isPerspectiveCamera(this._camera)) {
40
- const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
41
- - promises.push(this.dollyTo(distanceToFit, enableTransition));
42
- + promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
43
- }
44
- else if (isOrthographicCamera(this._camera)) {
45
- const width = this._camera.right - this._camera.left;
46
- @@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
47
- _zColumn.multiplyScalar(cameraToPoint.z);
48
- _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
49
- _v3A.z = _v3A.z + distance;
50
- - this.dollyTo(distance, false);
51
- + this.dollyTo(distance, Number.EPSILON, false);
52
- this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
53
- this.moveTo(targetX, targetY, targetZ, false);
54
- }
55
- @@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
56
- this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
57
- _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
58
- this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
59
- - this.dollyTo(_sphericalA.radius, enableTransition);
60
- + this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
61
- this.zoomTo(obj.zoom, enableTransition);
62
- this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
63
- this._needsUpdate = true;