threeJS 创建逼真地球

最新推荐文章于 2024-08-13 17:20:41 发布

Kinghiee

最新推荐文章于 2024-08-13 17:20:41 发布

阅读量1.9k

点赞数 3

分类专栏： threejs 文章标签：创建逼真地球

本文链接：https://blog.csdn.net/qq_42683219/article/details/105718463

版权

threejs 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

效果图

在这里插入图片描述

总体步骤

① 创建场景
② 创建相机
③ 创建物体
④创建渲染器

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 650px;
            background-color: #000000;
        }
    </style>
</head>
<body>
<div id="container">

</div>
<script type="module">
</script>
</body>
</html>

导入文件,创建全局变量和函数

    import * as THREE from "./js/three.module.js";
    import {OrbitControls} from "./js/OrbitControls.js";

    let renderer,scene,camera,cube,cloudMesh;

    action();
    function action() {
       onload();
       run();
    }

①创建场景

onload函数中

        let container=document.getElementById("container");//获取container

        scene=new THREE.Scene();//创建场景

②创建相机

onload函数中

        camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);
        camera.position.set(0,0,3.5);//创建相机并设置位置

        //let axe=new THREE.AxesHelper(20);
        //scene.add(axe);//辅助工具，用于创建相机时，相机找到合适的位置

③创建物体

onload函数中


        let group=new THREE.Group();//创建群组，用来存放地球和大气层


        let pointLight=new THREE.PointLight();//创建点光源
        pointLight.position.set(-10,4,15);//设置光源的位置
        pointLight.intensity=1.5;//设置光强
        scene.add(pointLight);


        let geometry=new THREE.SphereGeometry(1,32,32);//创建一个球
        let textureLoader=new THREE.TextureLoader();
        let surfaceMap=textureLoader.load("./img/earth_surface_2048.jpg");//创建颜色贴图
        let normalMap=textureLoader.load("./img/earth_normal_2048.jpg");//创建法线贴图
        let specularMap=textureLoader.load("./img/earth_specular_2048.jpg");//创建高光贴图
        let material=new THREE.MeshPhongMaterial({map:surfaceMap,normalMap:normalMap,specularMap:specularMap});
        cube=new THREE.Mesh(geometry,material);//将几何体和材料放到网格中
        cube.rotation.x=Math.PI/5;
        group.add(cube);

        let cloudGeometry=new THREE.SphereGeometry(1.005,32,32);//创建大气层所在的球面
        let cloudMap=textureLoader.load("./img/earth_clouds_1024.png");
        let cloudMaterial=new THREE.MeshLambertMaterial({color:0xffffff,map:cloudMap,transparent:true});
         cloudMesh=new THREE.Mesh(cloudGeometry,cloudMaterial);
        group.add(cloudMesh);
        scene.add(group);//把群组添加到场景中

④创建渲染器

onload函数中

     renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(container.offsetWidth,container.offsetHeight);
        container.appendChild(renderer.domElement);

        let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象

run函数中

 function run() {

        requestAnimationFrame(run);//循环调用
        cloudMesh.rotation.y+=0.0002;//大气层旋转
        cube.rotation.y+=0.0005;//地球旋转
        renderer.render(scene,camera);//不断渲染

    }

总代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 650px;
            background-color: #000000;
        }
    </style>
</head>
<body>
<div id="container">

</div>
<script type="module">
    import * as THREE from "./js/three.module.js";
    import {OrbitControls} from "./js/OrbitControls.js";

    let renderer,scene,camera,cube,cloudMesh;

    action();
    function action() {
       onload();
       run();
    }
    function onload() {
        let container=document.getElementById("container");//获取container

        scene=new THREE.Scene();//创建场景

        camera=new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,4000);
        camera.position.set(0,0,3.5);//创建相机并设置位置

        //let axe=new THREE.AxesHelper(20);
        //scene.add(axe);//辅助工具，用于创建相机时，相机找到合适的位置

        let group=new THREE.Group();//创建群组，用来存放地球和大气层


        let pointLight=new THREE.PointLight();//创建点光源
        pointLight.position.set(-10,4,15);//设置光源的位置
        pointLight.intensity=1.5;//设置光强
        scene.add(pointLight);


        let geometry=new THREE.SphereGeometry(1,32,32);//创建一个球
        let textureLoader=new THREE.TextureLoader();
        let surfaceMap=textureLoader.load("./img/earth_surface_2048.jpg");//创建颜色贴图
        let normalMap=textureLoader.load("./img/earth_normal_2048.jpg");//创建法线贴图
        let specularMap=textureLoader.load("./img/earth_specular_2048.jpg");//创建高光贴图
        let material=new THREE.MeshPhongMaterial({map:surfaceMap,normalMap:normalMap,specularMap:specularMap});
        cube=new THREE.Mesh(geometry,material);//将几何体和材料放到网格中
        cube.rotation.x=Math.PI/5;
        group.add(cube);

        let cloudGeometry=new THREE.SphereGeometry(1.005,32,32);//创建大气层所在的球面
        let cloudMap=textureLoader.load("./img/earth_clouds_1024.png");
        let cloudMaterial=new THREE.MeshLambertMaterial({color:0xffffff,map:cloudMap,transparent:true});
         cloudMesh=new THREE.Mesh(cloudGeometry,cloudMaterial);
        group.add(cloudMesh);
        scene.add(group);//把群组添加到场景中

        renderer=new THREE.WebGLRenderer({antialias:true});
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(container.offsetWidth,container.offsetHeight);
        container.appendChild(renderer.domElement);

        let contorl=new OrbitControls(camera,renderer.domElement);//添加鼠标滚动缩放，旋转对象


    }

    function run() {

        requestAnimationFrame(run);
        cloudMesh.rotation.y+=0.0002;
        cube.rotation.y+=0.0005;
        renderer.render(scene,camera);

    }


</script>
</body>
</html>