three.js修改物體的位置代碼實例

更新時間：2023年11月21日 09:21:33 作者：jieyucx

在Three.js中物體通常是通過創(chuàng)建"網(wǎng)格"(Mesh)對象來描述的,下面這篇文章主要給大家介紹了關于three.js修改物體位置的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、位置屬性position介紹

要修改物體的位置，可以使用物體的position屬性。該屬性是一個THREE.Vector3對象，它表示物體在3D空間中的位置。例如，要將物體移動到x=10，y=20，z=30的位置，可以使用以下代碼：

object.position.set(10, 20, 30);

如果要相對于當前位置移動物體，可以使用以下代碼：

object.position.x += 5; // 將物體向右移動5個單位
object.position.y -= 10; // 將物體向下移動10個單位
object.position.z += 15; // 將物體向前移動15個單位

請注意，這些代碼只會在下一次渲染時生效。如果要立即更新物體的位置，請調(diào)用以下代碼：

object.updateMatrix();

這將強制three.js重新計算物體的變換矩陣，并將其應用于場景中的所有對象。

二、示例

1. position.set

// 創(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)

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

上述代碼是將物體沿著中心點分別像x/y/z軸都移動一個單位，效果如圖：

2. 往返運動

// 使用渲染器，通過相機渲染場景
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; //旋轉(zhuǎn)物體
    // cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();

我們在animate中設置物體沿著y軸移動，當移動到5時重置成1，就可以實現(xiàn)物體沿著y軸往返運動了

三、完整代碼

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

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

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

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

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

// 將相機添加到場景中
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)

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

console.log('物體', cube)

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

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

// 添加坐標軸輔助器
// 參數(shù)：坐標軸長度
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; //旋轉(zhuǎn)物體
    // cube.rotation.y += 0.01; 
    renderer.render( scene, camera ); //渲染
}
animate();