关于threejs版本的问题
threejs新旧版本之间的兼容性貌似不太好,几个月前能用的方法现在可能就用不了,当前最新的版本号为r106.
如果你用到一些不在标准库three里的接口,一般在three-full里面都可以找到.
其他一些非官方的库,特别是那些一年半载甚至更久没有更新的库,最好就不用考虑使用了,因为很可能用不了.
关于画线的问题
画线的过程中,很容易出现不正常显示等一些诡异的问题,最好是能参考一下官方example,比如:
https://threejs.org/examples/?q=line#webgl_lines_colors
以下是一段基于es6的参考代码:
// import {LineGeometry, Line2, LineMaterial, CatmullRomCurve3} from 'three-full';
genLines(points: Vector3[]) {
// const spline = new CatmullRomCurve3(points); // 增加弧度
const divisions = points.length; // Math.round(1 * points.length);
const color = new Color();
const positions = [];
const colors = [];
for (let i = 0, l = divisions; i < l; i++) {
const point = points[i]; // spline.getPoint(i / l);
positions.push(point.x, point.y, point.z);
color.setHSL(
(i + Math.random()) / (l + 1),
(Math.random() + 0.5) / 1.5,
0.5
);
colors.push(color.r, color.g, color.b);
}
// Line2 ( LineGeometry, LineMaterial )
const geometry = new LineGeometry();
geometry.setPositions(positions);
geometry.setColors(colors);
if (!this.lineMaterialV2) {
this.lineMaterialV2 = new LineMaterial({
color: 0xffffff,
linewidth: 0.0025, // in pixels
vertexColors: VertexColors,
dashed: false
});
}
const line = new Line2(geometry, this.lineMaterialV2);
line.computeLineDistances();
return line;
}
关于锯齿的问题
需要用到postprocessing的FXAAShader, 放在OutlinePass等特效之后来实现,比如:
// import {
// OutlinePass, RenderPass, OrbitControls, EffectComposer, ShaderPass,FXAAShader,
// SceneUtils } from 'three-full';
const composerOutline = new EffectComposer(this.renderer);
const fxaaPass = new ShaderPass(FXAAShader);
fxaaPass.material.uniforms.resolution.value.x = 1 / (window.innerWidth * pixelRatio);
fxaaPass.material.uniforms.resolution.value.y = 1 / (window.innerHeight * pixelRatio);
fxaaPass.renderToScreen = true;
// const vec = new Vector2(window.innerWidth, window.innerHeight);
// const outlinePass = new OutlinePass(vec, this.scene, this.camera);
composerOutline.addPass(fxaaPass);