three实战：月球围绕地球

最新推荐文章于 2023-08-22 08:41:21 发布

荒男

最新推荐文章于 2023-08-22 08:41:21 发布

阅读量559

点赞数 1

分类专栏： three 文章标签： js three 3d

本文链接：https://blog.csdn.net/weixin_43236062/article/details/123625851

版权

three 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

这个是我们3月份做的一个小demo，不过文章搁浅了，现在补回来吧，这个demo基本是入门级别的了，做之前需要了解一些3d知识，可以参考学习3D前需要了解的一些基础

涉及的面有摄像头，场景，灯源，材质，运动，贴图，事件交互等等

技术栈

three.js

遇到的问题

贴图本地请求，在谷歌会有跨域限制，解决方法很多，我选用vscode的liveServer插件
场景，摄像头和物体的大小设置很麻烦，需要一个度，这种很不好形容，只能说demo做多了，度很好控制（当作废话吧）
月球和地球的自转轨迹的计算是最麻烦的，虽然写起来就cos，sin，但是如果没有做过的人和查过资料，很难一瞬间get到。

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
        margin: 0px;
        background-color: #000000;
        overflow: hidden;
    }
    canvas{
      background-image: url(./images/star.webp);
    }
  </style>
</head>
<body>
  
</body>
<script src="../build/three.min.js"></script>
<script src="../build/js/CSS2DRenderer.js"></script>
<script src="../build/js/OrbitControls.js"></script>
<script>
  //  声明全局变量
  let camera , scene ,renderer , lavelRenderer;
  let moon , earth
  let clock = new THREE.Clock()
  // 实例化纹理加载器
  const textureLoader = new THREE.TextureLoader()
  // 初始化
  function init(){
    // 月球和地球半径
    const EARTH_RADIUS = 2.5
    const MOON_RADIUS = 0.3
    /*
    *  实例化场景
    */
    scene = new THREE.Scene();

    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 10; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
    camera.position.set(10, 5, 20); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

    /**
     * 实例化光源
     */
    //聚光源
    var PointLight = new THREE.PointLight(0xffffff);
    PointLight.position.set(30, 30, 30); //点光源位置
    PointLight.intensity = 2 //光源强度
    PointLight.castShadow = true; // 光源有阴影
    scene.add(PointLight); //点光源添加到场景中

    /**
     * 设置月球
     */
    var moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 32, 32);
    let moontextureLoader = new THREE.TextureLoader().load('./images/moon.jpg')
    var moonMaterial1 = new THREE.MeshPhongMaterial({
      map: moontextureLoader // 添加纹理
    })
    moon = new THREE.Mesh(moonGeometry, moonMaterial1) //网格模型对象Mesh
    moon.position.set(0, 0, 0)
    // 对象是否渲染到阴影贴图当中
    moon.castShadow = true
    moon.receiveShadow = true
    scene.add(moon); //创建月球

    /**
     * 设置地球
     */
    var earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 32, 32);
    let earthtextureLoader = new THREE.TextureLoader().load('./images/earth1.jpg')
    var earthMaterial1 = new THREE.MeshPhongMaterial({
      map: earthtextureLoader, // 添加纹理
      shininess:5,
    })
    earth = new THREE.Mesh(earthGeometry, earthMaterial1) //网格模型对象Mesh
    earth.position.set(0, 0, 0)
    earth.castShadow = true; // 光源有阴影
    earth.receiveShadow = true
    scene.add(earth); //创建地球

    //环境光
    var AmbientLight = new THREE.AmbientLight(0xffffff);
    AmbientLight.intensity = 1.5
    AmbientLight.castShadow = true; // 光源有阴影
    scene.add(AmbientLight); //点光源添加到场景中

    /**
     * 创建渲染器对象
     */
    renderer = new THREE.WebGLRenderer({
      alpha : true  // 可以穿透，展示背景图
    });
    renderer.setPixelRatio(width.devicePixelRatio)
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.shadowMap.enabled = true // 设置渲染物体阴影
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    
  /**
   * 绑定控制和摄像头
   */
    var controls = new THREE.OrbitControls(camera,renderer.domElement); // 创建鼠标控件对象
  }

  /* 
   * 动画效果 
   */
  function anumate(){
    const elapsed = clock.getElapsedTime() //获取时间
    console.log(elapsed)
    moon.position.set(Math.sin(elapsed) * 5 , 0 ,Math.cos(elapsed)* 5) // 设置月球旋转
    //地球自转
    var axis = new THREE.Vector3(0,1,0)
    earth.rotateOnAxis(axis, Math.PI/100)

    render()
    requestAnimationFrame(anumate);// 请求再次执行渲染函数render 默认是每秒调用60次， 大约16.7ms的执行周期
  }

  function render(){
    // 渲染要使用requestAnimationFrame，因为纹理的图片是异步的，要先加载完纹理图片才能渲染
    window.requestAnimationFrame(this.render.bind(this))
    renderer.render(scene,camera);
  }
  
  init()
  anumate()

  // 调整尺寸
  window.onresize = function(){
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth , window.innerHeight)
  }
</script>
</html>

效果图

在这里插入图片描述

荒男

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
three实战：月球围绕地球

这个是我们3月份做的一个小demo，不过文章搁浅了，现在补回来吧，这个demo基本是入门级别的了，做之前需要了解一些3d知识，可以参考学习3D前需要了解的一些基础涉及的面有摄像头，场景，灯源，材质，运动，贴图，事件交互等等...
复制链接

扫一扫