meswork/smart_wasm
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整四连杆三维视图为Z轴向上

Browse Source
This commit is contained in:
zhangshun
2026-06-16 11:58:10 +08:00
parent 5dfe4aaec9
commit c24c4e5b64
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/fourbar_test.html
View File

@@ -1038,6 +1038,7 @@
scene.background = new THREE.Color(0x0f1720); scene.background = new THREE.Color(0x0f1720);
const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100); const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 100);
camera.up.set(0, 0, 1);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.outputColorSpace = THREE.SRGBColorSpace;
@@ -1057,7 +1058,8 @@
scene.add(ambient, keyLight); scene.add(ambient, keyLight);
const grid = new THREE.GridHelper(8, 32, 0x46606f, 0x263744); const grid = new THREE.GridHelper(8, 32, 0x46606f, 0x263744);
grid.position.y = -0.08; grid.rotation.x = Math.PI / 2;
grid.position.z = -0.08;
scene.add(grid); scene.add(grid);
const group = new THREE.Group(); const group = new THREE.Group();
@@ -1116,9 +1118,9 @@
return new THREE.Mesh(new THREE.SphereGeometry(radius, 24, 16), material); return new THREE.Mesh(new THREE.SphereGeometry(radius, 24, 16), material);
} }
// 把二维接口点映射到 Three.js 的 XZ 平面。 // 把二维接口点映射到 Three.js 的 XY 平面，保持 Z 轴为三维相机上方向。
function toThreePoint(point) { function toThreePoint(point) {
return new THREE.Vector3(point.x, 0, point.y); return new THREE.Vector3(point.x, point.y, 0);
} }
// 更新圆柱连杆的位置、长度和朝向。 // 更新圆柱连杆的位置、长度和朝向。
@@ -1141,8 +1143,9 @@
function resetThreeCamera(input = readInput()) { function resetThreeCamera(input = readInput()) {
const view = ensureThreeView(); const view = ensureThreeView();
const span = Math.max(input.L_AB + input.L_BS + input.L3 + input.L4 * 0.35, Math.abs(input.S_OFS) + input.L_AB, 1); const span = Math.max(input.L_AB + input.L_BS + input.L3 + input.L4 * 0.35, Math.abs(input.S_OFS) + input.L_AB, 1);
const target = new THREE.Vector3(span * 0.35, 0, input.S_OFS * 0.5); const target = new THREE.Vector3(span * 0.35, input.S_OFS * 0.5, 0);
view.camera.position.set(span * 0.9, span * 1.45, span * 1.75); view.camera.up.set(0, 0, 1);
view.camera.position.set(span * 0.9, span * -1.45, span * 1.75);
view.camera.lookAt(target); view.camera.lookAt(target);
view.controls.target.copy(target); view.controls.target.copy(target);
view.controls.update(); view.controls.update();
@@ -1273,7 +1276,7 @@
{ x: railRange.maxX, y: input.S_OFS }, { x: railRange.maxX, y: input.S_OFS },
); );
view.objects.slider.position.copy(toThreePoint(normalized.output)); view.objects.slider.position.copy(toThreePoint(normalized.output));
view.objects.slider.position.y = 0.02; view.objects.slider.position.z = 0.02;
} }
const joints = [view.objects.pointA, view.objects.pointB, view.objects.pointC, view.objects.pointD]; const joints = [view.objects.pointA, view.objects.pointB, view.objects.pointC, view.objects.pointD];