首页 > 网络编程 > JavaScript > javascript技巧 > three.js物体缩放和旋转

three.js设置物体的缩放和旋转代码示例

2023-11-21 09:36:04 作者：jieyucx

最近在用three.js做三维模型的时候,需要通过鼠标滑轮向前来控制视角朝鼠标的位置放大,然后通过鼠标滑轮向后将视角复原,这篇文章主要给大家介绍了关于three.js如何设置物体的缩放和旋转的相关资料,需要的朋友可以参考下

一、缩放物体介绍

1. 如何缩放

使用three.js设置物体的缩放可以通过对象的scale属性来实现。例如，将一个立方体对象缩小一半的代码如下：

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
cube.scale.set(0.5, 0.5, 0.5);

其中，scale属性是一个THREE.Vector3类型的对象，包含了x、y、z三个方向的缩放比例。设置scale时，可以直接使用Vector3的set方法设置缩放比例，也可以分别设置x、y、z三个方向的缩放比例。

也可以使用变换的方法来缩放物体，例如将一个物体沿着x轴缩小一半，代码如下：

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
cube.position.x = 2;
cube.rotation.y = Math.PI / 4;
var vector = new THREE.Vector3(0.5, 1, 1);
cube.scale.multiply(vector);

其中，Vector3的multiply方法将会对scale属性进行按元素乘法，实现沿x轴缩小一半的效果。

示例效果

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry, material)

// 缩放
cube.scale.set(1, 2, 3) // x轴缩放1倍，y轴缩放2倍，z轴缩放3倍

// 将物体添加到场景中
scene.add(cube)

未缩放前：

沿着x/y/z缩放比例1:2:3之后

二、旋转物体介绍

1.如何旋转

hree.js中旋转一个物体需要使用物体的旋转属性（rotation），通过改变这个属性的值来进行物体的旋转。

下面是一个简单的例子，假设你有一个立方体（cube）：

var cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());

// 将立方体添加到场景中
scene.add(cube);

// 旋转立方体
cube.rotation.x += 0.01;    // 绕X轴旋转
cube.rotation.y += 0.01;    // 绕Y轴旋转

这个例子中，我们通过修改cube.rotation.x和cube.rotation.y的值来旋转立方体。对于旋转角度的控制，可以使用弧度制或者角度制。例如，可以通过下面的方式将角度转换为弧度：

// 将角度转换为弧度
var angleInDegrees = 45;
var angleInRadians = angleInDegrees * Math.PI / 180;

// 使用弧度旋转立方体
cube.rotation.z = angleInRadians;

2. 示例

我们让物体一直旋转

// 使用渲染器，通过相机渲染场景
function animate() {
    requestAnimationFrame( animate ); //帧动画
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

三、完整代码

// 导入three
import * as THREE from 'three'

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

// 创建场景
const scene = new THREE.Scene()

// 创建相机
// 参数：视野角度，长宽比，近平面，远平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

// 设置相机位置
// 参数：x轴，y轴，z轴
camera.position.set(0, 0, 5)

// 将相机添加到场景中
scene.add(camera)

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry, material)

// 修改物体的位置
// cube.position.set(1, 1, 1)

// 缩放
// cube.scale.set(1, 2, 3) // x轴缩放1倍，y轴缩放2倍，z轴缩放3倍

// 将物体添加到场景中
scene.add(cube)

console.log('物体', cube)

// 创建渲染器
const renderer = new THREE.WebGLRenderer()
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer)
// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement)

// 创建轨道控制器
// 参数：相机，渲染器dom元素
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true; // 开启阻尼效果
controls.rotateSpeed = 0.5; // 旋转速度
controls.target.set(0, 0, 0); // 查看物体时的中心点

// 添加坐标轴辅助器
// 参数：坐标轴长度
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 使用渲染器，通过相机渲染场景
function animate() {
    // 让物体沿着y轴往返运动
    // cube.position.y += 0.01
    // if (cube.position.y > 5) {
    //     cube.position.y = -1
    // }

    requestAnimationFrame( animate ); //帧动画
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋转物体
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

总结

到此这篇关于three.js设置物体的缩放和旋转的文章就介绍到这了,更多相关three.js物体缩放和旋转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！