在threejs開發(fā)中，不可避免的需要對三維場景進行交互，例如對模型進行旋轉，縮放，平移等操作。接下來，我們就聊一聊如何進行三維場景的交互。

控制的對象是誰?

在三維的世界中，如果想達到場景的TRS(translate、rotate、scale)操作，我們其實有兩種辦法來做到。一種是對模型本身進行TRS操作，通過改變模型的屬性，達到視覺上的效果。第二種是對相機進行操作，把相機拉遠模型自然縮小了，把相機移動，模型自然就向相反方向移動了。

兩種方式各自有各自的特點和使用場景。操作模型，我們可以控制每個模型的TRS，比如在一個家裝場景中，我們要對某個家具進行拖動，縮放。操作相機，我們可以對整個場景進行操作，比如拉遠相機，查看場景全局外觀。兩種方式經常也會配合在一起使用。

操作模型

操作模型，首先，選中需要操作的模型。這部分需要，用到我們之前介紹過的拾取操作，首先拾取都某個三維模型，作為選中對象。然后我們才能對選中對象進行操作。第二部分是鼠標及手勢的輸入及判斷。例如我們需要使用鼠標的滾輪觸發(fā)縮放操作，或者觸屏雙指進行縮放操作。最后，就是進行模型的屬性修改，在threejs中一般使用position,rotate,scale來達到修改模型外觀的目的。

我們從最簡單的模型縮放來具體講講如何實現。

縮放

renderer.domElement.addEventListener("mousewheel", (event) => {

var scaleFactor= 0.001; //鼠標滾輪控制的縮放強度系數

var scale = 1 + event.wheelDelta * scaleFactor; //縮放倍數

cube.scale.multiplyScalar(scale)

})

平移

對于平移來說，我們需要設置一個參考面，讓這個模型在這個參考面上進行平移。一般來說我們常見的平移方式有固定參考面，比如地面、墻面。除此以外還有就是相機朝向的參考面。

如圖所示，我們以mesh的中心點為面上的一個點，然后以相機的朝向為法向量，可以創(chuàng)建一個平面。整個鼠標的拖動都應該在這個面上。

let dragTarget = null; //拖拽對象

let raycaster = new THREE.Raycaster(); //射線

let mouse = new THREE.Vector2(); //鼠標位置

let hit = new THREE.Vector3(); //射線在參考面上的拾取點

let plane = new THREE.Plane(); //拖拽參考面

plane.setFromNormalAndCoplanarPoint(camera.getWorldDirection(), cube.position);

//let helper = new THREE.PlaneHelper( plane, 50, 0xffff00 ); //拖拽參考面的可視化幫助類

//scene.add( helper );//添加拖拽參考面的可視化幫助類到場景

renderer.domElement.addEventListener("mousedown", (event) => {

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera);

let intersects = raycaster.intersectObjects([cube], true);

if (intersects.length > 0) {

dragTarget = intersects[0].object;

}

})

renderer.domElement.addEventListener("mousemove", (event) => {

if (dragTarget) {

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

raycaster.setFromCamera(mouse, camera);

raycaster.ray.intersectPlane(plane, hit);

if (hit) {

cube.position.copy(hit);

console.log(hit)

}

}

})

renderer.domElement.addEventListener("mouseup", (event) => {

dragTarget = null;

})

旋轉

一般來說，我們旋轉物體都是沿著某個軸的，比如Y軸。我們以鼠標X移動的增量作為參數，沿著模型Y軸方向旋轉。

let lastX = null;

renderer.domElement.addEventListener("mousedown", (event) => {

lastX = event.clientX;

})

renderer.domElement.addEventListener("mousemove", (event) => {

if (lastX) {

let delta = event.clientX - lastX

cube.rotateY(delta * 0.01)

lastX = event.clientX;

}

})

renderer.domElement.addEventListener("mouseup", (event) => {

lastX = null;

})

操作相機

threejs為我們提供了一系列的相機操作控件。對于相機控制，最常用的就是OrbitControls控件(一般放在threejs的examples/jsm/controls/OrbitControls.js)。使用起來也比較簡單。只需importy引入文件，然后new出一個控件即可。這里注意就是如果copy文件到項目目錄，需要手動修改js文件中關于threejs的引用，因為控件中的threejs是引用的是編譯出來的文件相對地址，不是通過npm安裝的地址。

import {

OrbitControls

} from '../lib/controls/OrbitControls'

const controls = new OrbitControls(camera, renderer.domElement);

控件提供了鼠標左鍵旋轉，右鍵平移，滾輪縮放的功能，并且支持手勢操作。

以上就是對threejs中三維場景操作控制的說明，后續(xù)我們將繼續(xù)講講如何在3d場景中加入一些動畫。

總結

以上是生活随笔為你收集整理的threejs 加载两个场景_threejs中的三维场景操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。