threejs+html 实现仿3D地球旋转效果
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#chart_map {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* border: 1px solid red; */
}
</style>
</head>
<body>
<div id="chart_map"></div>
<!-- 引入Three.js库 -->
<script src="https://cdn.jsdelivr.net/npm/three@0.137/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.137/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.137/examples/js/loaders/STLLoader.js"></script>
<script>
// 创建场景对象Scene
var scene = new THREE.Scene();
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
// var axisHelper = new THREE.AxesHelper(250);
// scene.add(axisHelper);
// 相机设置
const width = document.querySelector("#chart_map").offsetWidth;
const height = document.querySelector("#chart_map").offsetHeight;
var k = width / height; //窗口宽高比
var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
// 创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 100, 300); // 设置相机位置
camera.lookAt(scene.position); // 设置相机方向(指向的场景对象)
// 创建渲染器对象
var renderer = new THREE.WebGLRenderer({ alpha: true }); // 启用透明
renderer.setSize(width, height); // 设置渲染区域尺寸
document.querySelector("#chart_map").appendChild(renderer.domElement);
// 初始化OrbitControls
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 是否开启阻尼效果
controls.dampingFactor = 0.05; // 阻尼(慢镜头)因子
controls.screenSpacePanning = false; // 是否开启屏幕空间平移
controls.rotateSpeed = 0.5; // 旋转速度
controls.zoomSpeed = 0.5; // 缩放速度
controls.minDistance = 100; // 最小距离
controls.maxDistance = 500; // 最大距离
controls.maxPolarAngle = Math.PI / 2; // 限制仰角
// 加载纹理图片
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('http://t13.baidu.com/it/u=699432127,542290912&fm=224&app=112&f=JPEG?w=500&h=500');
// 创建一个球体几何体
var geometry = new THREE.SphereGeometry(50, 32, 32); // 半径为50，宽度分段数为32，高度分段数为32
// 创建一个材质，并将纹理应用到材质上
var material = new THREE.MeshBasicMaterial({ map: texture });
// 将材质应用到球体几何体上，创建一个网格对象
var sphere = new THREE.Mesh(geometry, material);
// 将网格对象添加到场景中
scene.add(sphere);
// 渲染函数
function render() {
// 更新球体的旋转角度
sphere.rotateY(0.01); // 每次调用时绕y轴旋转0.01弧度
// 执行渲染操作
renderer.render(scene, camera);
// 更新控制器
controls.update();
// 请求下一帧动画
requestAnimationFrame(render);
}
// 启动动画循环
render();
</script>
</body>
</html>原文地址：https://blog.csdn.net/qq_43770056/article/details/145160939
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！