Issue with scene rotation in three js

问题

I try to rotate a scene with children dynamically. everything works fine, but when I pan the camera and rotate scene, the pivot point from the orbit control breaks and pan works not correctly. The main idea is to create the illusion of hdr rotation around objects. Sorry for my english, its really hard to describe, hope you understand my mind.

Here a small codepen example

var container = document.getElementById('three');
var width = container.offsetWidth;
var height = container.offsetHeight;
var range = document.getElementById('r');
var sceneChildren = new THREE.Group();
var rotationY = 0;
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true});
renderer.setSize(width, height);
container.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.rotation.y = Math.PI * 45 / 180;


var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 160;
camera.position.z = 400;
camera.lookAt(cube.position);

sceneChildren.add(cube, camera);
scene.add(sceneChildren)

var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0xf3f3f3f3, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

var pointLight = new THREE.PointLight(0xff33fff);
pointLight.position.set(0, 300, 200);


var pointLight2 = new THREE.PointLight(0xffffff);
pointLight2.position.set(0, -300, 200);

scene.add(pointLight, pointLight2);

var clock = new THREE.Clock;

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;

range.addEventListener('input', (e) => {
  rotationY = e.target.value
})

function render() {
        requestAnimationFrame(render);
        sceneChildren.rotation.y = rotationY;
        controls.update();
        renderer.render(scene, camera);
}

render();

#three {
        height: 500px;
        width: 500px;
}
#r {
  z-index: 99999;
  float: left;
  background: red;
}

<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.101.1/examples/js/controls/OrbitControls.js"></script>
Rotate scene children <input type="range" min="0" max="60" step="0.01" id="r">
<div id="three"></div>

---update---

Steps to display the problem: 1. Rotate scene children via range input 2. Pan camera via right click of your mouse (pivot point breaks down at this step) 3. Rotate scene children again (you can see that the camera no longer rotates with the cube)

来源：https://stackoverflow.com/questions/60616242/issue-with-scene-rotation-in-three-js

标签

javascript

three.js