three.js几何体沿特定轨迹运动

最新推荐文章于 2024-07-12 08:50:02 发布

大兵的猫

最新推荐文章于 2024-07-12 08:50:02 发布

阅读量474

点赞数

分类专栏： Three.js 文章标签： html css

本文链接：https://blog.csdn.net/Error_ABC/article/details/120778997

版权

Three.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

three.js几何体沿特定轨迹运动

<!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>
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden; /* 溢出隐藏 */
        background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F5001rghbsktr044r%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636793278&t=6460024573ca6c6242736f84479a4896")
          center no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <script>
      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      var textureLoader = new THREE.TextureLoader();
      textureLoader.setCrossOrigin("anonymous");

      var earthMaterial = new THREE.MeshLambertMaterial({
        map: textureLoader.load(
          "https://img1.baidu.com/it/u=2853398298,1360812778&fm=26&fmt=auto"
        ),
      });
      var sunMaterial = new THREE.MeshLambertMaterial({
        map: textureLoader.load(
          "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fs11.sinaimg.cn%2Forignal%2F48dba2a3b4e789a1f647a&refer=http%3A%2F%2Fs11.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636791770&t=751bf8c763ef2b2d03c670ac4ff51dc3"
        ),
      });
      var earth = new THREE.SphereGeometry(40, 20, 20); //创建一个地球几何对象
      var sun = new THREE.SphereGeometry(60, 40, 40); //创建一个太阳几何对象
      var earthMesh = new THREE.Mesh(earth, earthMaterial); //地球网格模型对象Mesh
      var sunMesh = new THREE.Mesh(sun, sunMaterial); //太阳网格模型对象Mesh
      scene.add(earthMesh, sunMesh);        //将网格模型添加到场景

      var trajectory = new THREE.Geometry(); //声明一个轨道几何体对象Geometry
      var R = 200; //圆弧半径
      var N = 400; //分段数量
      
      // 批量生成圆弧上的顶点数据
      for (var i = 0; i < N; i++) {
        var angle = ((2 * Math.PI) / N) * i;
        var x = R * Math.sin(angle);
        var y = R * Math.cos(angle);
        trajectory.vertices.push(new THREE.Vector3(x, y, 0));
      }
      // 插入最后一个点，line渲染模式下，产生闭合效果
      //   geometry2.vertices.push(geometry.vertices[0]);

      var points = trajectory.vertices;   //将生成的顶点提取出来

      //材质对象
      var material = new THREE.LineBasicMaterial({
        color: 0xffffff,
      });
      //线条模型对象
      var line = new THREE.Line(trajectory, material);
      scene.add(line); //线条对象添加到场景中

      /**
       * 光源设置
       */
      //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 500, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(200, 300, 500); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xffffff, 1); //设置背景颜色
      renderer.setClearAlpha(0);
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      var i = 0;
      let T0 = new Date(); //上次时间
      function render() {
        let T1 = new Date(); //本次时间
        let t = T1 - T0; //时间差
        T0 = T1; //把本次时间赋值给上次时间
        if (i === points.length - 1) {
          i = 0;
        } else {
          i++;
        }
        renderer.render(scene, camera);
        requestAnimationFrame(render);
        earthMesh.position.set(points[i].x, points[i].y, points[i].z);  // 实时改变几何体位置
        earthMesh.rotateZ(0.001 * t);
        sunMesh.rotateY(0.001 * t);
      }
      render();
    </script>
  </body>
</html>

效果图
在这里插入图片描述