Javascript 我想知道如何使用鼠标围绕由THREE.JS创建的网格的Z轴旋转

我正在实现使用鼠标旋转网格的功能

参考代码链接到站点。 （“”）

我想知道如何使用鼠标绕Z轴（红线）旋转

我发现Three.js中的所有示例都只能绕x轴或y轴旋转

我真的需要帮助

---

我的代码：

CustomOrbit=函数（）{
var EPS=0.000001；
var rotateStart=new THREE.Vector2（）；
var rotateEnd=new THREE.Vector2（）；
var rotateDelta=new THREE.Vector2（）；
var-phiDelta=0；
var thetaDelta=0；
var target=new THREE.Vector3（）；
///垂直环绕的距离、上限和下限。
var minPolarAngle=Math.PI/2；
var maxPolarAngle=Math.PI*0.91；
var onMouseDownPosition=new THREE.Vector2（）；
this.Initialize=函数（）{
renderer.domeElement.addEventListener（'mousedown'，onMouseDown，false）；
}
var onMouseMove=函数（事件）{
event.preventDefault（）；
rotateEnd.set（event.clientX，event.clientY）；
子向量（rotateEnd，rotateStart）；
thetaDelta-=2*Math.PI*rotateDelta.x/renderer.domeElement.clientWidth；
phiDelta-=2*Math.PI*rotateDelta.y/renderer.domElement.clientHeight；
var位置=摄像机位置；
var offset=position.clone（）.sub（目标）；
//从z轴到y轴的角度
varθ=数学atan2（偏移量x，偏移量z）；
θ+=θ德尔塔；
//与y轴的角度
var phi=数学atan2（数学sqrt（offset.x*offset.x+offset.z*offset.z），offset.y）；
φ+=φδ；
phi=Math.max（minPolarAngle，Math.min（maxPolarAngle，phi））；//将phi限制在所需限值之间
phi=Math.max（EPS，Math.min（Math.PI-EPS，phi））；//限制phi在EPS和PI-EPS之间
变量半径=偏移量。长度（）；
radius=Math.max（0，Math.min（无穷大，半径））；//将半径限制在所需限制之间
偏移量x=半径*数学正弦（φ）*数学正弦（θ）；
偏移量y=半径*数学cos（φ）；
偏移量z=半径*数学正弦（φ）*数学余弦（θ）；
位置。复制（目标）。添加（偏移）；
摄像机。注视（目标）；
θ=0；
phiDelta=0；
rotateStart.复制（rotateEnd）；
}
var onMouseUp=函数（事件）{
renderer.domeElement.removeEventListener（'mousemove'，onMouseMove，false）；
renderer.domeElement.removeEventListener（'mouseup'，onMouseUp，false）；
}
var onMouseDown=函数（事件）{
event.preventDefault（）；
向量=新的三个。向量3（0，0，摄像机。近）；
矢量。取消投影（摄像机）；
raycaster=new THREE.raycaster（camera.position，vector.sub（camera.position）.normalize（），camera.near，camera.far）；
相交=光线投射器。相交对象（pickingMesh）；
如果（相交长度>0）{
目标=与[0]相交。点；
rotateStart.set（event.clientX，event.clientY）；
renderer.domeElement.addEventListener（'mousemove'，onMouseMove，false）；
renderer.domeElement.addEventListener（'mouseup'，onMouseUp，false）；
}
}
};
var摄影机、场景、渲染器、pickingMesh、rendWidth=500、rendHeight=500；
init（）；
makeMesh（）；
makeAxis（200）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（{antialas:true，alpha:false}）；
设置大小（500500）；
document.body.appendChild（renderer.doElement）；
摄像机=新的三个透视摄像机（55500/500,0.11000）；
摄像机位置x=200000；
摄像机位置y=400000；
摄像机位置z=300；
摄像机.观察（新的三矢量3（20000400000,0.0））；
}
函数animate（）{
请求动画帧（动画）；
渲染器。渲染（场景、摄影机）；
}
//创建红色方形网格
函数makeMesh（）{
var geometry=new THREE.BufferGeometry（）；
var顶点=新数组([
200000 - 100.0, 400000 - 100.0, 0.0,
200000 + 100.0, 400000 + 100.0, 0.0,
200000 - 100.0, 400000 + 100.0, 0.0,
200000 - 100.0, 400000 - 100.0, 0.0,
200000 + 100.0, 400000 - 100.0, 0.0,
200000 + 100.0, 400000 + 100.0, 0.0
]);
geometry.addAttribute（'position'，新的三个.BufferAttribute（顶点，3））；
var material=new THREE.MeshBasicMaterial（{color:0xff0000，transparent:true，opacity:0.5}）；
material.side=3.DoubleSide；
pickingMesh=新的三个网格（几何体、材质）；
场景.添加（pickingMesh）；
}
函数makeAxis（axisLength）{
var x_axis=new THREE.Geometry（）；x_axis.vertices.push（new THREE.Vector3（200000-axisLength，400000，0），new THREE.Vector3（200000+axisLength，400000，0））；
var y_axis=new THREE.Geometry（）；y_axis.vertices.push（new THREE.Vector3（20000400000-axisLength，0），new THREE.Vector3（20000400000+axisLength，0））；
var z_axis=new THREE.Geometry（）；z_axis.vertices.push（new THREE.Vector3（20000400000，-axisLength），new THREE.Vector3（20000400000，axisLength））；
var x_axis_line=新的三线（x_轴，新的三线基本材质（{linewidth:1，transparent:true，color:0x0000ff}））；
var y_axis_line=新的三线（y_轴，新的三线基本材质（{linewidth:1，transparent:true，color:0x00ff00}））；
var z_axis_line=新的三线（z_轴，新的三线基本材质（{线宽：1，透明：真，颜色
<script type="text/javascript">
    CustomOrbit = function () {
        var EPS = 0.000001;
        var rotateStart = new THREE.Vector2();
        var rotateEnd = new THREE.Vector2();
        var rotateDelta = new THREE.Vector2();

        var phiDelta = 0;
        var thetaDelta = 0;

        var target = new THREE.Vector3();

        /// How far you can orbit vertically, upper and lower limits.
        var minPolarAngle = Math.PI / 2;
        var maxPolarAngle = Math.PI * 0.91;

        var onMouseDownPosition = new THREE.Vector2();

        this.Initialize = function () {
            renderer.domElement.addEventListener('mousedown', onMouseDown, false);
        }

        var onMouseMove = function (event) {
            event.preventDefault();
            rotateEnd.set(event.clientX, event.clientY);
            rotateDelta.subVectors(rotateEnd, rotateStart);

            thetaDelta -= 2 * Math.PI * rotateDelta.x / renderer.domElement.clientWidth;
            phiDelta -= 2 * Math.PI * rotateDelta.y / renderer.domElement.clientHeight;

            var position = camera.position;
            var offset = position.clone().sub(target);

            // angle from z-axis around y-axis          
            var theta = Math.atan2(offset.x, offset.z);
            theta += thetaDelta;

            // angle from y-axis
            var phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.z * offset.z), offset.y);
            phi += phiDelta;
            phi = Math.max(minPolarAngle, Math.min(maxPolarAngle, phi));// restrict phi to be between desired limits
            phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));          // restrict phi to be between EPS and PI-EPS

            var radius = offset.length();
            radius = Math.max(0, Math.min(Infinity, radius)); // restrict radius to be between desired limits

            offset.x = radius * Math.sin(phi) * Math.sin(theta);
            offset.y = radius * Math.cos(phi);
            offset.z = radius * Math.sin(phi) * Math.cos(theta);

            position.copy(target).add(offset);

            camera.lookAt(target);

            thetaDelta = 0;
            phiDelta = 0;

            rotateStart.copy(rotateEnd);
        }
        var onMouseUp = function (event) {
            renderer.domElement.removeEventListener('mousemove', onMouseMove, false);
            renderer.domElement.removeEventListener('mouseup', onMouseUp, false);
        }

        var onMouseDown = function (event) {
            event.preventDefault();

            vector = new THREE.Vector3(0, 0, camera.near);
            vector.unproject(camera);
            raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize(), camera.near, camera.far);
            intersects = raycaster.intersectObject(pickingMesh);

            if (intersects.length > 0) {
                target = intersects[0].point;
                rotateStart.set(event.clientX, event.clientY);

                renderer.domElement.addEventListener('mousemove', onMouseMove, false);
                renderer.domElement.addEventListener('mouseup', onMouseUp, false);
            }
        }
    };
</script>
<script type="text/javascript">
    var camera, scene, renderer, pickingMesh, rendWidth = 500, rendHeight = 500;
    init();
    makeMesh();
    makeAxis(200);
    animate();

    function init() {
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
        renderer.setSize(500, 500);
        document.body.appendChild(renderer.domElement);

        camera = new THREE.PerspectiveCamera(55, 500 / 500, 0.1, 10000);
        camera.position.x = 200000;
        camera.position.y = 400000;
        camera.position.z = 300;
        camera.lookAt(new THREE.Vector3(200000, 400000, 0.0));
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }


    //create red square mesh
    function makeMesh() {
        var geometry = new THREE.BufferGeometry();
        var vertices = new Float32Array([
            200000 - 100.0, 400000 - 100.0, 0.0,
            200000 + 100.0, 400000 + 100.0, 0.0,
            200000 - 100.0, 400000 + 100.0, 0.0,

            200000 - 100.0, 400000 - 100.0, 0.0,
            200000 + 100.0, 400000 - 100.0, 0.0,
            200000 + 100.0, 400000 + 100.0, 0.0
        ]);

        geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
        var material = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
        material.side = THREE.DoubleSide;
        pickingMesh = new THREE.Mesh(geometry, material);

        scene.add(pickingMesh);
    }

    function makeAxis(axisLength) {
        var x_axis = new THREE.Geometry(); x_axis.vertices.push(new THREE.Vector3(200000 - axisLength, 400000, 0), new THREE.Vector3(200000 + axisLength, 400000, 0));
        var y_axis = new THREE.Geometry(); y_axis.vertices.push(new THREE.Vector3(200000, 400000 - axisLength, 0), new THREE.Vector3(200000, 400000 + axisLength, 0));
        var z_axis = new THREE.Geometry(); z_axis.vertices.push(new THREE.Vector3(200000, 400000, -axisLength), new THREE.Vector3(200000, 400000, axisLength));
        var x_axis_line = new THREE.Line(x_axis, new THREE.LineBasicMaterial({ linewidth: 1, transparent: true, color: 0x0000ff }));
        var y_axis_line = new THREE.Line(y_axis, new THREE.LineBasicMaterial({ linewidth: 1, transparent: true, color: 0x00ff00 }));
        var z_axis_line = new THREE.Line(z_axis, new THREE.LineBasicMaterial({ linewidth: 1, transparent: true, color: 0xff0000 }));
        scene.add(x_axis_line);
        scene.add(y_axis_line);
        scene.add(z_axis_line);
    };

    var myOrbit = new CustomOrbit();
    myOrbit.Initialize();
</script>