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

最新推荐文章于 2024-04-04 16:26:29 发布

Beam007

最新推荐文章于 2024-04-04 16:26:29 发布

阅读量3.4k

点赞数 2

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/103601575

版权

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

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

<div id="divBG"></div>
<div id="divZT"></div>

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