【three.js】旋转、缩放、平移几何体

目录

一、缩放

二、平移

三、旋转

四、居中

附源码


BufferGeometry通过.scale().translate().rotateX().rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。

我们先创建一个平面物体,样子是这样的。

一、缩放

// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);

// 几何体旋转、缩放或平移之后,查看几何体顶点位置坐标的变化
// BufferGeometry的旋转、缩放、平移等方法本质上就是改变顶点的位置坐标
console.log('顶点位置数据', geometry.attributes.position);
### 实现 Three.js 中鼠标平移功能 在 Three.js 中实现鼠标平移物体或场景的功能可以通过 `OrbitControls` 控件来完成。该控件允许用户通过鼠标交互轻松地旋转缩放平移视图。 #### 使用 OrbitControls 平移场景 为了启用平移功能,需要先加载并配置 `OrbitControls` 插件[^1]: ```javascript import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.147/build/three.module.js'; import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.147/examples/jsm/controls/OrbitControls.js'; // 初始化渲染器、相机和场景... const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const scene = new THREE.Scene(); // 添加一些几何体到场景中... scene.add(new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({ color: 0x00ff00 }))); // 创建 OrbitControls 对象实例并与指定的摄像机关联起来 const controls = new OrbitControls(camera, renderer.domElement); // 启用平移 (默认情况下已经开启) controls.enablePan = true; function animate() { requestAnimationFrame(animate); // 渲染下一帧之前更新控制器状态 controls.update(); renderer.render(scene, camera); } animate(); ``` 上述代码片段展示了如何设置基本环境以及初始化 `OrbitControls` 来支持鼠标的拖拽平移操作。注意这里启用了 `enablePan` 属性,默认值即为 `true`,因此通常不需要特别设定除非想要禁用此行为。 对于更复杂的交互需求,比如精确控制某个特定对象而非整个视角,则可能需要用到射线检测技术配合事件监听机制处理用户的输入,并结合 GSAP 或其他动画库创建流畅的效果[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Calvad0s

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值