var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

function onMouseMove(event) {
 // 計(jì)算鼠標(biāo)所在位置的設(shè)備坐標(biāo)
 // 三個(gè)坐標(biāo)分量都是-1到1
 mouse.x = event.clientX / window.innerWidth * 2 - 1;
 mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

function pick() {
 // 使用相機(jī)和鼠標(biāo)位置更新選取光線
 raycaster.setFromCamera(mouse, camera);

 // 計(jì)算與選取光線相交的物體
 var intersects = raycaster.intersectObjects(scene.children);
}

let maxHexColor = 1;

// 更換選取材質(zhì)
scene.traverseVisible(n => {
 if (!(n instanceof THREE.Mesh)) {
 return;
 }
 n.oldMaterial = n.material;
 if (n.pickMaterial) { // 已經(jīng)創(chuàng)建過(guò)選取材質(zhì)了
 n.material = n.pickMaterial;
 return;
 }
 let material = new THREE.ShaderMaterial({
 vertexShader: PickVertexShader,
 fragmentShader: PickFragmentShader,
 uniforms: {
  pickColor: {
  value: new THREE.Color(maxHexColor)
  }
 }
 });
 n.pickColor = maxHexColor;
 maxHexColor++;
 n.material = n.pickMaterial = material;
});

let renderTarget = new THREE.WebGLRenderTarget(width, height);
let pixel = new Uint8Array(4);

// 繪制并讀取像素
renderer.setRenderTarget(renderTarget);
renderer.clear();
renderer.render(scene, camera);
renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel); // 讀取鼠標(biāo)所在位置顏色

// 還原原來(lái)材質(zhì)，并獲取選中物體
const currentColor = pixel[0] * 0xffff + pixel[1] * 0xff + pixel[2];

let selected = null;

scene.traverseVisible(n => {
 if (!(n instanceof THREE.Mesh)) {
 return;
 }
 if (n.pickMaterial && n.pickColor === currentColor) { // 顏色相同
 selected = n; // 鼠標(biāo)所在位置的物體
 }
 if (n.oldMaterial) {
 n.material = n.oldMaterial;
 delete n.oldMaterial;
 }
});

const depthMaterial = new THREE.ShaderMaterial({
 vertexShader: DepthVertexShader,
 fragmentShader: DepthFragmentShader,
 uniforms: {
 far: {
  value: camera.far
 }
 }
});

precision highp float;

uniform float far;

varying float depth;

void main() {
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 depth = gl_Position.z / far;
}

precision highp float;

varying float depth;

void main() {
 float hex = abs(depth) * 16777215.0; // 0xffffff

 float r = floor(hex / 65535.0);
 float g = floor((hex - r * 65535.0) / 255.0);
 float b = floor(hex - r * 65535.0 - g * 255.0);
 float a = sign(depth) >= 0.0 ? 1.0 : 0.0; // depth大于等于0，為1.0；小于0，為0.0。

 gl_FragColor = vec4(r / 255.0, g / 255.0, b / 255.0, a);
}

let renderTarget = new THREE.WebGLRenderTarget(width, height);
let pixel = new Uint8Array(4);

scene.overrideMaterial = this.depthMaterial;

renderer.setRenderTarget(renderTarget);

renderer.clear();
renderer.render(scene, camera);
renderer.readRenderTargetPixels(renderTarget, offsetX, height - offsetY, 1, 1, pixel);

if (pixel[2] !== 0 || pixel[1] !== 0 || pixel[0] !== 0) {
 let hex = (this.pixel[0] * 65535 + this.pixel[1] * 255 + this.pixel[2]) / 0xffffff;

 if (this.pixel[3] === 0) {
  hex = -hex;
 }

 cameraDepth = -hex * camera.far; // 相機(jī)坐標(biāo)系中鼠標(biāo)所在點(diǎn)的深度（注意：相機(jī)坐標(biāo)系中的深度值為負(fù)值）
}

let nearPosition = new THREE.Vector3(); // 鼠標(biāo)屏幕位置在near處的相機(jī)坐標(biāo)系中的坐標(biāo)
let farPosition = new THREE.Vector3(); // 鼠標(biāo)屏幕位置在far處的相機(jī)坐標(biāo)系中的坐標(biāo)
let world = new THREE.Vector3(); // 通過(guò)插值計(jì)算世界坐標(biāo)

// 設(shè)備坐標(biāo)
const deviceX = this.offsetX / width * 2 - 1;
const deviceY = - this.offsetY / height * 2 + 1;

// 近點(diǎn)
nearPosition.set(deviceX, deviceY, 1); // 屏幕坐標(biāo)系：(0, 0, 1)
nearPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機(jī)坐標(biāo)系：(0, 0, -far)

// 遠(yuǎn)點(diǎn)
farPosition.set(deviceX, deviceY, -1); // 屏幕坐標(biāo)系：(0, 0, -1)
farPosition.applyMatrix4(camera.projectionMatrixInverse); // 相機(jī)坐標(biāo)系：(0, 0, -near)

// 在相機(jī)空間，根據(jù)深度，按比例計(jì)算出相機(jī)空間x和y值。
const t = (cameraDepth - nearPosition.z) / (farPosition.z - nearPosition.z);

// 將交點(diǎn)從相機(jī)空間中的坐標(biāo)，轉(zhuǎn)換到世界坐標(biāo)系坐標(biāo)。
world.set(
 nearPosition.x + (farPosition.x - nearPosition.x) * t,
 nearPosition.y + (farPosition.y - nearPosition.y) * t,
 cameraDepth
);
world.applyMatrix4(camera.matrixWorld);