HTML5代碼大全3D地球
HTML5是一種新一代的網頁標準語言，可以支持多種媒體和多種設備上的網絡應用程序。3D地球是HTML5中的一個重要應用，可以讓用戶在瀏覽器中體驗到仿佛置身于地球上的感覺。
<!DOCTYPE html>
<html>
<head>
<title>3D地球</title>
<meta charset="utf-8">
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/Detector.js"></script>
<script>
//創建場景
var scene = new THREE.Scene();
//相機設置
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
//定義渲染器
var renderer = new THREE.WebGLRenderer();
//設置窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);
//光照設置
var ambientLight = new THREE.AmbientLight(0x888888);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 1, 0);
camera.add(pointLight);
scene.add(camera);
//材質設置
var earthMap = new THREE.ImageUtils.loadTexture('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg');
var bumpMap = new THREE.ImageUtils.loadTexture('https://threejs.org/examples/textures/earthbump1k.jpg');
var material = new THREE.MeshPhongMaterial({
map: earthMap,
bumpMap: bumpMap,
bumpScale: 0.05
});
//球體設置
var geometry = new THREE.SphereGeometry(25, 32, 32);
var earthMesh = new THREE.Mesh(geometry, material);
scene.add(earthMesh);
//控制器設置
var orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.autoRotate = true;
orbitControls.autoRotateSpeed = 0.5;
//性能監測
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0';
stats.domElement.style.top = '0';
document.body.appendChild(stats.domElement);
//繪制函數
function render() {
stats.begin();
orbitControls.update();
renderer.render(scene, camera);
stats.end();
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>以上就是HTML5代碼大全3D地球的相關代碼，通過HTML5和Three.js，我們可以輕松創建出一個逼真的3D地球，讓用戶在瀏覽器上也能夠探索旅途的奧秘。
上一篇旋轉圓圈css