<!DOCTYPE html>
<html style="width: 100%;height: 100%;">
<head>
<title>12306</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
*{margin: 0px;padding: 0px;}
</style>
</head>
<body>
<div id="container" style="width:100%;height:100vh;position:relative; overflow: hidden;">
</div>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { OrbitControls } from '../js/jsm/controls/OrbitControls.js';
let renderer, camera, scene, light, controls, geometry, material, mesh, stars;
const Dom = document.querySelector( '#container' );
const radius = 5;
const width = Dom.clientWidth, height = Dom.clientHeight;
const group = new THREE.Group();
let globeTextureLoader = new THREE.TextureLoader();
function initRenderer() {
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( width, height );
const containerDom = document.querySelector( '#container' );
containerDom.appendChild( renderer.domElement );
}
function initCamera() {
camera = new THREE.PerspectiveCamera( 45, width / height, 1, 10000 );
camera.position.set( -2, 27, 15.5 );
camera.lookAt( 0, 0, 0 );
camera.up.set(0, 0, 1);
}
function initScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x020924 );
scene.fog = new THREE.Fog( 0x020924, 200, 1000 );
window.scene = scene;
}
function initControls() {
controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.enableZoom = true;
controls.autoRotate = false;
controls.autoRotateSpeed = 2;
controls.enablePan = true;
}
function initLight() {
const ambientLight = new THREE.AmbientLight( 0xcccccc, 1.1 );
scene.add( ambientLight );
let directionalLight = new THREE.DirectionalLight( 0xffffff, 0.2 );
directionalLight.position.set( 1, 0.1, 0 ).normalize();
let directionalLight2 = new THREE.DirectionalLight( 0xff2ffff, 0.2 );
directionalLight2.position.set( 1, 0.1, 0.1 ).normalize();
scene.add( directionalLight );
scene.add( directionalLight2 );
let hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444, 0.2 );
hemiLight.position.set( 0, 1, 0 );
scene.add( hemiLight );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 1, 500, - 20 );
directionalLight.castShadow = true;
directionalLight.shadow.camera.top = 18;
directionalLight.shadow.camera.bottom = - 10;
directionalLight.shadow.camera.left = - 52;
directionalLight.shadow.camera.right = 12;
scene.add(directionalLight);
}
function initPoints() {
let texture = new THREE.TextureLoader().load( '../imgs/gradient.png' );
const positions = [];
const colors = [];
const geometry = new THREE.BufferGeometry();
for (let i = 0; i < 10000; i ++) {
let vertex = new THREE.Vector3();
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
positions.push( vertex.x, vertex.y, vertex.z );
let color = new THREE.Color();
color.setHSL( Math.random() * 0.2 + 0.5, 0.55, Math.random() * 0.25 + 0.55 );
colors.push( color.r, color.g, color.b );
}
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
let starsMaterial = new THREE.PointsMaterial( {
map: texture,
size: 1,
transparent: true,
opacity: 1,
vertexColors: true,
blending: THREE.AdditiveBlending,
sizeAttenuation: true
} );
stars = new THREE.Points( geometry, starsMaterial );
stars.scale.set( 300, 300, 300 );
scene.add( stars );
}
function initEarth() {
// 地球
globeTextureLoader.load( '../imgs/earth.jpg', function ( texture ) {
let globeGgeometry = new THREE.SphereGeometry( radius, 100, 100 );
let globeMaterial = new THREE.MeshStandardMaterial( { map: texture,side:THREE.DoubleSide } );
let globeMesh = new THREE.Mesh( globeGgeometry, globeMaterial );
group.rotation.set(Math.PI/2, 0, 0 );
group.add( globeMesh );
scene.add( group );
} );
}
function onWindowResize() {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renders();
renderer.setSize( innerWidth, innerHeight );
}
function renders() {
renderer.clear();
renderer.render( scene, camera );
}
function animate() {
window.requestAnimationFrame( () => {
if (controls) controls.update();
renders();
animate();
} );
}
window.onload = () => {
initRenderer();
initCamera();
initScene();
initLight();
initEarth();
initPoints();
initControls();
animate();
window.addEventListener('resize', onWindowResize, false);
};
</script>
</body>
</html>
earth地球html源码
需积分: 0 141 浏览量
2024-03-03
17:07:55
上传
评论
收藏 3.62MB RAR 举报
earth地球html源码 （453个子文件） 
earth.html 5KB
earth.jpg 679KB
web-ifc-api.js 1.46MB three.module.js 1.15MB three.js 1.14MB OimoPhysics.js 1.12MB three.min.js 597KB RectAreaLightUniformsLib.js 306KB mmdparser.module.js 166KB chevrotain.module.min.js 154KB rhino3dm.js 132KB rhino3dm.module.js 131KB opentype.module.min.js 124KB FBXLoader.js 100KB GLTFLoader.js 97KB dat.gui.module.js 87KB fflate.module.js 84KB ColladaLoader.js 83KB VRMLLoader.js 75KB SVGLoader.js 65KB GLTFExporter.js 58KB EXRLoader.js 56KB MMDLoader.js 52KB SMAAPass.js 49KB ecsy.module.js 46KB FXAAShader.js 46KB LDrawLoader.js 46KB TransformControls.js 45KB zstddec.module.js 42KB MarchingCubes.js 40KB Geometry.js 38KB 3MFLoader.js 35KB LightningStrike.js 33KB 3DMLoader.js 32KB MMDPhysics.js 29KB VTKLoader.js 28KB RGBMLoader.js 27KB IFFParser.js 27KB CameraControls.js 27KB TDSLoader.js 27KB OrbitControls.js 26KB MMDAnimationHelper.js 26KB LWOLoader.js 24KB BufferGeometryUtils.js 23KB ConvexHull.js 23KB GeometryCompressionUtils.js 22KB WebGPURenderer.js 22KB OBJLoader.js 22KB Projector.js 21KB meshopt_decoder.module.js 21KB OutlinePass.js 20KB TeapotGeometry.js 20KB BasisTextureLoader.js 20KB SSRPass.js 19KB WebGPUTextures.js 19KB ColladaExporter.js 18KB WebGPURenderPipeline.js 18KB NodeBuilder.js 17KB TrackballControls.js 17KB SSRrPass.js 16KB StandardNode.js 16KB SMAAShader.js 15KB glslang.js 15KB TiltLoader.js 15KB SimplexNoise.js 14KB SAOPass.js 14KB OutlineEffect.js 14KB ConvexObjectBreaker.js 14KB RollerCoaster.js 14KB motion-controllers.module.js 14KB DRACOLoader.js 13KB Volume.js 13KB NRRDLoader.js 13KB SVGRenderer.js 13KB UnrealBloomPass.js 13KB SSAOPass.js 13KB RGBELoader.js 13KB MD2Loader.js 13KB PLYExporter.js 12KB MD2CharacterComplex.js 12KB SkeletonUtils.js 12KB USDZExporter.js 12KB Water.js 12KB PLYLoader.js 11KB TGALoader.js 11KB ProgressiveLightMap.js 11KB GPUComputationRenderer.js 11KB AMFLoader.js 11KB IFCLoader.js 11KB ReflectorForSSRPass.js 11KB MTLLoader.js 11KB SimplifyModifier.js 11KB OBB.js 10KB PCDLoader.js 10KB LWO2Parser.js 10KB PhongNode.js 10KB STLLoader.js 10KB TextureCubeUVNode.js 10KB NodeBuilder.js 10KB VolumeShader.js 10KB共 453 条
- 1
- 2
- 3
- 4
- 5
资源评论
九流下半
- 粉丝: 144
- 资源: 39
