three.js 贝塞尔曲线

汉武大帝·

已于 2022-02-18 13:51:26 修改

阅读量1.3k

点赞数 1

分类专栏： three.js 文章标签： javascript css3 前端

于 2022-02-18 13:34:52 首次发布

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

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

先看效果：紫色的是二维二次贝塞尔曲线，黄色的是三维二次贝塞尔曲线，蓝色的是二维三次贝塞尔曲线，橘黄色是三维三次贝赛尔曲线：

代码：

<!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();
    var geometry2 = new THREE.Geometry();
    var geometry3 = new THREE.Geometry();
    var geometry5 = new THREE.Geometry();
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices

    // 二维二次贝塞尔曲线 start
    var p1 = new THREE.Vector2(-30,0);
    var p2 = new THREE.Vector2(0,100);
    var p3 = new THREE.Vector2(30,0);
    var d = new THREE.QuadraticBezierCurve(p1,p2,p3);    
    var points = d.getPoints(50);
    geometry.setFromPoints(points);
    // 二维二次贝塞尔曲线 end

    // 三维二次贝塞尔曲线 start
    var p5 = new THREE.Vector3(30,10,0);
    var p6 = new THREE.Vector3(20,50,20);
    var p7 = new THREE.Vector3(0,10,30);
    var qbc = new THREE.QuadraticBezierCurve3(p5,p6,p7);
    geometry2.setFromPoints(qbc.getPoints(100));
    // 三维二次贝塞尔曲线 end

    // 二维三次贝塞尔曲线 start
    var p8 = new THREE.Vector2(50,10);
    var p9 = new THREE.Vector2(20,50);
    var p10 = new THREE.Vector2(-20,50);
    var p11 = new THREE.Vector2(-50,10);
    var cbc2 = new THREE.CubicBezierCurve(p8,p9,p10,p11);
    geometry3.setFromPoints(cbc2.getPoints(50));

    // 二维三次贝塞尔曲线 end
    // 三维三次贝塞尔曲线 start
    var p12 = new THREE.Vector3(30,10,20);
    var p13 = new THREE.Vector3(20,50,20);
    var p15 = new THREE.Vector3(-20,50,20);
    var p16 = new THREE.Vector3(-30,10,20);
    var cbc3 = new THREE.CubicBezierCurve3(p12,p13,p15,p16);
    geometry5.setFromPoints(cbc3.getPoints(50));
    // 三维三次贝塞尔曲线 end

    var material = new THREE.LineBasicMaterial({
      color: 0xee00ff
    });
    var material2 = new THREE.LineBasicMaterial({
      color: 0xF4FB0B
    });
    var material3 = new THREE.LineBasicMaterial({
      color: 0x0BDDFB
    });
    var material5 = new THREE.LineBasicMaterial({
      color: 0xE58908
    });
    var line = new THREE.Line(geometry, material);
    var line2 = new THREE.Line(geometry2, material2);
    var line3 = new THREE.Line(geometry3, material3);
    var line5 = new THREE.Line(geometry5, material5);
    scene.add(line,line2,line3,line5);
    // 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 = 50;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);
    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>

代码：

<!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();
    var geometry2 = new THREE.Geometry();
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices

    // 二维二次贝塞尔曲线 start
    var p1 = new THREE.Vector2(-30,0);
    var p2 = new THREE.Vector2(0,100);
    var p3 = new THREE.Vector2(30,0);
    var d = new THREE.QuadraticBezierCurve(p1,p2,p3);    
    var points = d.getPoints(50);
    geometry.setFromPoints(points);
    // 二维二次贝塞尔曲线 end

    // 三维二次贝塞尔曲线 start
    var p5 = new THREE.Vector3(30,10,0);
    var p6 = new THREE.Vector3(20,50,20);
    var p7 = new THREE.Vector3(0,10,30);
    var qbc = new THREE.QuadraticBezierCurve3(p5,p6,p7);
    geometry2.setFromPoints(qbc.getPoints(100));
    // 三维二次贝塞尔曲线 end

    var material = new THREE.LineBasicMaterial({
      color: 0xee00ff
    });
    var material2 = new THREE.LineBasicMaterial({
      color: 0xF4FB0B
    });
    var line = new THREE.Line(geometry, material);
    var line2 = new THREE.Line(geometry2, material2);
    scene.add(line,line2);
    // 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 = 50;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -1000, 1000);
    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>