资讯专栏INFORMATION COLUMN

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

imccl / 2173人阅读

</>复制代码

  1. var mesh = ""
  2. function createLines(arr) {
  3. if(mesh){
  4. scene.remove(mesh)
  5. }
  6. var line = new THREE.Geometry();
  7. line.vertices = []
  8. $.each(arr, function(index,content) {
  9. var a = scene.getObjectByName(content)
  10. line.vertices.push( a.position );
  11. });
  12. makeLine( line, 3 );
  13. }
  14. var resolution = new THREE.Vector2( window.innerWidth, window.innerHeight );
  15. function makeLine( geo, c ) {
  16. var g = new MeshLine();
  17. g.setGeometry( geo );
  18. var material = new MeshLineMaterial( {
  19. useMap: false,
  20. color: new THREE.Color( 0xed6a5a ),
  21. opacity: 1,
  22. resolution: resolution,
  23. sizeAttenuation: !false,
  24. lineWidth: 0.5,
  25. near: camera.near,
  26. far: camera.far
  27. });
  28. mesh = new THREE.Mesh( g.geometry, material );
  29. scene.add( mesh );
  30. }
  31. //arr为line在场景中经过的模型名称的数组
  32. 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元查看
<