threejs 生成加宽度线和动态箭头线

（Always）

已于 2022-06-10 14:42:49 修改

阅读量5.6k

点赞数 6

分类专栏： threejs 文章标签： javascript 前端 threejs 动态箭头线宽度线

于 2022-06-10 14:39:50 首次发布

本文链接：https://blog.csdn.net/weixin_39481659/article/details/125220508

版权

threejs 专栏收录该内容

2 篇文章 3 订阅

订阅专栏

效果图：

由于OpenGL Core Profile与大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。

可以用Line2和MeshLine库来设置线宽，

这里介绍第三种方法：使用大佬写的three.path.js库

https://github.com/shawn0326/three.pathhttps://github.com/shawn0326/three.path1、就正常搭建threejs环境，将scene场景搭建出来，

    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 );

2、使用three.path库将路线点创建连续移动点

PathPointList.set 设置属性:

/**

* set points

* @param {THREE.Vector3[]} 路线点集合

* @param {number} 拐角处的圆角半径，如果为0就是直角

* @param {number} 拐角处的圆滑程度。默认是10

* @param {number} 朝向，默认为自动向上

* @param {boolean} 线段是否收尾闭合

list.set(points, 0.1, 10, undefined, false);

    // 线路径
    var points = [
        new THREE.Vector3(-5, 0, 5),
        new THREE.Vector3(-5, 0, -5),
        new THREE.Vector3(5, 0, -5),
        new THREE.Vector3(5, 0, 5)
    ];

    var up = new THREE.Vector3(0, 1, 0);

    // 创建路线点列表
    var pathPointList = new THREE.PathPointList();
    pathPointList.set(points, 0.5, 10, up, false);

3、创建 geometry

设置线宽和是否带箭头

    var geometry = new THREE.PathGeometry();
    geometry.update(pathPointList, {
        width: 1,
        arrow: false
    });

4、加载纹理，创建材质

    var texture = new THREE.TextureLoader().load( 'images/jiantou.png', function( texture ) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
    });

    // 创建材质
    var material = new THREE.MeshPhongMaterial({
        color : 0xFFFFFF, 
        depthWrite: true,
        transparent: true,
        opacity: 1,
        side:  THREE.DoubleSide,
        map: texture,
    });

5、生成Mesh对象，加载到场景中

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>three.path corner</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            color: #fff;
            text-align: center;
        }
        a {
            color: #ff0
        }
    </style>
</head>

<body>
    <div id="container" ></div>
    <div id="info">
        corner radius
    </div>
</body>

<script src="js/libs/three.js"></script>
<script src="js/libs/OrbitControls.js"></script>

<script src="../build/three.path.js"></script>

<script>
    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 );

    // 线路径
    var points = [
        new THREE.Vector3(-5, 0, 5),
        new THREE.Vector3(-5, 0, -5),
        new THREE.Vector3(5, 0, -5),
        new THREE.Vector3(5, 0, 5)
    ];

    var up = new THREE.Vector3(0, 1, 0);

    // 创建路线点列表
    var pathPointList = new THREE.PathPointList();
    pathPointList.set(points, 0.5, 10, up, false);

    // 创建 geometry
    var geometry = new THREE.PathGeometry();
    geometry.update(pathPointList, {
        width: 1,
        arrow: false
    });

    // 加载纹理
    var texture = new THREE.TextureLoader().load( 'images/jiantou.png', function( texture ) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
    });

    // 创建材质
    var material = new THREE.MeshPhongMaterial({
        color : 0xFFFFFF, 
        depthWrite: true,
        transparent: true,
        opacity: 1,
        side:  THREE.DoubleSide,
        map: texture,
    });
    
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    function render() {

        requestAnimationFrame( render );
        controls.update();

        if(texture) {
            texture.offset.x -= 0.03;
            texture.repeat.x = 0.4;
        }
        
        renderer.render( scene, camera );
    
    }

    render();

</script>

</html>

完整项目下载地址：threejs设置宽度线例子-Javascript文档类资源-CSDN下载threejs生成带宽度线，动态连续的箭头线更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_39481659/85601827