weixin_45840746 2023-05-26 11:16 采纳率: 34.3%
浏览 86
已结题

threejs画一个带箭头的线

我想实现点击点击依次出现下图情况

img


线段那部分没问题


      // 创建材质
      const material5 = new LineMaterial({
        linewidth: 15,
        vertexColors: true,
        resolution: new THREE.Vector2(1000, 800),
      });

      // 创建空几何体
      const geometry = new LineGeometry();
      geometry.setPositions([1.2, -1, -1.6, 2, -1, -1.3, 1.2, -1, 1, 2, -1, 0]);
      // 设置顶点颜色
      geometry.setColors([
        0.627, 0.267, 0.992, 0.541, 0.51, 0.953, 0.341, 0.686, 0.929, 0.22,
        0.663, 0.941,
      ]);
      const line = new Line2(geometry, material5);
      line.computeLineDistances();
      scene.add(line);

但是箭头我没办法处理,使用ConeGeometry的话,从侧面看是锥体,ArrowHelper 一样的道理,我就想要在线段末尾添加一个平面箭头,因为箭头方向不同,如果一个个的创建三角形这个太复杂了,我该如何快速实现这个功能

  • 写回答

1条回答 默认 最新

  • 还有头发的程序员- 2023-05-29 19:28
    关注

    可以借鉴下

        var scene = new THREE.Scene();
        scene.background = new THREE.Color(0.3, 0.3, 0.3);
        var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 1000 );
        camera.position.set( 0, 15, 0 );
     
        var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true });
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.setPixelRatio( window.devicePixelRatio );
        container.appendChild( renderer.domElement );
     
        var controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.target.set(0, 0, 0);
     
        var ambientLight = new THREE.AmbientLight(0xffffff);
        scene.add( ambientLight );
     
        var directionalLight = new THREE.DirectionalLight( 0xffffff);
        directionalLight.position.set( 2, 2, - 3 );
        directionalLight.position.normalize();
        scene.add( directionalLight );
    
    
    评论

    报告相同问题?

    问题事件

    • 已结题 (查看结题原因) 5月30日
    • 创建了问题 5月26日

    悬赏问题

    • ¥15 求苹果推信imessage批量推信技术
    • ¥15 ubuntu 22.04 系统盘空间不足。隐藏的docker空间占用?(相关搜索:移动硬盘|管理系统)
    • ¥15 利用加权最小二乘法求亚马逊各类商品的价格指标?怎么求?
    • ¥15 c++ word自动化,为什么可用接口是空的?
    • ¥15 Matlab计算100000*100000的矩阵运算问题:
    • ¥50 VB6.0如何识别粘连的不规则的数字图片验证码
    • ¥16 需要完整的这份订单所有的代码,可以加钱
    • ¥15 Stata数据分析请教
    • ¥15 请教如何为VS2022搭建 Debug|win32的openCV环境?
    • ¥15 关于#c++#的问题:c++如何使用websocketpp实现websocket接口调用,求示例代码和相关资料