diff --git a/public/fourbar_test.html b/public/fourbar_test.html
index 244256f..ffd7866 100644
--- a/public/fourbar_test.html
+++ b/public/fourbar_test.html
@@ -1038,6 +1038,7 @@
scene.background = new THREE.Color(0x0f1720);
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 });
renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
renderer.outputColorSpace = THREE.SRGBColorSpace;
@@ -1057,7 +1058,8 @@
scene.add(ambient, keyLight);
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);
const group = new THREE.Group();
@@ -1116,9 +1118,9 @@
return new THREE.Mesh(new THREE.SphereGeometry(radius, 24, 16), material);
}
- // 把二维接口点映射到 Three.js 的 XZ 平面。
+ // 把二维接口点映射到 Three.js 的 XY 平面,保持 Z 轴为三维相机上方向。
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()) {
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 target = new THREE.Vector3(span * 0.35, 0, input.S_OFS * 0.5);
- view.camera.position.set(span * 0.9, span * 1.45, span * 1.75);
+ const target = new THREE.Vector3(span * 0.35, input.S_OFS * 0.5, 0);
+ 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.controls.target.copy(target);
view.controls.update();
@@ -1273,7 +1276,7 @@
{ x: railRange.maxX, y: input.S_OFS },
);
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];