下面是一个使用HTML、CSS和JavaScript(Three.js库)实现的3D球体图片展示代码，图片会贴图到球体表面，可以自动旋转，也支持鼠标拖动旋转。
1、3D球体图片展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D球体图片展示</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
canvas {
display: block;
}
#info {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
color: white;
font-family: Arial, sans-serif;
pointer-events: none;
}
</style>
</head>
<body>
<div id="info">拖动鼠标旋转球体 | 滚动鼠标缩放</div>
<!-- 引入Three.js库 -->
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
// 添加环境光和方向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 创建球体
const geometry = new THREE.SphereGeometry(5, 64, 64);
// 加载纹理
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg', () => {
// const texture = textureLoader.load('https://pic4.zhimg.com/v2-a0147d5f02e91239fb86df1950da9d67_r.jpg', () => {
// 纹理加载完成后开始动画
animate();
});
const material = new THREE.MeshPhongMaterial({
map: texture,
specular: new THREE.Color(0x333333),
shininess: 5
});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
// 设置相机位置
camera.position.z = 10;
// 添加轨道控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.minDistance = 5;
controls.maxDistance = 20;
// 自动旋转设置
let autoRotate = true;
let autoRotateSpeed = 0.5;
// 窗口大小调整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// 点击切换自动旋转
window.addEventListener('click', () => {
autoRotate = !autoRotate;
controls.autoRotate = autoRotate;
});
// 动画循环
function animate() {
requestAnimationFrame(animate);
if (autoRotate) {
sphere.rotation.y += 0.002 * autoRotateSpeed;
}
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
2、高清世界地图3D地球（大气层遮雾）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高清世界地图3D地球</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
<script>
// 初始化
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 使用高清世界地图
const texture = new THREE.TextureLoader().load(
'https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg',
function() {
const geometry = new THREE.SphereGeometry(5, 64, 64);
const material = new THREE.MeshBasicMaterial({ map: texture });
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);
// 添加云层效果(可选)
const cloudTexture = new THREE.TextureLoader().load(
'https://threejs.org/examples/textures/planets/earth_clouds_1024.png'
);
const cloudMaterial = new THREE.MeshPhongMaterial({
map: cloudTexture,
transparent: true,
opacity: 0.4
});
const clouds = new THREE.Mesh(
new THREE.SphereGeometry(5.1, 64, 64),
cloudMaterial
);
scene.add(clouds);
}
);
// 光源
const ambientLight = new THREE.AmbientLight(0x333333);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5,3,5);
scene.add(directionalLight);
// 控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
camera.position.z = 8;
// 动画循环
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
// 响应式调整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
</script>
</body>
</html>
3、引入工具类
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
