THREE中创建地月模型

RumbleWx

已于 2022-08-19 15:18:04 修改

阅读量135

点赞数

文章标签：前端 javascript 3d

于 2022-08-19 15:13:22 首次发布

本文链接：https://blog.csdn.net/RumbleWx/article/details/126425399

版权

有自转公转效果

天空盒贴图、地月模型贴图需要自己找

<!DOCTYPE html>
<html>
    <head>
        <title>地月模型</title>
        <script type="text/javascript" src="./three.js"></script>
        <script type="text/javascript" src="./dat.gui.min.js"></script>
        <script type="text/javascript" src="./OrbitControls.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="dom"></div>
        <script type="text/javascript">
            var camera;
            var renderer;
            function init() {
                /* 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光 */

                // 场景
                scene = new THREE.Scene();
                scene.background = new THREE.Color(0xffffff);

                // 摄像机
                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                camera.position.x = 0;
                camera.position.y = 30;
                camera.position.z = 60;
                camera.lookAt(scene.position); // 将摄像机对准场景的中心

                //点光源
                point = new THREE.PointLight(0xffffff);
                point.position.set(100, 200, 100); //点光源位置
                scene.add(point); //点光源添加到场景中
                //环境光
                ambient = new THREE.AmbientLight(0x444444);
                scene.add(ambient);

                // 渲染器
                renderer = new THREE.WebGLRenderer();
                renderer.setClearColor(new THREE.Color(0xeeeeee));
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.shadowMap.enabled = true; // 设置渲染器需要阴影效果
                document.getElementById("dom").appendChild(renderer.domElement); // 将渲染器的输出添加到HTML元素

                // 控制器
                orbit = new THREE.OrbitControls(camera, renderer.domElement);

                // 坐标轴
                var axes = new THREE.AxesHelper(100);
                // scene.add(axes);

                // 纹理加载器
                var textureLoader = new THREE.TextureLoader(); 
                var texture1 = textureLoader.load('./earth.jpg');
                var texture2 = textureLoader.load('./moon.jpg');


                // 创建一个基础材质的立方体
                function createBall(r, x, y, z, texture) {
                    // 创建一个立方体并设置大小
                    var cubeGeometry = new THREE.SphereGeometry(r, 50, 50);
                    var cubeMaterial = new THREE.MeshPhongMaterial({
                        // color: 0xffffff * Math.random(),
                        // wireframe: true, // 线性
                        map: texture,
                        side: THREE.DoubleSide,
                    });
                    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                    // 设置立方体位置
                    cube.position.x = x;
                    cube.position.y = y;
                    cube.position.z = z;
                    return cube;
                }

                var group2 = new THREE.Group();
                scene.add(group2);

                // 将立方体添加到场景中
                var cube1 = createBall(10, 0, 0, 0, texture1);
                var cube2 = createBall(3, 18, 0, 18, texture2);
                scene.add(cube1);
                group2.add(cube2);

                console.log(1,scene.position);
                console.log(2,group2.position);
                console.log(3,cube1.position);
                console.log(4,cube2.position);

                // 天空盒
                var urls = [
                    "./skyBox7/negy.jpg", // 左
                    "./skyBox7/posy.jpg", // 右
                    "./skyBox7/negz.jpg", // 上
                    "./skyBox7/posz.jpg", // 下
                    "./skyBox7/negx.jpg", // 后
                    "./skyBox7/posx.jpg", // 前
                ];
                var loader = new THREE.CubeTextureLoader();
                scene.background = loader.load(urls);

                // 随着窗体的变化修改场景
                function onResize() {
                    camera.aspect = window.innerWidth / window.innerHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(window.innerWidth, window.innerHeight);
                }
                window.addEventListener("resize", onResize, false); // 监听窗体调整大小事件

                // 实时渲染动画
                function renderScene() {
                    orbit.update();
                    // 使用requestAnimationFrame函数进行渲染
                    cube1.rotation.y += 0.005;
                    cube2.rotation.y += 0.005;
                    group2.rotation.y += 0.005;
                    requestAnimationFrame(renderScene);
                    renderer.render(scene, camera);
                }
                renderScene(); // 启动动画
            }

            // 窗口加载
            window.onload = init;
        </script>
    </body>
</html>