ThreeJS全景最小旋转

Question

我想知道这个网站(http://www.cryptarismission.com/)是怎么做的，当你移动鼠标到不同的方向时，它的场景面对不同的方向。

在他们的主页上，似乎当你移动鼠标时，场景会顺畅地跟随非常少量的轴旋转。

这个使用Three.js的东西背后的想法是什么？我知道你可以旋转物体，场景或相机，但我不确定要旋转什么。我在考虑旋转整个场景容器，但我不知道这是否好。

Answer 1

可以根据鼠标位置更改摄影机位置并在每个循环中调用lookAt，也可以更改整个场景旋转。下面是第一种方法的工作原理。

​

<!DOCTYPE html>
<html lang="en">

<head>
    <title>ThreeJS full scene minimal rotation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas></canvas>
</body>

<script>
    var camera, scene, renderer, stats, windowHalfX = window.innerWidth / 2,
        windowHalfY = window.innerHeight / 2,
        mouseX = 0,
        mouseY = 0;

    init();
    animate();

    function init() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
        camera.position.set(30, 30, 30)
        scene = new THREE.Scene();

        scene.add(new THREE.Mesh(
            new THREE.BoxGeometry(5, 5, 5),
            new THREE.MeshBasicMaterial({ color: 0x00ff00 })
        ));

        renderer = new THREE.WebGLRenderer({ antialias: true, canvas: document.querySelector('canvas') });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        window.addEventListener('mousemove', onDocumentMouseMove, false);
    }

    function onDocumentMouseMove(event) {
        mouseX = (event.clientX - windowHalfX) / 10;
        mouseY = (event.clientY - windowHalfY) / 10;
    }

    function animate() {
        requestAnimationFrame(animate);
        render();
    }

    function render() {
        camera.position.x += (mouseX - camera.position.x) * .05;
        camera.position.y += (-mouseY - camera.position.y) * .05;
        camera.lookAt(scene.position);
        renderer.render(scene, camera);
    }
</script>

</html>

​