three.js 绘制圆弧（圆）

最新推荐文章于 2024-06-15 10:00:37 发布

汉武大帝·

最新推荐文章于 2024-06-15 10:00:37 发布

阅读量4.4k

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yinge0508/article/details/122982994

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

先看效果：

该效果是通过 ArcCurve渲染圆或者圆弧，参数：ArcCurve( x, y, r, srange, erange );

x,y 圆弧坐标原点, r：圆弧半径 ; srange, erange：圆弧起始角度；

// 一些教程中介绍说 ArcCurve是 EllipseCurve 的别名，查看参数，发现两者类似

//和椭圆曲线 EllipseCurve( aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation ) 类似
// aX – 椭圆的中心的X坐标，默认值为0。
// aY – 椭圆的中心的Y坐标，默认值为0。
// xRadius – X轴向上椭圆的半径，默认值为1。
// yRadius – Y轴向上椭圆的半径，默认值为1。
// aStartAngle – 以弧度来表示，从正X轴算起曲线开始的角度，默认值为0。
// aEndAngle – 以弧度来表示，从正X轴算起曲线终止的角度，默认值为2 x Math.PI。
// aClockwise – 椭圆是否按照顺时针方向来绘制，默认值为false。
// aRotation – 以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。

代码如下：

<!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>绘制圆弧（圆）</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2,创建普通模型对象
    var geometry = new THREE.Geometry();
    // 创建圆弧对象 ArcCurve，参数：0, 0圆弧坐标原点x，y 100：圆弧半径 0, 2 * Math.PI：圆弧起始角度；
    var arcCurve = new THREE.ArcCurve(0,0,100,0,2*Math.PI);
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
    geometry.setFromPoints(arcCurve.getPoints(50));
    var material = new THREE.LineBasicMaterial({color:0xee00ff});
    var line = new THREE.Line(geometry,material);
    scene.add(line);
    // 3，创建环境光对象
    var ambient = new THREE.AmbientLight({color:0xffffff});
    scene.add(ambient);
    // 4，创建相机对象
    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,-2000,2000);
    camera.position.set(200,300,200);
    camera.lookAt(scene.position);
     // 创建轴辅助对象
     var axes_helper = new THREE.AxesHelper(500);
     scene.add(axes_helper);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    document.body.appendChild(renderer.domElement);
    function render(){
      renderer.render(scene,camera);
    }
    render();
    // 创建鼠标控制对象
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change',render);
  </script>
</body>
</html>