three提供兩種碰撞檢測
1.【射線檢測【相機(jī)視線內(nèi)是一條直線，這條線觸碰到的物體會(huì)被檢測到】】
========一般可以設(shè)置一下射線發(fā)射的位置 實(shí)時(shí)更新位置會(huì)比較準(zhǔn)=====
let dir = new Vector3(0, 1, 0);
doc.raycaster.set(pos, dir);
//pos是發(fā)射起點(diǎn) dir是另一個(gè)點(diǎn)
========一般可以設(shè)置一下射線發(fā)射的位置 實(shí)時(shí)更新位置會(huì)比較準(zhǔn)=====
let worldScene = new THREE.Scene()
let cameraPos = new THREE.Camera.position();
var raycaster = new THREE.Raycaster();//射線檢測
var mouse = new THREE.Vector2()
raycaster.setFromCamera( mouse, camera );//設(shè)置射線
function onMouseClick(event){
//將鼠標(biāo)點(diǎn)擊位置的屏幕坐標(biāo)轉(zhuǎn)換成threejs中的標(biāo)準(zhǔn)坐標(biāo)
mouse.x = (event.clientX/window.innerWidth)2-1
mouse.y = -((event.clientY/window.innerHeight)2-1)
//console.log("mouse:"+mouse.x+","+mouse.y)
// 通過鼠標(biāo)點(diǎn)的位置和當(dāng)前相機(jī)的矩陣計(jì)算出raycaster
raycaster.setFromCamera( mouse, camera );
// 獲取raycaster直線和所有模型相交的數(shù)組集合
var intersects = raycaster.intersectObjects( worldScene.children,true);
console.log(intersects,"模型集合");
//將所有的相交的模型的顏色設(shè)置為紅色
for ( var i = 0; i < intersects.length; i++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
}
===========================================================================
2.八叉樹檢測
首先要引入
import {Octree} from './jsm/math/Octree.js'
import {Capsule} from './jsm/math/Capsule.js'
可以在https://threejs.org/examples/games_fps.html 這個(gè)地址看例子
let worldOctree = new Octree({
undeferred: true,
depthMax: Infinity,
objectsThreshold: 8,
overlapPct: 0.15
});
let a1 = window.ThreeObj.doc.scene.children[3].position;//一個(gè)元素的Vector3坐標(biāo) （3維坐標(biāo) position）
let a2 = window.ThreeObj.doc.scene.children[4].position;//一個(gè)元素的Vector3坐標(biāo) （3維坐標(biāo) position）
window.ThreeObj.doc.scene.children[4].position.y-=0.02;
const playerCollider2 = new Capsule( a1, a2, 0.0000035 );
console.log("檢測對(duì)象==",playerCollider2)
const result2 = worldOctree.capsuleIntersect( playerCollider2 );
console.log("當(dāng)前場景",result2.depth)
當(dāng)獲取不到result2.depth的值時(shí)候說明碰撞了
