使用Three.js绘制3D散点图呈2D效果，求相机精准定位方案

我懂你的烦恼——明明写的是3D散点图，结果看起来跟平面似的，核心问题确实出在相机位置的设置上。你的散点数据范围大概是：x轴5-23，y轴2-20，z轴10-19，而当前相机位置(20,10,90)太靠z轴正方向，距离散点群过远，再加上x、y方向的偏移量不足，导致透视效果被严重压缩，看起来就像2D平面了。

下面是调整后的完整代码，主要做了两处关键优化：

1. 重新设置相机位置，从斜上方角度观察散点群，直接强化3D空间感
2. 添加轨道控制器，支持鼠标拖拽旋转、滚轮缩放，方便你自由调整视角查看3D效果

<!DOCTYPE html>
<html>
<head>
    <style>
        html, body {margin: 0; padding: 0;overflow: hidden;}
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.117.1/examples/js/controls/OrbitControls.js"></script>
    <script>
        let scene,camera,renderer,axes;
        let set = [];
        let createGeometry = function() {
            set.push(new THREE.Vector3(5,5,10) );
            set.push(new THREE.Vector3(10,15,17));
            set.push(new THREE.Vector3(15,20,12));
            set.push(new THREE.Vector3(20,16,10));
            set.push(new THREE.Vector3(17,9,19));
            set.push(new THREE.Vector3(23,2,13));
            let setgeometry = new THREE.BufferGeometry().setFromPoints(set);
            let setmaterial = new THREE.PointsMaterial({ color : 0xff0000 , size : 10 ,sizeAttenuation : false});
            let plot = new THREE.Points( setgeometry , setmaterial );
            scene.add(plot);
        }
        let init = function(){
            scene = new THREE.Scene;
            scene.background = new THREE.Color(0x000000);
            camera = new THREE.PerspectiveCamera(25 , window.innerWidth/window.innerHeight , 1 , 1000);
            // 调整相机到散点群的斜上方位置
            camera.position.set(50, 30, 50);
            // 让相机精准对准散点群的中心（计算大致中心点：x=(5+23)/2=14, y=(2+20)/2=11, z=(10+19)/2=14.5）
            camera.lookAt(14, 11, 14.5);
            let axes =new THREE.AxesHelper(25);
            scene.add(axes);
            createGeometry();
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            
            // 添加轨道控制器，支持交互调整视角
            const controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true; // 开启阻尼效果，让视角旋转更平滑
        };
        let mainloop = function(){
            renderer.render(scene , camera);
            requestAnimationFrame(mainloop);
        };
        init();
        mainloop();
    </script>
</body>
</html>

关键调整说明： #

• 相机位置优化：把相机移到(50,30,50)，这个位置在散点群的斜上方，既能清晰展现x、y、z三个轴的空间差异，又不会因为距离过远导致透视效果消失。配合camera.lookAt()让相机精准对准散点中心，确保画面始终聚焦在数据上。
• 轨道控制器：添加后你可以用鼠标拖拽旋转视角、滚轮缩放，能从任意角度观察3D散点，彻底解决2D视觉的问题。

如果想进一步强化透视效果，还可以把PerspectiveCamera的视场角从25调整到45左右——视场角越大，透视变形会越明显，但注意不要设置过大，避免画面失真。

内容的提问来源于stack exchange，提问作者vaidehi dhawale