Threejs 传入顶点数据 设置

threejs 什么都写好了,于是我就把自己的webgl 迁移到threejs上实现

加载自己定义的json文件,得到顶点,法向量,颜色的数据,怎么在threejs 中设置?

 

var geometry = new THREE.BufferGeometry();

把得到数据设置到attribute 中;

geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ));
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ));
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 4 ) );
geometry.addAttribute( 'index', new THREE.Uint16BufferAttribute( indices, 1 ));

position 对应第是顶点;

normal 对应的是 法向量

color 对应的是颜色

index 对应的是下标,

然后设置材质对象, 

var material = new THREE.MeshLambertMaterial( {

     shininess: 0,
    side: THREE.DoubleSide,
    vertexColors: THREE.VertexColors,
    //map:meshMaterialMap
} );
vertexColors: THREE.VertexColors,这个必须设置成THREE.VertexColors,它计算的时候就以顶点颜色来计算颜色;
其它的参数:


var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );//添加进场景

如果要在模型复用旋转什么的,比如我从revit 中导出的数据,桌子这些重复的数据就只用了一个模型,来减少加载文件的数据大小;然后进行变换得到它实际的位置,发现设置矩阵没有用,只能单独设旋转(四元数),平移,缩放;

如下:

Threejs 传入顶点数据 设置_第1张图片

 

你可能感兴趣的:(threejs)