three.js场景的背景旋转主体不动

方法一 创建两个THREE对象分层控制

两个DIV,创建两个THREE对象,完全弄出两套

divBG,绑定创建THREE对象1,在场景中添加背景图片,设置controls的自动旋转,关键代码如下:

initScene () {
  // 场景作为一个容器
  scene = new THREE.Scene()
  let urls = ['dark-s_px.jpg', 'dark-s_nx.jpg', 'dark-s_py.jpg', 'dark-s_ny.jpg', 'dark-s_pz.jpg', 'dark-s_nz.jpg']
  let loader = new THREE.CubeTextureLoader()
  loader.setPath('/static/three/MilkyWay/')
  let background = loader.load(urls)
  scene.background = background
},
initControls () {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.autoRotate = true // 是否自动旋转
  controls.autoRotateSpeed = 1.0 // 自动旋转的速度,默认值是 2.0,即渲染满60帧的情况下30秒旋转360度。
},

注意camera

你可能感兴趣的:(threejs)