3d 添加辅助坐标器和轨道控制器

1.添加辅助坐标器

使用AxesHelper类来添加坐标轴辅助器,辅助器简单模拟3个坐标轴的对象。红色代表X轴,绿色代表Y轴,蓝色代表Z轴。

javascript 复制代码
// 创建坐标轴辅助器,5是坐标轴的长度
const axesHelper = new THREE.AxesHelper(5);
// 将坐标轴辅助器添加到场景中
scene.add(axesHelper);

2.添加轨道控制器

使用OrbitControls类来添加控制器,为了方便旋转、缩放和平移相机视角。

javascript 复制代码
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping = true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
// 设置旋转速度
controls.autoRotate = 0.05;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  // 更新控制器
  controls.update();
}
animate();
相关推荐
李伟_Li慢慢6 小时前
12-mini版WebGLObjects
前端·three.js
李伟_Li慢慢6 小时前
17-mini版WebGLBufferRenderer
前端·three.js
李伟_Li慢慢6 小时前
16-mini版WebGLBackground
前端·three.js
李伟_Li慢慢6 小时前
13-mini版WebGLProgram
前端·three.js
李伟_Li慢慢6 小时前
14-mini版WebGLPrograms
前端·three.js
李伟_Li慢慢6 小时前
19-mini版WebGLRenderer
前端·three.js
李伟_Li慢慢6 小时前
10-mini版bindingStates
前端·three.js
李伟_Li慢慢6 小时前
08-BufferAttribute
前端·three.js
李伟_Li慢慢6 小时前
09-mini版WebGLAttributes
前端·three.js
李伟_Li慢慢6 小时前
11-mini版WebGLGeometries
前端·three.js