下面是一個(gè)使用HTML、CSS和JavaScript(Three.js庫)實(shí)現(xiàn)的3D球體圖片展示代碼，圖片會(huì)貼圖到球體表面，可以自動(dòng)旋轉(zhuǎn)，也支持鼠標(biāo)拖動(dòng)旋轉(zhuǎn)。
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">拖動(dòng)鼠標(biāo)旋轉(zhuǎn)球體 | 滾動(dòng)鼠標(biāo)縮放</div>
<!-- 引入Three.js庫 -->
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script>
// 初始化場(chǎng)景、相機(jī)和渲染器
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);
// 添加環(huán)境光和方向光
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);
// 創(chuàng)建球體
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', () => {
// 紋理加載完成后開始動(dòng)畫
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);
// 設(shè)置相機(jī)位置
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;
// 自動(dòng)旋轉(zhuǎn)設(shè)置
let autoRotate = true;
let autoRotateSpeed = 0.5;
// 窗口大小調(diào)整
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// 點(diǎn)擊切換自動(dòng)旋轉(zhuǎn)
window.addEventListener('click', () => {
autoRotate = !autoRotate;
controls.autoRotate = autoRotate;
});
// 動(dòng)畫循環(huán)
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;
// 動(dòng)畫循環(huán)
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();
// 響應(yīng)式調(diào)整
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>
