资讯专栏INFORMATION COLUMN

解决windows下three.js在WebGlRender渲染无法设置线宽linewidth

imccl / 2121人阅读

    var mesh = ""
    function createLines(arr) {    
        if(mesh){
            scene.remove(mesh)
        }
        var line = new THREE.Geometry();
        line.vertices = []
        $.each(arr, function(index,content) {
            var a = scene.getObjectByName(content)
            line.vertices.push( a.position );
        });
        makeLine( line, 3 );
    }
    
    var resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
    function makeLine( geo, c ) {
        var g = new MeshLine();

        g.setGeometry( geo );
    
        var material = new MeshLineMaterial( {
            useMap: false,
            color: new THREE.Color( 0xed6a5a ),
            opacity: 1,
            resolution: resolution,
            sizeAttenuation: !false,
            lineWidth: 0.5,
            near: camera.near,
            far: camera.far
        });
        mesh = new THREE.Mesh( g.geometry, material );
        scene.add( mesh );
    }
    //arr为line在场景中经过的模型名称的数组
    createLines(arr)

页面中需要引入
THREE.MeshLine.js下载

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84296.html

相关文章

  • three.js 入门详解(一)

    摘要:一般说来,对于制图建模软通常使正交投影,这样不会因为投影而改变物体比例而对于其他大多数应用,通常使用透视投影,因为这更接近人眼的观察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL? WebGL是在浏览器中实现三维效果的一套规范 想要使用...

    Jacendfeng 评论0 收藏0
  • canvas 绘制双线技巧

    摘要:只有源图像外的目标图像部分会被显示,源图像是透明的。绘制了线路的图像是目标图像,线路是源图像。 楔子 最近一个项目,需要绘制双线的效果,双线效果表示的是轨道(类似铁轨之类的),如下图所示: 负责这块功能开发的小伙,姑且称之为L吧,最开始是通过数学计算的方式来实现这种双线,也就是在原来的路径的基础上,计算出两条路径。但是这个过程的计算算挺复杂,而是最终实现的效果很耗性能,性能损耗估计主要...

    王军 评论0 收藏0

发表评论

0条评论

imccl

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<