方法一创建两个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、renderer等绑定的是divBG对应的dom。
divZT，绑定创建THREE对象2，场景不要设置背景，直接加载主体不需要转动的部分。
在此不赘述，重点在方法二。

方法二场景旋转主体逆向旋转

全部绑定在一个DIV上实现，创建一个THREE对象，给其最外层场景设置背景，同时设置controls.autoRotate的自动旋转。此时，整个场景里的对象都会旋转起来，为了让主体部分保持不动，只需设置主体部分进行逆向旋转即可。
关键步骤如下：

1、创建DIV

<div id="divOne"></div>
divOne = document.getElementById('divOne')

2、创建外层场景并添加背景图片，创建子场景放置不旋转的对象

// 场景
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// 创建一个groupNoRotate不随着场景旋转而旋转groupNoRotate = new THREE.Group()scene.add(groupNoRotate)
},

3、添加灯光至外层场景，跟随背景旋转

// 灯光
initLight () {let ambientLight = new THREE.AmbientLight(0xffffff) // 环境光let directionalLight = new THREE.DirectionalLight(0xffffff, 0.1) // 平行光directionalLight.position.set(5, 10, 5)let pointLight = new THREE.PointLight(0xffffff) // 点光源pointLight.position.set(30, 10, 10)// 将光源加入场景 因为加入scene而不是groupNoRotate 所以光源也会自动转动scene.add(ambientLight)scene.add(directionalLight)scene.add(pointLight)
},

4、设置控制器的自动旋转及自动旋转速度

// 控制器
initControls () {controls = new OrbitControls(camera, renderer.domElement)……controls.autoRotate = true // 是否自动旋转controls.autoRotateSpeed = 1.0 // 自动旋转的速度，默认值是 2.0，即渲染满60帧的情况下30秒旋转360度。……
},

5、加载模型至内层场景groupNoRotate

// 模型加载
initModel () {// 实例化加载器let loader = new GLTFLoader()loader.load('/static/three/model/line.glb', function (obj) {if (groupNoRotate !== null) {groupNoRotate.add(obj.scene) // 此处需将模型加载到groupNoRotate中一同控制groupNoRotate逆旋转}console.log('loaded')}, function (xhr) {console.log(xhr.loaded, 'loading')}, function (error) {console.error(error, 'load error!')})
},

6、场景动画，将内层场景y轴旋转设置为逆向旋转

// 场景动画
animate () {// 控制groupNoRotate里面的所有对象一起逆向旋转，场景在自动旋转，所以表现为不旋转if (groupNoRotate !== null) {groupNoRotate.rotation.y = groupNoRotate.rotation.y - Math.PI / (30 * 60)}controls.update()renderer.render(scene, camera)stop = requestAnimationFrame(this.animate)
},

关键点

自动旋转的速度controls.autoRotateSpeed要和逆向旋转的角度groupNoRotate.rotation.y相抵消！！！

controls.autoRotateSpeed = 1.0 // 自动旋转的速度，默认值是 2.0，即渲染满60帧的情况下30秒旋转360度。
groupNoRotate.rotation.y = groupNoRotate.rotation.y - Math.PI / (30 * 60)

经测试发现，groupNoRotate.rotation.y每次的减幅应该是Math.PI / (30 * 60) * autoRotateSpeed。
即

controls.autoRotateSpeed = k
groupNoRotate.rotation.y = groupNoRotate.rotation.y - Math.PI * k / (30 * 60)

为什么呢？我不知道瞎蒙的试了几次中了，求解…………

效果截图

明显能看出背景在转动，而主体部分（蓝色线）保持不动。

three.js场景的背景旋转主体不动相关推荐

在平面设计中，怎样利用背景让主体明显
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享在平面设计中,怎样利用背景让主体明显?在平面设计中主体与背景就像是主角与配角的关系,可以说一部好的电影一定是主角与配 ...
html 特效背景旋转圆点 js特效
韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha html 特效背景旋转圆点 js特效阿里云的页面 2018杭州·云栖大会_抢票中 ...
threejs 加载两个场景_three.js 场景切换
用6个面组成的立方体作为场景图,发现会出现变形的现象,css3DRenderer 不会变形,但是不方便增加文字,最后采用scene的背景作为场景,背景是用cubeTextureLoader()加载的. ...
js添加网页水印和three.js场景中加水印
我们在日常网页开发的时候,可能想给自己的网页或者canvas里面添加水印,增添个人标记,我这里分为普通静态html页面和threejs中3d场景里面添加水印功能. 一静态html页面添加水印你只需 ...
微信小程序多音频场景处理 - 背景音频
微信小程序多音频场景处理 - 背景音频提到音频播放控制,不得不提背景音频这个方法wx.getBackgroundAudioManager 很不幸,这个有坑.当使用场景为单音频播放或者不需要记录每个音 ...
vue js樱花飘落背景特效
vue js樱花飘落背景特效先上效果图下载js文件:链接或直接保存源码 var stop, staticx; var img = new Image(); img.src = "dat ...
html怎么让视频背景固定不动,视频如何做到背景不动人物动的效果？背景动人物不动的视频...
今天是需要补班的周六哦,虽然是上第五天班,但总感觉就应该是周六啊,早上都睡到不肯起床,哈哈,但是还是要好好工作的.所以小编现在要来给大家介绍一下今天的教程方案啦.背景动而人物不动的视频,不知道大家平时 ...
js设置css色相旋转_色相旋转颜色方案是否保留了对色盲友好的能力？
js设置css色相旋转 Hue rotation is often an easy way to change the appearance of a plot or figure without t ...
krpano360全景教程 - 全景场景实现自动旋转及循环浏览全部场景
krpano360全景教程 - 全景场景实现自动旋转及循环浏览全部场景 <autorotate enabled="true" waittime="1" s ...

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

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

方法二场景旋转主体逆向旋转

1、创建DIV

2、创建外层场景并添加背景图片，创建子场景放置不旋转的对象

3、添加灯光至外层场景，跟随背景旋转

4、设置控制器的自动旋转及自动旋转速度

5、加载模型至内层场景groupNoRotate

6、场景动画，将内层场景y轴旋转设置为逆向旋转

关键点

效果截图

three.js场景的背景旋转主体不动相关推荐

最新文章

热门文章

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

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

方法二 场景旋转主体逆向旋转

1、创建DIV

2、创建外层场景并添加背景图片，创建子场景放置不旋转的对象

3、添加灯光至外层场景，跟随背景旋转

4、设置控制器的自动旋转及自动旋转速度

5、加载模型至内层场景groupNoRotate

6、场景动画，将内层场景y轴旋转设置为逆向旋转

关键点

效果截图

three.js场景的背景旋转主体不动相关推荐

最新文章

热门文章

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

方法二场景旋转主体逆向旋转