threejs中一些问题汇总

1.图像去锯齿

利用{antialias: true}能有效缓解

this.renderer = new this.THREE.WebGLRenderer({antialias: true})

2.引用路径不当

引用路径不当会导致一些奇怪的错误，在threejs中所有的加载的引用都要用绝对路径，资源放在静态文件夹下。

3.缩放问题

缩放scale注意不能是0。
如下的函数相当于Math.floor()，但是该函数在~~(0.5)返回的就是0，需要注意。

            rand:function(min,max){
                  return ~~(Math.random()*(max-min+1)+min)
              }

4.颜色问题

通常我们使用的是Hex的颜色，但是我想要很多个粉红的爱心，但是爱心的颜色又要有不同，这样我们最好是用HSL，我们这里只需要改变一些l的值就可以得到很多类似的颜色。

// svg是利用爱心svg图像拉伸而成的Three.Mesh对象

            for (let i = 0; i < this.heartNum; i++) {
              let heart = svg.clone()
              let svgMaterial = new this.THREE.MeshPhongMaterial({
                shininess:60
              });
              heart.material = svgMaterial
              let color = new this.THREE.Color(0xFFBBFF)
              let hsl= {}
              color.getHSL(hsl)
              heart.material.color.setHSL(hsl.h,hsl.s,this.rand(0.6,1)*hsl.l)
              this.scene.add(heart)
            } 

说明：threejs中的网格物体对材质的是引用传递，不是值传递，如果material 被 mesh1和mesh2用到了，改变 mesh1.material.color，则mesh2的材质颜色也改了，所以这里我们给每一个mesh一个material

效果