快捷導(dǎo)航

three.js設(shè)置物體的縮放和旋轉(zhuǎn)代碼示例

更新時(shí)間：2023年11月21日 09:38:22 作者：jieyucx

最近在用three.js做三維模型的時(shí)候,需要通過(guò)鼠標(biāo)滑輪向前來(lái)控制視角朝鼠標(biāo)的位置放大,然后通過(guò)鼠標(biāo)滑輪向后將視角復(fù)原,這篇文章主要給大家介紹了關(guān)于three.js如何設(shè)置物體的縮放和旋轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下

一、縮放物體介紹

1. 如何縮放

使用three.js設(shè)置物體的縮放可以通過(guò)對(duì)象的scale屬性來(lái)實(shí)現(xiàn)。例如，將一個(gè)立方體對(duì)象縮小一半的代碼如下：

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

其中，scale屬性是一個(gè)THREE.Vector3類型的對(duì)象，包含了x、y、z三個(gè)方向的縮放比例。設(shè)置scale時(shí)，可以直接使用Vector3的set方法設(shè)置縮放比例，也可以分別設(shè)置x、y、z三個(gè)方向的縮放比例。

也可以使用變換的方法來(lái)縮放物體，例如將一個(gè)物體沿著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方法將會(huì)對(duì)scale屬性進(jìn)行按元素乘法，實(shí)現(xiàn)沿x軸縮小一半的效果。

示例效果

// 創(chuàng)建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根據(jù)幾何體和材質(zhì)創(chuàng)建物體
const cube = new THREE.Mesh(geometry, material)

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

// 將物體添加到場(chǎng)景中
scene.add(cube)

未縮放前：

沿著x/y/z縮放比例1:2:3之后

二、旋轉(zhuǎn)物體介紹

1.如何旋轉(zhuǎn)

hree.js中旋轉(zhuǎn)一個(gè)物體需要使用物體的旋轉(zhuǎn)屬性（rotation），通過(guò)改變這個(gè)屬性的值來(lái)進(jìn)行物體的旋轉(zhuǎn)。

下面是一個(gè)簡(jiǎn)單的例子，假設(shè)你有一個(gè)立方體（cube）：

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

// 將立方體添加到場(chǎng)景中
scene.add(cube);

// 旋轉(zhuǎn)立方體
cube.rotation.x += 0.01;    // 繞X軸旋轉(zhuǎn)
cube.rotation.y += 0.01;    // 繞Y軸旋轉(zhuǎn)

這個(gè)例子中，我們通過(guò)修改cube.rotation.x和cube.rotation.y的值來(lái)旋轉(zhuǎn)立方體。對(duì)于旋轉(zhuǎn)角度的控制，可以使用弧度制或者角度制。例如，可以通過(guò)下面的方式將角度轉(zhuǎn)換為弧度：

// 將角度轉(zhuǎn)換為弧度
var angleInDegrees = 45;
var angleInRadians = angleInDegrees * Math.PI / 180;

// 使用弧度旋轉(zhuǎn)立方體
cube.rotation.z = angleInRadians;

2. 示例

我們讓物體一直旋轉(zhuǎn)

// 使用渲染器，通過(guò)相機(jī)渲染場(chǎng)景
function animate() {
    requestAnimationFrame( animate ); //幀動(dòng)畫
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋轉(zhuǎn)物體
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

三、完整代碼

// 導(dǎo)入three
import * as THREE from 'three'

// 導(dǎo)入軌道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene()

// 創(chuàng)建相機(jī)
// 參數(shù)：視野角度，長(zhǎng)寬比，近平面，遠(yuǎn)平面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

// 設(shè)置相機(jī)位置
// 參數(shù)：x軸，y軸，z軸
camera.position.set(0, 0, 5)

// 將相機(jī)添加到場(chǎng)景中
scene.add(camera)

// 創(chuàng)建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1)
// 創(chuàng)建材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
// 根據(jù)幾何體和材質(zhì)創(chuàng)建物體
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倍

// 將物體添加到場(chǎng)景中
scene.add(cube)

console.log('物體', cube)

// 創(chuàng)建渲染器
const renderer = new THREE.WebGLRenderer()
// 設(shè)置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight)
// console.log(renderer)
// 將渲染器添加到頁(yè)面中
document.body.appendChild(renderer.domElement)

// 創(chuàng)建軌道控制器
// 參數(shù)：相機(jī)，渲染器dom元素
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true; // 開啟阻尼效果
controls.rotateSpeed = 0.5; // 旋轉(zhuǎn)速度
controls.target.set(0, 0, 0); // 查看物體時(shí)的中心點(diǎn)

// 添加坐標(biāo)軸輔助器
// 參數(shù)：坐標(biāo)軸長(zhǎng)度
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// 使用渲染器，通過(guò)相機(jī)渲染場(chǎng)景
function animate() {
    // 讓物體沿著y軸往返運(yùn)動(dòng)
    // cube.position.y += 0.01
    // if (cube.position.y > 5) {
    //     cube.position.y = -1
    // }

    requestAnimationFrame( animate ); //幀動(dòng)畫
    controls.update() //更新控制器
    cube.rotation.x += 0.01; //旋轉(zhuǎn)物體
    cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();