ThreeJS 重刷地球配置

环境

• ThreeJS 107版本
• three.min.js
• OrbitControls.js

说明

为满足地球在构造完成以后，需要调整配置（如转速、大小等），其实方法很简单，只要改完参数，重新render渲染即可。地球在创造的时候会不断的执行渲染（因为有自转功能），所以只需更改参数值即可。

解决方案

1. 附上接口代码

this.resetEarth = function (_newEarthOptions) {
if (!_newEarthOptions) {
_newEarthOptions = {};
}

//深空背景
if (_newEarthOptions.imgSky) {
var _imgSky = _newEarthOptions.imgSky ? _newEarthOptions.imgSky : "";
dom.style.background = "url(" + _imgSky + ") no-repeat center center";
dom.style.backgroundColor = "#000000";
}

// 设置相机位置
if (_newEarthOptions.cameraZ) {
camera.position.set(0, 0, _newEarthOptions.cameraZ ? _newEarthOptions.cameraZ : 200);
}

// 定义地球材质
if (_newEarthOptions.imgEarth) {
var newEarthTexture = THREE.ImageUtils.loadTexture(_newEarthOptions.imgEarth ? _newEarthOptions.imgEarth : "404.jpg", {}, function () {
renderer.render(scene, camera);
});
earthBall.material.map = newEarthTexture;
earthBall.material.map.needsUpdate = true;
}
_earthOptions.autorotationSpeed = _newEarthOptions.autorotationSpeed >= 0 ? _newEarthOptions.autorotationSpeed : _earthOptions.autorotationSpeed;
render();
}

2. 这里改动一下参数，然后传入接口

var earthOptions = {
imgEarth: 'assets/images/earth_bg.jpg',//地球贴图
imgSky: 'assets/images/starry_sky_bg.jpg',//深空背景
autorotationSpeed: 0,//自转速度（正数自西向东转，负数为逆向）
cameraZ: 400//摄像头高度,
};
encEarth.resetEarth(earthOptions);

3. 执行渲染

// 执行函数
function render() {
if (handle) {
cancelAnimationFrame(handle);
}
//是否开启了辉光渲染，如开启则开启辉光渲染
if (composer) {
composer.render();
}
//是否开启了热力图，如开启则开启热力图渲染
if (texture) {
texture.needsUpdate = true;
}
renderer.clearDepth();
//自转
scene.rotation.y += _earthOptions.autorotationSpeed ? _earthOptions.autorotationSpeed : 0;
renderer.render(scene, camera);
orbitcontrols.update();
handle = requestAnimationFrame(render);
}