pthreejs获取鼠标点击的三维 位置

three.js是一款用于创建WebGL渲染的JavaScript库，它可以在浏览器中实现动态的、交互式的三维图形。

要获取鼠标点击的三维位置，可以遵循以下步骤：

1. 创建一个three.js场景。

2. 创建一个相机，并将其放置在合适的位置和方向，以便你可以从正确的角度观察场景。

3. 创建一个WebGL渲染器，将其连接到你想要显示场景的HTML元素上。

4. 创建一个射线投射器(raycaster)对象，并根据相机和鼠标点击的位置来定义射线。

5. 使用射线投射器来检测与场景中的物体的交互。

6. 如果射线与物体相交，则可以获取交点的坐标，从而得到三维位置。

下面是一个示例代码来实现上述过程：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个立方体作为示例物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建一个射线投射器
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// 监听鼠标点击事件
function onMouseClick(event) {
    // 将鼠标点击位置转换为标准化设备坐标
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 通过相机和鼠标点击位置定义射线
    raycaster.setFromCamera(mouse, camera);

    // 计算射线与物体的相交情况
    var intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
        // 获取交点的坐标
        console.log(intersects[0].point);
    }
}

// 将鼠标点击事件监听绑定到dom元素上
document.addEventListener('click', onMouseClick, false);

// 渲染场景
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

在这个示例中，我们创建了一个立方体物体，并通过监听鼠标点击事件来获取点击位置的三维坐标。射线投射器检测到射线与物体的相交情况，如果有交点存在，我们就输出交点的坐标。

希望上述解答对您有帮助！