threejs 常用代码库

材质种类

• MeshBasicMaterial：为几何体赋予一种简单的颜色，或者显示几何体的线框
• MeshDepthMaterial：根据网格到相机的距离，该材质决定如何给网格染色
• MeshNormalMaterial：根据物体表面的法向量计算颜色
• MeshFaceMaterial：这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色
• MeshLambertMaterial：考虑光照的影响，可以创建颜色暗淡，不光亮的物体
• MeshPhongMaterial：考虑光照的影响，可以创建光亮的物体
• ShaderMaterial：使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的着色方式。
• LineBasicMaterial：可以用于THREE.Line几何体，从而创建着色的直线
• LineDashedMaterial：类似与基础材质，但可以创建虚线效果

基本图形

//立方体
var cubeGeometry = new THREE.BoxGeometry(15,15,15,1,1,1);
var cubeMaterial = new THREE.MeshNormalMaterial({wireframe : true});  //材质
 
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
var border = new THREE.EdgesHelper( cube,0xffff00 );  //添加边框
scene.add(cube);
scene.add(border);
 
//圆柱体
var cylinderGeometry = new THREE.CylinderGeometry(8, 8,10,30,30);
var cylinderMaterial = new THREE.MeshNormalMaterial();
var cylinder = new THREE.Mesh(cylinderGeometry,cylinderMaterial);
cylinder.position.x = -10;
cylinder.position.y = -5;
cylinder.position.z = 25;
cylinder.castShadow = true;
scene.add(cylinder);
 
//球体
var sphereGeometry = new THREE.SphereGeometry(7, 25, 25);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
 
// position the sphere
sphere.position.x = 0;
sphere.position.y = 0;
sphere.position.z = 0;
sphere.castShadow = true;
 
// add the sphere to the scene
scene.add(sphere);
 
//圆环
var torusGeometry = new THREE.TorusGeometry(10,3,20,20);
var torusMaterial = new THREE.MeshBasicMaterial();
var tours = new THREE.Mesh(torusGeometry,torusMaterial);
tours.position.x = 10;
tours.position.y = -10;
tours.position.z = -40;
tours.castShadow = true;
 
scene.add(tours);我们通过position属性