WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 一对一班

Three.js圆形平面CircleGeometry

构造函数CircleGeometry参数2表示圆形平面圆周方向细分数,默认值8,下面代码中设置的是30,你可以看到圆形圆周方向比较光滑,你可以尝试把该参数设置为较低的值,比如默认值8,你可看到显示效果是一个正多边形,其实圆形面本质上就是一个正多边形,边数阅读,显示效果越接近于圆形。平时为了平衡性能和显示效果,会选择一个适当的值,太小不像圆形,太大影响渲染性能。

// 创建一个圆形平面,半径20,圆周方向细分数30
var plane = new THREE.CircleGeometry(20,30)
var material = new THREE.MeshPhongMaterial({
    color: 0x00ff00,
    // 矩形平面网格模型默认单面显示,可以设置side属性值为THREE.DoubleSide双面显示
    side: THREE.DoubleSide,
});
var mesh = new THREE.Mesh(plane, material);

如果为了创建一个完整的圆形平面,构造函数CircleGeometry参数3和参数4不用设置,这两个参数用于角度设置,如果你想创建一个扇形轮廓可以设置这两个参数,参数3默认值是0,参数4默认值是2*Math.PI

// 扇形效果
new THREE.CircleGeometry(20,30,0,1.5*Math.PI)
本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com