1，介紹
該示例使用的是 r95版本Three.js庫。這裡實作如何使用滑鼠選擇場景中的對象。
效果圖如下：
2，主要說明
我們使用THREE.Projector和THREE.Raycaster來檢測是否使用滑鼠點選了某個對象。當我們在螢幕上點選滑鼠時，會發生如下的事情：
（1）首先，基于螢幕上的點選位置會建立一個THREE.Vecor3向量。
（2）接着，使用vector.unproject方法将螢幕上的點選位置轉換成Three.js場景中的坐标。換句話說，就是将螢幕坐标轉換成三維場景中的坐标。
（3）然後，建立THREE.Raycaster。使用THREE.Raycaster可以向場景中發射光線。在該示例中，從錄影機的位置（camera.position）向場景中滑鼠的點選位置發射光線。
（4）最後，我們使用raycaster.intersectObjects方法來判斷指定的對象中哪些被該光線照射到了。
document.addEventListener('click', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
// 點選螢幕建立一個向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // 将螢幕的坐标轉換成三維場景中的坐标
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(mesh, true);
if (intersects.length > 0) {
intersects[0].object.material.color.set("#ff0000");
}
}
3，源碼
<!DOCTYPE html>
<html>
<head>
<title>Threejs滑鼠點選場景對象擷取對象資訊，Threejs使用Raycaster拾取對象資訊</title>
<script type="text/javascript" src="libs/three.js"></script>
<script type="text/javascript" src="libs/OrbitControls.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="dom"></div>
<script type="text/javascript">
var camera;
var renderer;
var length = 36;
var ws = 2;
var graph = [];
var mesh = [];
function init() {
// 建立一個場景，它将包含我們所有的元素，如物體，相機和燈光。
var scene = new THREE.Scene();
var urls = [
'assets/textures/cubemap/flowers/posx.jpg',
'assets/textures/cubemap/flowers/negx.jpg',
'assets/textures/cubemap/flowers/posy.jpg',
'assets/textures/cubemap/flowers/negy.jpg',
'assets/textures/cubemap/flowers/posz.jpg',
'assets/textures/cubemap/flowers/negz.jpg'
];
var cubeLoader = new THREE.CubeTextureLoader();
scene.background = cubeLoader.load(urls);
// 建立一個錄影機，它定義了我們正在看的地方
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
// 将錄影機對準場景的中心
camera.position.x = 60;
camera.position.y = 35;
camera.position.z = 60;
camera.lookAt(scene.position);
var orbit = new THREE.OrbitControls(camera);
// 建立一個渲染器并設定大小，WebGLRenderer将會使用電腦顯示卡來渲染場景
// initialize basic renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// 将平面添加到場景中
var plane = createPlaneGeometryBasicMaterial();
scene.add(plane);
// 在螢幕上顯示坐标軸
var axes = new THREE.AxesHelper(100);
scene.add(axes);
scene.add(new THREE.AmbientLight(0x666666));
scene.add(new THREE.AmbientLight("#ffffff", 1));
document.getElementById("dom").appendChild(renderer.domElement);
initGround();
initGrid();
// 啟動動畫
renderScene();
// 建立一個地面
function createPlaneGeometryBasicMaterial() {
var textureLoader = new THREE.TextureLoader();
var cubeMaterial = new THREE.MeshStandardMaterial({
map: textureLoader.load("assets/textures/stone/cd.jpg"),
});
cubeMaterial.map.wrapS = THREE.RepeatWrapping;
cubeMaterial.map.wrapT = THREE.RepeatWrapping;
cubeMaterial.map.repeat.set(18, 18)
// 建立地平面并設定大小
var planeGeometry = new THREE.PlaneGeometry(500, 500);
var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
// 設定平面位置并旋轉
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.z = 0;
return plane;
}
// 初始化線路
function initLine(pArr) {
var points = [];
var geometry = new THREE.Geometry();
for (var i = 0; i < pArr.length; i++) {
var randomX = pArr[i].x;
var randomY = pArr[i].y;
var randomZ = pArr[i].z;
var vector = new THREE.Vector3(randomX, randomY, randomZ);
geometry.vertices.push(vector);
points.push(vector);
}
var material = new THREE.LineBasicMaterial({
color: 0x0000FF
});
var line = new THREE.Line(geometry, material);
scene.add(line);
return points;
}
// 繪制路網
function initGround() {
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(length, 0, 0));
for (var i = 0; i <= length / ws; i++) {
var material = new THREE.LineBasicMaterial({
color: 0x808080
});
var line = new THREE.Line(geometry, material);
line.position.z = i * ws;
scene.add(line);
var line = new THREE.Line(geometry, material);
line.position.x = i * ws;
line.position.z = length;
line.rotation.y = 90 * Math.PI / 180;
scene.add(line);
}
}
// 初始化障礙物
function initGrid() {
for (var i = 0; i < length / ws; i++) {
var nodeRow = [];
for (var j = 0; j < length / ws; j++) {
var salt = Math.random() * 7;
if (salt > 2) {
nodeRow.push(1);
} else {
nodeRow.push(0);
}
if (salt <= 2) {
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshBasicMaterial({
color: 0xC0C0C0
}));
let x = ws * j + ws / 2;
let z = ws * i + ws / 2;
cube.position.set(x, 1.2, z);
scene.add(cube);
mesh.push(cube);
}
}
graph.push(nodeRow);
}
}
document.addEventListener('click', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
// 點選螢幕建立一個向量
var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window
.innerHeight) * 2 + 1, 0.5);
vector = vector.unproject(camera); // 将螢幕的坐标轉換成三維場景中的坐标
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(mesh, true);
if (intersects.length > 0) {
intersects[0].object.material.color.set("#ff0000");
}
}
// 動畫渲染
var step = 5;
function renderScene() {
orbit.update();
// 使用requestAnimationFrame函數進行渲染
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
// 渲染的場景
renderer.render(scene, camera);
}
window.onload = init;
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 監聽調整大小事件
window.addEventListener('resize', onResize, false);
</script>
</body>
</html>
需要完整代碼請留言或者聯系我微信：1171053128
![使用vue學習three.js之加載和使用紋理-設定material.bumpMap屬性使用凹凸貼圖建立皺紋1.demo效果2. 實作要點3. demo代碼[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)