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

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

代码语言：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..........完整代码请登录后点击上方下载按钮下载查看