-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
149 lines (137 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试导入带动画的3D地球模型</title>
<style>
body {
margin: 0
}
</style>
<script src="./three.js"></script>
<script src="./OrbitControls.js"></script>
</head>
<body>
<div id="webgl"></div>
</body>
<script>
let scene;
let group;
let camera;
let renderer;
let loader;
let textureLoader;
let uniforms;
let mixer;
function init(){
//创建场景
scene = new THREE.Scene();
//创建Group
group = new THREE.Group();
textureLoader = new THREE.TextureLoader();
//云层
var textureSprite=new THREE.TextureLoader().load("./images/cloudEarth/light.png");
var spriteMaterial=new THREE.SpriteMaterial({
map:textureSprite,
transparent:true,
opacity:0.6
});
var sprite=new THREE.Sprite(spriteMaterial);
group.add(sprite);
sprite.scale.set(245,245,1);
//地球
var box=new THREE.SphereGeometry(100,100,100);
var texture=textureLoader.load("./images/cloudEarth/Earth.png");
var textureNormal=textureLoader.load("./images/cloudEarth/EarthNormal.png");
var textureSpecular=textureLoader.load("./images/cloudEarth/EarthSpec.png");
var material=new THREE.MeshPhongMaterial({
map:texture,
normalMap:textureNormal,
normalScale:new THREE.Vector2(2.9,2.9),
specularMap:textureSpecular,
transparent:true,opacity:0.7
});
var mesh=new THREE.Mesh(box,material);
var box2=new THREE.SphereGeometry(100.001,100,100);
//添加云层
//顶点着色器
var VSHADER_SOURCE = `
varying vec2 texCoord;void main(){texCoord = uv;vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );gl_Position = projectionMatrix * mvPosition;}
`
//片元着色器
var FSHADER_SOURCE = `
uniform float time;uniform sampler2D texture1;uniform sampler2D texture2;varying vec2 texCoord;uniform float opacity;void main( ) {vec4 noise = texture2D( texture1, texCoord );vec2 T1 = texCoord + vec2( 1.5, -1.5 ) * time * 0.01;vec2 T2 = texCoord + vec2( -0.5, 2.0 ) * time * 0.01;T1.x -= noise.r * 2.0;T1.y += noise.g * 4.0;T2.x += noise.g * 0.2;T2.y += noise.b * 0.2;float p = texture2D( texture1, T1 * 2.0 ).a + 0.25;vec4 color = texture2D( texture2, T2 );vec4 temp = color * 2.0 * ( vec4( p, p, p, p ) ) + ( color * color ); gl_FragColor = vec4(temp.rgb,temp.a*opacity);}
`
var texture1 = textureLoader.load('./images/cloudEarth/噪声.png')
texture1.wrapS = THREE.RepeatWrapping
texture1.wrapT = THREE.RepeatWrapping
var texture2 = textureLoader.load('./images/cloudEarth/大气2.png')
texture2.wrapS = THREE.RepeatWrapping
texture2.wrapT = THREE.RepeatWrapping
uniforms={
time:{value:1},
texture1:{value:texture1},
texture2:{value:texture2},
opacity:{value:0.4}
};
var material2=new THREE.ShaderMaterial({
uniforms:uniforms,
vertexShader:VSHADER_SOURCE,
fragmentShader:FSHADER_SOURCE,
transparent:true
});
var mesh2=new THREE.Mesh(box2,material2);
group.add(mesh,mesh2);
scene.add(group);
var directionalLight=new THREE.DirectionalLight(16777215,0.9);
directionalLight.position.set(400,200,300);
scene.add(directionalLight);
var directionalLight2=new THREE.DirectionalLight(16777215,0.9);
directionalLight2.position.set(-400,-200,-300);
scene.add(directionalLight2);
var ambient=new THREE.AmbientLight(16777215,0.6);
scene.add(ambient);
var width=window.innerWidth;
var height=window.innerHeight;
var k=width/height;
var s=100;
camera=new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
camera.position.set(0,100,200);
camera.lookAt(scene.position);
renderer=new THREE.WebGLRenderer({antialias:true});
renderer.setSize(width,height);
document.getElementById("webgl").appendChild(renderer.domElement);
var posTrack=new THREE.KeyframeTrack(".scale",[0,10],[0.01,0.01,0.01,1,1,1]);
var clip=new THREE.AnimationClip("default",10,[posTrack]);
mixer=new THREE.AnimationMixer();
var AnimationAction=mixer.clipAction(clip,group);
AnimationAction.loop=THREE.LoopOnce;
AnimationAction.clampWhenFinished=true;
AnimationAction.play();
}
init();
//渲染循环
var clock=new THREE.Clock();
function render(){
var delta=clock.getDelta();
uniforms.time.value+=delta;
mixer.update(delta);
group.rotation.y-=0.005;
renderer.render(scene,camera);
requestAnimationFrame(render)
}
render();
var controls=new THREE.OrbitControls(camera);
window.onresize=function(){
renderer.setSize(window.innerWidth,window.innerHeight);
k=window.innerWidth/window.innerHeight;
camera.left=-s*k;
camera.right=s*k;
camera.top=s;
camera.bottom=-s;
camera.updateProjectionMatrix()
};
</script>
</html>