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 中导出的数据,桌子这些重复的数据就只用了一个模型,来减少加载文件的数据大小;然后进行变换得到它实际的位置,发现设置矩阵没有用,只能单独设旋转(四元数),平移,缩放;
如下: