Javascript 三个js中的场景旋转问题

我尝试动态地旋转带有孩子的场景。一切正常，但当我平移摄影机并旋转场景时，来自“动态观察”控件的轴心点断裂，平移无法正常工作。其主要思想是创建hdr围绕对象旋转的错觉。对不起，我的英语很难形容，希望你能理解我的想法

这是一支小密码笔

var container=document.getElementById（'three'）；
变量宽度=container.offsetWidth；
var高度=容器离地高度；
var range=document.getElementById（'r'）；
var sceneChildren=new THREE.Group（）；
var旋转y=0；
var renderer=new THREE.WebGLRenderer（{antialas:true，alpha:true}）；
设置大小（宽度、高度）；
container.appendChild（renderer.domeElement）；
var scene=new THREE.scene（）；
var立方计量法=新的三个立方计量法（100100100）；
var cubeMaterial=new THREE.MeshLambertMaterial（{color:0xffffff}）；
var cube=新的三网格（立方计量法、立方材料）；
cube.rotation.y=Math.PI*45/180；
var摄像机=新的三视角摄像机（45，宽/高，0.11000）；
摄像机位置y=160；
摄像机位置z=400；
摄像机。注视（立方体。位置）；
场景儿童。添加（立方体、摄影机）；
场景。添加（场景儿童）
var skyboxGeometry=新的三立方测量法（10000,10000,10000）；
var skyboxMaterial=new THREE.MeshBasicMaterial（{color:0xF3，side:THREE.BackSide}）；
var skybox=new THREE.Mesh（skyboxGeometry，skyboxMaterial）；
场景.添加（skybox）；
var pointLight=新的三点光源（0xff33fff）；
点光源位置设置（0，300，200）；
var pointLight2=新的三点光源（0xffffff）；
点光源2.位置设置（0，-300，200）；
添加（点光源，点光源2）；
var时钟=新的三个时钟；
let controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
controls.screenSpacePanning=true；
range.addEventListener（'input'，（e）=>{
旋转Y=e.target.value
})
函数render（）{
请求动画帧（渲染）；
sceneChildren.rotation.y=旋转y；
控件更新（）；
渲染器。渲染（场景、摄影机）；
}
render（）
#三{
高度：500px；
宽度：500px；
}
#r{
z指数：99999；
浮动：左；
背景：红色；
}

旋转场景子对象
我不理解您的问题。当你用滑块改变旋转方向时，立方体会旋转吗？你可能会发现这很有用！不仅立方体应该旋转，相机也应该旋转it@ArkadiyVinkovskiy对不起，我真的不明白这个问题。在这里，您的相机与立方体一起围绕同一点旋转，因此只有当您将相机作为参考点时，灯光才会旋转。@Seblor是的，它是。但尝试在场景旋转后通过鼠标右键单击平移摄影机