环境
- ThreeJS 107版本
- three.min.js
- OrbitControls.js
说明
为满足地球在构造完成以后，需要调整配置（如转速、大小等），其实方法很简单，只要改完参数，重新render渲染即可。地球在创造的时候会不断的执行渲染（因为有自转功能），所以只需更改参数值即可。
解决方案
- 附上接口代码
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();
}
- 这里改动一下参数，然后传入接口
var earthOptions = {
imgEarth: 'assets/images/earth_bg.jpg',//地球贴图
imgSky: 'assets/images/starry_sky_bg.jpg',//深空背景
autorotationSpeed: 0,//自转速度（正数自西向东转，负数为逆向）
cameraZ: 400//摄像头高度,
};
encEarth.resetEarth(earthOptions);
- 执行渲染
// 执行函数
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);
}