three.js使用gpu选取物体并计算交点位置

var raycaster = newTHREE.Raycaster();
var mouse = newTHREE.Vector2();
functiononMouseMove(event) {
    //计算鼠标所在位置的设备坐标
    //三个坐标分量都是-1到1
    mouse.x = event.clientX / window.innerWidth * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
functionpick() {
    //使用相机和鼠标位置更新选取光线
raycaster.setFromCamera(mouse, camera);
    //计算与选取光线相交的物体
    var intersects =raycaster.intersectObjects(scene.children);
}

let maxHexColor = 1;
//更换选取材质
scene.traverseVisible(n =>{
    if (!(n instanceofTHREE.Mesh)) {
        return;
    }
    n.oldMaterial =n.material;
    if (n.pickMaterial) { //已经创建过选取材质了
        n.material =n.pickMaterial;
        return;
    }
    let material = newTHREE.ShaderMaterial({
        vertexShader: PickVertexShader,
        fragmentShader: PickFragmentShader,
        uniforms: {
            pickColor: {
                value: newTHREE.Color(maxHexColor)
            }
        }
    });
    n.pickColor =maxHexColor;
    maxHexColor++;
    n.material = n.pickMaterial =material;
});

voidmain() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

uniform vec3 pickColor;
voidmain() {
    gl_FragColor = vec4(pickColor, 1.0);
}

let renderTarget = newTHREE.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); //读取鼠标所在位置颜色
//还原原来材质，并获取选中物体
const currentColor = pixel[0] * 0xffff + pixel[1] * 0xff + pixel[2];
let selected = null;
scene.traverseVisible(n =>{
    if (!(n instanceofTHREE.Mesh)) {
        return;
    }
    if (n.pickMaterial && n.pickColor === currentColor) { //颜色相同
        selected = n; //鼠标所在位置的物体
}
    if(n.oldMaterial) {
        n.material =n.oldMaterial;
        deleten.oldMaterial;
    }
});

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

let renderTarget = newTHREE.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; //相机坐标系中鼠标所在点的深度（注意：相机坐标系中的深度值为负值）
}

let nearPosition = new THREE.Vector3(); //鼠标屏幕位置在near处的相机坐标系中的坐标
let farPosition = new THREE.Vector3(); //鼠标屏幕位置在far处的相机坐标系中的坐标
let world = new THREE.Vector3(); //通过插值计算世界坐标
//设备坐标
const deviceX = this.offsetX / width * 2 - 1;
const deviceY = - this.offsetY / height * 2 + 1;
//近点
nearPosition.set(deviceX, deviceY, 1); //屏幕坐标系：(0, 0, 1)
nearPosition.applyMatrix4(camera.projectionMatrixInverse); //相机坐标系：(0, 0, -far)
//远点
farPosition.set(deviceX, deviceY, -1); //屏幕坐标系：(0, 0, -1)
farPosition.applyMatrix4(camera.projectionMatrixInverse); //相机坐标系：(0, 0, -near)
//在相机空间，根据深度，按比例计算出相机空间x和y值。
const t = (cameraDepth - nearPosition.z) / (farPosition.z -nearPosition.z);
//将交点从相机空间中的坐标，转换到世界坐标系坐标。
world.set(
    nearPosition.x + (farPosition.x - nearPosition.x) *t,
    nearPosition.y + (farPosition.y - nearPosition.y) *t,
    cameraDepth
);
world.applyMatrix4(camera.matrixWorld);