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();
相关推荐
在下胡三汉9 小时前
来自 3D 世界的 JPEG。什么是 glTF?什么是 glb?
3d
Mapmost15 小时前
【数据可视化艺术·应用篇】三维管线分析如何重构城市“生命线“管理?
3d·信息可视化·性能优化·demo
Mintopia18 小时前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
陈小峰_iefreer21 小时前
stone 3d v3.3.0版本发布,含时间线和连接器等新功能
3d·webgl·metaverse·cadcg
三年三月1 天前
three的基本介绍
three.js
子燕若水2 天前
“Daz to Unreal”将 G8 角色(包括表情)从 daz3d 导入到 UE5。在 UE5 中,我发现使用某个表情并与闭眼混合后,上眼睑出现了问题
3d·ue5
小桥风满袖2 天前
Three.js-硬要自学系列15 (圆弧顶点、几何体方法、曲线简介、圆、椭圆、样条曲线、贝塞尔曲线)
前端·css·three.js
zhu_zhu_xia2 天前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
伶俜monster2 天前
光影编程师:Threejs Shader 基础全攻略
前端·webgl·three.js
小桥风满袖2 天前
Three.js-硬要自学系列14 (PBR材质、环境贴图、清漆层、物理材质透光率)
前端·css·three.js