three打造一个三维凹凸带大气层的地球旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three打造一个三维凹凸带大气层的地球旋转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>


</head>

<body>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        // Scene, Camera, Renderer
        let renderer = new THREE.WebGLRenderer();
        let scene = new THREE.Scene();
        let aspect = window.innerWidth / window.innerHeight;
        let camera = new THREE.PerspectiveCamera(45, aspect, 0.1, 1500);
        let cameraRotation = 0;
        let cameraRotationSpeed = 0.001;
        let cameraAutoRotation = true;
        let orbitControls = new THREE.OrbitControls(camera);

        // Lights
        let spotLight = new THREE.SpotLight(0xffffff, 1, 0, 10, 2);

        // Texture Loader
        let textureLoader = new THREE.TextureLoader();

        // Planet Proto
        let planetProto = {
            sphere: function(size) {
                let sphere = new THREE.SphereGeometry(size, 32, 32);

                return sphere;
            },
            material: function(options) {
                let material = new THREE.MeshPhongMaterial();
                if (options) {
                    for (var property in options) {
                        material[property] = options[property];
                    }
                }

                return material;
            },
            glowMaterial: function(intensity, fade, color) {
                // Custom glow shader from https://github.com/stemkoski/stemkoski.github.com/tree/master/Three.js
                let glowMaterial = new THREE.ShaderMaterial({
                    uniforms: {
                        'c': {
                            type: 'f',
                            value: intensity
                        },
                        'p': {
                            type: 'f',
                            value: fade
                        },
                        glowColor: {
                            type: 'c',
                            value: new THREE.Color(color)
                        },
                        viewVector: {
                            type: 'v3',
                            value: camera.position
                        }
                    },
                    vertexShader: `
                    uniform vec3 viewVector;
                    uniform float c;
                    uniform float p;
                    varying float intensity;
                    void main() {
                    vec3 vNormal = normalize( normalMatrix * normal );
                    vec3 vNormel = normalize( normalMatrix * viewVector );
                    intensity = pow( c - dot(vNormal, vNormel), p );
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                    }`,
                    fragmentShader: `
                    uniform vec3 glowColor;
                    varying float intensity;
                    void main()
                    {
                    vec3 glow = glowColor * intensity;
                    gl_FragColor = vec4( glow, 1.0 );
                    }`,
                    side: THREE.BackSide,
                    blending: THREE.AdditiveBlending,
                    transparent: true
                });

                return glowMaterial;
            },
            texture: function(material, property, uri) {
                let textureLoader = new THREE.TextureLoader();
                textureLoader.crossOrigin = true;
                textureLoader.load(
                    uri,
                    function(texture) {
                        material[property] = texture;
                        material.needsUpdate = true;
                    }
                );
            }
        };

        let createPlanet = function(options) {
            // Create the planet's Surface
            let surfaceGeometry = planetProto.sphere(options.surface.size);
            let surfaceMaterial = planetProto.material(options.surface.material);
            let surface = new THREE.Mesh(surfaceGeometry, surfaceMaterial);

            // Create the planet's Atmosphere
            let atmosphereGeometry = planetProto.sphere(options.surface.size + options.atmosphere.size);
            let atmosphereMaterialDefaults = {
                side: THREE.DoubleSide,
                transparent: true
            }
            let atmosphereMaterialOptions = Object.assign(atmosphereMaterialDefaults, options.atmosphere.material);
            let atmosphereMaterial = planetProto.material(atmosphereMaterialOptions);
            let atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);

            // Create the planet's Atmospheric glow
            let atmosphericGlowGeometry = planetProto.sphere(options.surface.size + options.atmosphere.size + options.atmosphere.glow.size);
            let atmosphericGlowMaterial = planetProto.glowMaterial(options.atmosphere.glow.intensity, options.atmosphere.glow.fade, options.atmosphere.glow.color);
            let atmosphericGlow = new THREE.Mesh(atmosphericGlowGeometry, atmosphericGlowMaterial);

            // Nest the planet's Surface and Atmosphere into a planet object
            let planet = new THREE.Object3D();
            surface.name = 'surface';
            atmosphere.name = 'atmosphere';
            atmosphericGlow.name = 'atmosphericGlow';
            planet.add(surface);
            planet.add(atmosphere);
            planet.add(atmosphericGlow);

            // Load the Surface's textures
            for (let textureProperty in options.surface.textures) {
                planetProto.texture(
                    surfaceMaterial,
                    textureProperty,
                    options.surface.textures[textureProperty]
                );
            }

            // Load the Atmosphere's texture
            for (let textureProperty in options.atmosphere.textures) {
                planetProto.texture(
                    atmosphereMaterial,
                    textureProperty,
                    options.atmosphere.textures[textureProperty]
                );
            }

            return planet;
        };

        let earth = createPlanet({
            surface: {
                size: 0.5,
                material: {
                    bumpScale: 0.05,
                    specular: new THREE.Color('grey'),
                    shininess: 10
                },
                textures: {
                    map: '//repo.bfw.wiki/bfwrepo/image/6098ffa058cd1.png',
                    bumpMap: '//repo.bfw.wiki/bfwrepo/image/6098ff934640d.png',
                    specularMap: '//repo.bfw.wiki/bfwrepo/image/6098ff67cddfe.png'
                }
            },
            atmosphere: {
                size: 0.003,
                material: {
                    opacity: 0.8
                },
                textures: {
                    map: '//repo.bfw.wiki/bfwrepo/image/6098ff50454fd.png',
                    alphaMap: '//repo.bfw.wiki/bfwrepo/image/6098ff410211a.png'
                },
                glow: {
                    size: 0.02,
                    intensity: 0.7,
                    fade: 7,
                    color: 0x93cfef
                }
            },
        });

        // Marker Proto
        let markerProto = {
            latLongToVec.........完整代码请登录后点击上方下载按钮下载查看