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

效果图:

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

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

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

https://github.com/shawn0326/three.pathicon-default.png?t=M4ADhttps://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

  • 6
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值