使用three.js着色器创建地球首先要知道一下几个点
1.着色器的介绍
Webgl绘制图形是基于着色器（shader）的绘图机制，着色器提供了灵活且强大的绘制二维或三维图形的方法，所有Webgl程序必须使用它。
着色器语言类似于c语言，当我们写webgl程序时，着色器语言以字符串的形式嵌入在javascript语言中。
2.ShaderMaterial介绍
three.js中的ShaderMaterial可以让我们自己定制着色器，直接操作像素。我们只需要理解着色器的基本原理。
使用自定义着色器渲染的材质。着色器是用GLSL编写的在GPU 上运行的小程序 。如果需要，您可能需要使用自定义着色器：实现不包含在任何内置材质中的效果将许多对象组合成一个BufferGeometry以提高性能
3.Vertex Shader介绍
作用于每个顶点，通常是处理从世界空间到裁剪空间（屏幕坐标）的坐标转换，后面紧接的是光栅化。
4.Fragment Shader介绍
作用于每个屏幕上的片元（这里可近似理解为像素），通常是计算颜色。
下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
<script src="d:/3D/node_modules/@three-ts/orbit-controls/dist/index"></script>
<script type="module">
const clock = new THREE.Clock();
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.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let AeroSphere = {
uniforms: {
globeTexture: {
value: new THREE.TextureLoader().load('./global.jpg'),
},
time: {
value: 0,
},
},
vertexShader: [
'varying vec2 vUv;',
'varying vec3 vertexNormal;',
'void main(){',
'vUv = uv;',
'vertexNormal = normalize(normalMatrix * normal);', //将法线转换到视图坐标系中
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);',// 计算顶点着色器中顶点的位置
'}',
].join('\n'),
fragmentShader: [
'uniform sampler2D globeTexture;',
'varying vec2 vUv;',
'varying vec3 vertexNormal;',
'void main(){',
'float intensity = 1.05 -dot(vertexNormal,vec3(0.0,0.0,1.0));',
'vec3 atmosphere = vec3(0.3 , 0.6 , 1.0) * pow(intensity,1.5);',
' gl_FragColor = vec4(atmosphere + texture2D(globeTexture,vUv).xyz,1.0);',
'}',
].join('\n'),
};
let Atmosphere = {
uniforms: {
time: {
value: 0,
},
},
vertexShader: [
'varying vec3 vertexNormal;',
'varying vec2 depthUv;',
'void main(){',
'vertexNormal = normalize(normalMatrix * normal);', //将法线转换到视图坐标系中
'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',// 计算顶点着色器中顶点的位置
'depthUv = gl_Position.xy/1.0 + 0.5;',
'}',
].join('\n'),
fragmentShader: [
'varying vec3 vertexNormal;',
'varying vec2 depthUv;',
'uniform float time;',
'void main(){',
'float step = abs(time - depthUv.x);',
'if(step < 0.02){',
'float d = (1.0 - step * 50.0);',
'}',
'float intensity = pow(0.5 - dot(vertexNormal, vec3(0.3 ,1 , 1)) ,0.5);',
' gl_FragColor = vec4(0.3, 0.6 , 1.0 , 1.0) * intensity;',
'}',
].join('\n'),
};
const sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 50, 50), new THREE.ShaderMaterial({
vertexShader: AeroSphere.vertexShader,
fragmentShader: AeroSphere.fragmentShader,
uniforms: AeroSphere.uniforms,
}))
const atmosphere = new THREE.Mesh(new THREE.SphereGeometry(5, 50, 50), new THREE.ShaderMaterial({
vertexShader: Atmosphere.vertexShader,
fragmentShader: Atmosphere.fragmentShader,
uniforms: Atmosphere.uniforms,
blending: THREE.AdditiveBlending,
side: THREE.BackSide
}))
atmosphere.scale.set(1.05, 1.05, 1.05)
scene.add(sphere)
scene.add(atmosphere)
camera.position.z = 12
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
sphere.rotation.y += 0.005
const delta = clock.getDelta();
const time = (clock.getElapsedTime() / 5) % 1;
if (AeroSphere.uniforms) {
Atmosphere.uniforms.time.value = time;
}
};
animate();
</script>
</body>
</html>
以上为个人拙见不喜勿喷,谢谢观看
