总目录 >> threejs入门进阶到实战(目前已更新入门篇、基础篇和进阶篇)
此处点线面的基础教学比较好:http://www.yanhuangxueyuan.com/Three.js_course/face.html
其实对于threejs来说,只有点,线,以及其他形状.
知识补充:0x0000ff 0x表示16进制,ff为256,中间两个0就是0.此处采用的是RGB制
点的绘制
var geometry = new THREE.Geometry();//声明一个空几何体对象
var p1 = new THREE.Vector3(10,0,0);//顶点1坐标
var p2 = new THREE.Vector3(0,20,0);//顶点2坐标
var p3 = new THREE.Vector3(15,15,0);//顶点3坐标
geometry.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
var material=new THREE.PointsMaterial({
color:0x0000ff,
size:1.0//点对象像素尺寸
});//材质对象
var points=new THREE.Points(geometry,material);//点模型对象
sceneB.add(points);//点对象添加到场景中
会发现这个点并不符合我们的要求,因为实际的点应当是圆的.因为默认形状是像素点.因此我们需要加载适当的形状…(相当于为点加了纹理.)map: sprite,
function drawPoints(){
var sprite = new THREE.TextureLoader().load( 'images/disc.png' );//点的纹理
var geometry = new THREE.Geometry();//声明一个空几何体对象
var p1 = new THREE.Vector3(-10,0,0);//顶点1坐标
var p2 = new THREE.Vector3(0,10