threejs 坐标系与三角函数的实践应用

有空的老铁关注一下我的抖音：

效果：

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs" style="border: 1px solid red"></div>沿着圆弧批量创建多个小球
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {
  CSS2DObject,
  CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";
import TWEEN from "@tweenjs/tween.js";
import { EllipseCurve } from "three";

export default {
  data() {
    return {
      sphereGeometry: null,
      group: null,
      camera: null,
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    // 沿着圆弧批量创建多个小球
    init() {
      // 创建场景对象
      this.scene = new this.$three.Scene();
      // 创建辅助坐标轴对象
      const axesHelper = new this.$three.AxesHelper(100);
      this.scene.add(axesHelper);
      // 创建一个圆，圆只是一条细线------开始
      // 1-1，首先，创建缓存几何体对象
      const bufferGeometry = new this.$three.BufferGeometry();
      // 1-2，创建椭圆曲线使用 EllipseCurve  或者 ArcCurve 
      // EllipseCurve( aX : Float, aY : Float, xRadius : Float, yRadius : Float, aStartAngle : Radians, aEndAngle : Radians, aClockwise : Boolean, aRotation : Radians )
      // ArcCurve( aX : Float, aY : Float, Radius : Float, aStartAngle : Radians, aEndAngle : Radians, aClockwise : Boolean, aRotation : Radians )
      /**
       *  aX – 椭圆的中心的X坐标，默认值为0。
          aY – 椭圆的中心的Y坐标，默认值为0。
          xRadius – X轴向上椭圆的半径，默认值为1。
          yRadius – Y轴向上椭圆的半径，默认值为1。
          Radius – 轴上圆的半径，默认值为1。
          aStartAngle – 以弧度来表示，从正X轴算起曲线开始的角度，默认值为0。
          aEndAngle – 以弧度来表示，从正X轴算起曲线终止的角度，默认值为2 x Math.PI。
          aClockwise – 椭圆是否按照顺时针方向来绘制，默认值为false。
          aRotation – 以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。
       */
      const ellipseCurve = new this.$three.EllipseCurve(0,0,50,50,0, 2* Math.PI,false,0);
      // 获取圆上200个坐标点
      const points = ellipseCurve.getPoints(200);
      // 通过点队列设置该 BufferGeometry 的 attribute。
      bufferGeometry.setFromPoints(points);
      // 创建线材质对象
      const lineBasicMaterial = new this.$three.LineBasicMaterial({
        color: 0xffaadd
      });
      // 创建线模型对象
      const line = new this.$three.Line(bufferGeometry, lineBasicMaterial);
      // 线模型对象绕 x 轴旋转 90度；
      line.rotateX(Math.PI / 2);
      this.scene.add(line);
      // 创建一个圆，圆只是一条细线------结束

      // 球缓冲几何体对象
      this.sphereGeometry = new this.$three.SphereGeometry(10,32,16);
      // 创建基础材质对象
      const material = new this.$three.MeshBasicMaterial({
        color: 0xF8D923
      });
      // 创建组对象
      this.group = new this.$three.Group();
      let N = 10; // 创建的小球数量
      let R = 50; // 半径
      for(let i = 0; i < N; i ++) {
        // 计算顶点的 x 轴坐标
        let x = R * Math.cos((2 * Math.PI / 10) * i);
        // 计算顶点的 y 轴坐标
        let y = R * Math.sin((2 * Math.PI / 10) * i);
        const mesh = new this.$three.Mesh(this.sphereGeometry, material);
        mesh.position.set(x, y, 0);
        this.group.add(mesh);
      }
      this.group.rotateX(Math.PI / 2);
      this.scene.add(this.group);
      // 创建相机对象
      this.camera = new this.$three.PerspectiveCamera();
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0);
      // 创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement);
      // 创建空间轨道控制器对象
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", e=> {
        this.renderer.render(this.scene, this.camera);
      })
      this.loopFun();
    },
    loopFun() {
      this.group.rotateZ(0.01);
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.loopFun);
    }
  },
};
</script>
//
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>