three.js 二维、三维样条曲线

汉武大帝·

已于 2022-02-17 17:04:27 修改

阅读量1k

点赞数

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

于 2022-02-17 16:40:12 首次发布

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

版权

three.js 专栏收录该内容

112 篇文章 12 订阅

订阅专栏

先看效果二维：

三维：

二维样条曲线用到了 SplineCurve，三维样条曲线用到了 CatmullRomCurve3

代码如下：

<!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();
    // getPoints是基类Curve的方法，返回一个vector2对象作为元素组成的数组
    // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
    
    var points = [];
    // 创建二维样条曲线 start
    for (let index = 0; index < 10; index++) {
        points.push(new THREE.Vector2(Math.random() * 20,Math.random() * 20))
      }
      // 创建样条曲线对象
      var splineCurve = new THREE.SplineCurve(points);
      var sp = splineCurve.getPoints(50);
      geometry.setFromPoints(sp);
      // 创建二维样条曲线 end
      
    // 创建三维样条曲线 start
    // for (let index = 0; index < 10; index++) {
    //   points.push(new THREE.Vector3(Math.random() * 20,Math.random() * 20,Math.random() * 20))
    // }
    // // 创建样条曲线对象
    // var catmullRomCurve3 = new THREE.CatmullRomCurve3(points);
    // var sp = catmullRomCurve3.getPoints(50);
    // geometry.setFromPoints(sp);
    // 创建三维样条曲线 end
    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 = 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>

汉武大帝·

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
three.js 二维、三维样条曲线

先看效果二维：三维：二维样条曲线用到了SplineCurve，三维样条曲线用到了CatmullRomCurve3代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co..
复制链接

扫一扫

专栏目录