Two.js不能画虚线、不能嵌入图片的解决方案

仔细阅读过Two.js的api后，就会发现，类库并不支持画虚线和嵌入图片的功能，那么如何画虚线图形和嵌入图片呢。答案是，利用原生的svg，然后覆盖在Two.js的画布上。

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
    <g stroke="#75afff" fill="transparent" stroke-width="2">
      <circle id="circle1" stroke-dasharray="10,4"></circle>
    </g>
    <image x="180" y="240"
           width="32" height="32"
           xlink:href="../img/abc.png"/>
  </svg>

这里的g标签就是定义了stroke（边框颜色）、fill（填充颜色）、stroke-width（边框宽度）。而circle中的stroke-dasharray则是定义了虚线的样式，这里接收一个num1,num2的格式，其中num1代表实线的长度，num2代表实线间的间隔长度，也可以放多个数字，用逗号隔开，就是第一组实现长度、第一组间隔长度、第二组实现长度、第二组间隔长度这样循环。image标签的x，y为中心坐标，width、height为宽高，xlink:href为图片路径。

其中的css为：

#svg{
  width:100%;
  height:100%;
  display: block;
  position: absolute;
  z-index:-1;
}

这样svg画布就是一个全屏，并且沉在下面一层的样式了，和Two.js画布可以重叠显示。