three.js 多个线条组合曲线CurvePath，绘制U型

最新推荐文章于 2022-12-19 20:10:56 发布

汉武大帝·

最新推荐文章于 2022-12-19 20:10:56 发布

阅读量969

点赞数

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

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

版权

three.js 专栏收录该内容

111 篇文章 12 订阅

订阅专栏

1，先看效果：

2，代码：

<!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>多个线条组合曲线CurvePath</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
</head>
<body>
  <script>
    // 1,创建场景对象
    var scene = new THREE.Scene();

    // -------------------------关键代码 start-----------------------------------
    // 2，创建普通模型对象
    var geometry = new THREE.Geometry();
    var R = 200;
    var p1 = new THREE.Vector3(40,0,0);
    var p2 = new THREE.Vector3(-40,0,0);
    // 创建圆弧
    var arc = new THREE.ArcCurve(0,0,40,0,Math.PI,true);
    // 创建直线(x轴正向的直线)
    var line1 = new THREE.LineCurve3(p1,new THREE.Vector3(40,100,0));
    // 创建直线(x轴负向的直线)
    var line2 = new THREE.LineCurve3(p2,new THREE.Vector3(-40,100,0));
    // 通过组合曲线CurvePath可以把多个圆弧线、样条曲线、直线等多个曲线合并成一个曲线。
    var curvePath = new THREE.CurvePath();
    curvePath.curves.push(line1,arc,line2);
    var points = curvePath.getPoints(100);
    geometry.setFromPoints(points);
    // 创建材质对象
    var material = new THREE.LineBasicMaterial({color:0xff11dd});
    var line = new THREE.Line(geometry,material);
    scene.add(line);
    // -------------------------关键代码 end-----------------------------------

    // 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 = 150;
    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 = new THREE.AxesHelper(500);
    scene.add(axes);
    // 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
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
three.js 多个线条组合曲线CurvePath，绘制U型

1，先看效果：2，代码：<!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"> <ti.
复制链接

扫一扫