Question

我正在使用three.js作为3D模型编辑器构建工程工具。

我用六条线创建了X，Y和Z轴; RGB为XYZ，实体为正，虚线为负。以下是CoffeeScript中的代码，主要基于SoledadPenadés的教程：soledadpenades.com/articles/three-js-tutorials/drawing-the-coordinate-axes/：

buildAxes: (length) ->                                                                             
  axes = new THREE.Object3D                                                                        

  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(length, 0, 0), 0xFF0000, false)
  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(-length, 0, 0), 0xFF0000, true)
  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, length, 0), 0x00FF00, false)
  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, -length, 0), 0x00FF00, true)
  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, length), 0x0000FF, false)
  axes.add @buildAxis(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, -length), 0x0000FF, true)
  return axes                                                                                      

buildAxis: (source, destination, color, dashed) ->                                                 
  geom = new THREE.Geometry                                                                        
  mat = undefined                                                                                  
  if dashed                                                                                        
    mat = new THREE.LineDashedMaterial                                                             
      linewidth: 1                                                                                 
      color: color                                                                                 
      dashSize: 3                                                                                  
      gapsize: 3                                                                                   
  else                                                                                             
    mat = new THREE.LineBasicMaterial                                                              
      linewidth: 1                                                                                 
      color: color                                                                                 
  geom.vertices.push source.clone()                                                                
  geom.vertices.push destination.clone()                                                           
  geom.computeLineDistances() # required for dashed lines                                          
  axis = new THREE.Line geom, mat, THREE.LineSegments                                              
  return axis

Here's the result.

虽然这看起来很不错，但是当它们远离原点时，虚线显得更加混乱。我想让虚线段相对于相机的平面具有相等的长度和相等的间距。 Here's a screenshot of SketchUp显示出类似的效果，但带点。

我认为应该可以将虚线分成多个段，每个段都有动态长度和位置，但这似乎是一个看似无害的改进的大量开销。有没有更好的方法来实现这一目标？

使用相对于相机平面均匀间隔的线段显示虚线

0 个答案: