上一節(jié)我們創(chuàng)建了一個(gè)三維的立方體，將其放在了瀏覽器窗口中，但是目前來(lái)講它只是一個(gè)靜態(tài)的圖片，我們并不能通過(guò)鼠標(biāo)控制其旋轉(zhuǎn)、縮放和移動(dòng)，這一節(jié)我們來(lái)實(shí)現(xiàn)用鼠標(biāo)控制物體的運(yùn)動(dòng)。
首先我們要了解一個(gè)概念，在三維場(chǎng)景中，我們要控制物體旋轉(zhuǎn)，實(shí)際上不是物體在旋轉(zhuǎn)，而是我們的相機(jī)（還記得上一節(jié)中說(shuō)的相機(jī)嗎）在圍繞物體旋轉(zhuǎn)，就像電影中的鏡頭拉近一樣，是相機(jī)在動(dòng)，不是物體在動(dòng)，所以，在Threejs中要想讓我們的物探動(dòng)起來(lái)，我們需要引入一個(gè)軌道控制器(OrbitControls),它可以使得相機(jī)圍繞目標(biāo)進(jìn)行軌道運(yùn)動(dòng)，下面我們來(lái)實(shí)現(xiàn)下
1.導(dǎo)入軌道控制器OrbitControls
OrbitControls是ThreeJS的一個(gè)擴(kuò)展庫(kù)，其本身不在threejs的基礎(chǔ)庫(kù)里面，其位于threejs—examples—jsm—controls文件夾下面，我們?cè)谏弦还?jié)引入threeJS的下面添加如下代碼進(jìn)行引入
"three/addons/": "../../three.js/examples/jsm/"
完整代碼如下
<script type="importmap">
{
"imports":{
"three":"../../three.js/build/three.module.js",
"three/addons/": "../../three.js/examples/jsm/"
}
}
</script>
2.在index.js中使用導(dǎo)入OrbitControls
// 引入軌道控制器擴(kuò)展庫(kù)OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
3.創(chuàng)建一個(gè)軌道控制器對(duì)象
// 設(shè)置相機(jī)控件軌道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)
軌道控制器對(duì)象里面有兩個(gè)參數(shù)，第一個(gè)是你要控制的是哪一個(gè)相機(jī)，第二個(gè)是用于事件監(jiān)聽(tīng)的HTML元素，也就是你要控制的范圍。
4.相機(jī)設(shè)置完成后，我們運(yùn)行瀏覽器，點(diǎn)擊鼠標(biāo)控制物體發(fā)現(xiàn)物體依然沒(méi)有旋轉(zhuǎn)，這是因?yàn)槲覀冸m然用鼠標(biāo)控制物體旋轉(zhuǎn)了，但是我們的畫(huà)布沒(méi)有重新渲染導(dǎo)致的，我們前面提到過(guò)，要想將場(chǎng)景中物體展示到容器中，需要用渲染器進(jìn)行渲染后展示，所以，我們還需要通過(guò)監(jiān)聽(tīng)事件來(lái)監(jiān)聽(tīng)OrbitControls的change事件，在監(jiān)聽(tīng)到OrbitControls的change事件改變時(shí)，我們重新渲染場(chǎng)景就可以了
// 監(jiān)聽(tīng)軌道控制器的change事件，監(jiān)聽(tīng)到改變時(shí)，重新執(zhí)行渲染操作渲染三維場(chǎng)景
controls.addEventListener('change',function(){
renderer.render(scene,camera)
})
現(xiàn)在我們通過(guò)鼠標(biāo)來(lái)控制物體放大縮小、旋轉(zhuǎn)移動(dòng)都可以了。
附上完整代碼如下
index.html的代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-680460.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#webgl {
width: 400px;
height: 300px;
margin: 0 auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="webgl" ></div>
<script type="importmap">
{
"imports":{
"three":"../../three.js/build/three.module.js",
"three/addons/": "../../three.js/examples/jsm/"
}
}
</script>
<script type="module" src="./index.js">
</script>
</body>
</html>
index.js的代碼如下文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-680460.html
import * as THREE from 'three'
// 引入軌道控制器擴(kuò)展庫(kù)OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 創(chuàng)建一個(gè)三維場(chǎng)景，相當(dāng)于一個(gè)畫(huà)布
const scene = new THREE.Scene()
// 創(chuàng)建一個(gè)幾何體，相當(dāng)于在畫(huà)布上想要呈現(xiàn)的物體
const geometry = new THREE.BoxGeometry(50,50,50)
// 創(chuàng)建材質(zhì)，相當(dāng)于畫(huà)畫(huà)時(shí)的顏料
const material = new THREE.MeshBasicMaterial({
color:0xff0000,//設(shè)置顏色
transparent:true,//開(kāi)啟透明
opacity:0.5//設(shè)置透明度
})
// 添加輔助坐標(biāo)軸
// const axeshelper = new THREE.AxesHelper(100)
// scene.add(axeshelper)
// 創(chuàng)建物體,相當(dāng)于在畫(huà)物體的過(guò)程，將上面的幾何體和材質(zhì)結(jié)合起來(lái)形成物體
const mesh = new THREE.Mesh(geometry,material)
// 設(shè)置物體在場(chǎng)景中的位置
mesh.position.set(0,10,0)
// 將物體添加到場(chǎng)景中，相當(dāng)于將物體添加到畫(huà)布匯總
scene.add(mesh)
// console.log(mesh);
// 創(chuàng)建一個(gè)相機(jī)，相機(jī)相當(dāng)于畫(huà)家的眼睛，
// PerspectiveCamera 透視相機(jī)：有四個(gè)參數(shù)，fov：視角，aspect:寬高比，一般定位為相機(jī)照射物體的寬高比值，
// near：近端點(diǎn)，離相機(jī)最近的點(diǎn)，far：遠(yuǎn)端點(diǎn)，離相機(jī)最遠(yuǎn)的點(diǎn)
const width = 400
const height = 300
const camera = new THREE.PerspectiveCamera(30,width/height,0.1,3000)
// 設(shè)置相機(jī)的位置，即畫(huà)家的眼睛離畫(huà)布的位置
camera.position.set(200,200,200)
// 設(shè)置相機(jī)要看的位置，即眼睛要看的物體的位置
// 相機(jī)看原點(diǎn)
// camera.lookAt(0,0,0)
// 相機(jī)看向物體
camera.lookAt(mesh.position)
// 創(chuàng)建webgl渲染器
const renderer = new THREE.WebGLRenderer()
// canvas畫(huà)布寬高
renderer.setSize(width,height)
// 執(zhí)行渲染操作，將scene和camera關(guān)聯(lián)起來(lái)，
// 相當(dāng)于太陽(yáng)，你有一個(gè)空間scene，空間中有物體，有人的眼睛camera，但是沒(méi)有光是看不到物體的
renderer.render(scene,camera)
// 把渲染結(jié)果canvas畫(huà)布，添加到網(wǎng)頁(yè)上
// document.body.appendChild(renderer.domElement)
document.getElementById('webgl').appendChild(renderer.domElement)
// 設(shè)置相機(jī)控件軌道控制器OrbitControls
const controls = new OrbitControls(camera,renderer.domElement)
// 監(jiān)聽(tīng)軌道控制器的change事件，監(jiān)聽(tīng)到改變時(shí)，重新執(zhí)行渲染操作渲染三維場(chǎng)景
controls.addEventListener('change',function(){
renderer.render(scene,camera)
})
到了這里，關(guān)于Threejs入門(mén)之三:讓物體跟隨鼠標(biāo)動(dòng)起來(lái)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
