调整threejs测试页相机坐标系

This commit is contained in:
zhangshun
2026-06-16 12:14:06 +08:00
parent 71bf027fde
commit eeef7594fd

View File

@@ -490,6 +490,8 @@
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import SmartWasmAPI from "./wasm/smart_api_wrapper.js"; import SmartWasmAPI from "./wasm/smart_api_wrapper.js";
THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
const api = new SmartWasmAPI(); const api = new SmartWasmAPI();
const jointCount = 6; const jointCount = 6;
const state = { const state = {
@@ -530,7 +532,8 @@
scene.background = new THREE.Color(0xdfe7ec); scene.background = new THREE.Color(0xdfe7ec);
const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 80); const camera = new THREE.PerspectiveCamera(45, 1, 0.01, 80);
camera.position.set(1.1, -1.75, 1.05); camera.up.set(0, 0, 1);
camera.position.set(1.18, -1.68, 0.92);
const renderer = new THREE.WebGLRenderer({ const renderer = new THREE.WebGLRenderer({
canvas: elements.canvas, canvas: elements.canvas,
@@ -542,7 +545,24 @@
const controls = new OrbitControls(camera, renderer.domElement); const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; controls.enableDamping = true;
controls.screenSpacePanning = false;
controls.target.set(0.18, 0, 0.34); controls.target.set(0.18, 0, 0.34);
controls.update();
window.__robotKinematicsDebug = {
// 获取当前相机状态,用于验证按钮操作不会改变视角。
getCameraState() {
return {
position: camera.position.toArray(),
up: camera.up.toArray(),
target: controls.target.toArray(),
};
},
// 获取 three.js 默认上方向,用于验证场景为 Z 轴向上。
getDefaultUp() {
return THREE.Object3D.DEFAULT_UP.toArray();
},
};
const robotGroup = new THREE.Group(); const robotGroup = new THREE.Group();
const targetGroup = new THREE.Group(); const targetGroup = new THREE.Group();
@@ -906,7 +926,6 @@
.join(", "); .join(", ");
} }
fitCamera(points);
} }
// 创建两个关节点之间的连杆圆柱。 // 创建两个关节点之间的连杆圆柱。
@@ -930,23 +949,6 @@
return mesh; return mesh;
} }
// 根据当前骨架范围调整相机目标。
function fitCamera(points) {
if (!points.length) {
return;
}
const box = new THREE.Box3().setFromPoints(points);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3()).length();
controls.target.copy(center);
if (size > 0) {
camera.near = 0.01;
camera.far = Math.max(20, size * 18);
camera.updateProjectionMatrix();
}
}
// 清空三维分组。 // 清空三维分组。
function clearGroup(group) { function clearGroup(group) {
while (group.children.length > 0) { while (group.children.length > 0) {
@@ -1002,7 +1004,6 @@
targetMaterial, targetMaterial,
); );
marker.position.fromArray(targetPose.position); marker.position.fromArray(targetPose.position);
marker.rotation.x = Math.PI / 2;
targetGroup.add(marker); targetGroup.add(marker);
const axes = new THREE.AxesHelper(0.18); const axes = new THREE.AxesHelper(0.18);