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

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

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 `THREE.OrbitControls` 来实现场景旋转。这个控制器可以让你用鼠标或触摸来旋转、缩放和平移场景。 以下是一个简单的例子,展示如何使用 `OrbitControls` 来旋转场景: ```javascript var camera, scene, renderer, controls; init(); animate(); function init() { // 创建相机 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建场景 scene = new THREE.Scene(); // 创建一个立方体 var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 创建渲染器 renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建控制器 controls = new THREE.OrbitControls(camera, renderer.domElement); } function animate() { requestAnimationFrame(animate); // 更新控制器 controls.update(); // 渲染场景 renderer.render(scene, camera); } ``` 在这个例子中,我们创建了一个相机、一个场景和一个立方体。然后,我们创建了一个 `OrbitControls` 控制器,并将它绑定到相机和渲染器上。最后,我们在动画循环中更新控制器,并渲染场景。 你可以通过鼠标左键拖动来旋转场景,中键缩放,右键平移。你还可以通过设置控制器的属性来调整其行为。例如,你可以将 `controls.rotateSpeed` 属性设置为一个更高的值来加快旋转速度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值