方法一 创建两个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