threejs学习笔记--使用几何体

/*** 几何形状 ***/
new THREE.CubeGeometry(长, 宽, 高, 长的分割, 宽的分割, 高的分割);                           // 立方体
new THREE.PlanGeometry(长,宽, 长的分割, 宽的分割);                                          // 平面
new THREE.SphereGeometry(半径, 经度切片, 纬度分割, 经度分割, 经度跨过, 纬度开始, 纬度跨过); // 球体
new THREE.CircleGeometry(半径, 切片数, 开始, 跨过角度);                                     // 圆形
new THREE.CylinderGeometry(顶部面积, 底部面积, 高, 圆分割, 高分割, 是否没有顶面和底面);     // 圆台
new THREE.TetrahedronGeometry(半径, 细节);  // 正四边形
new THREE.OctahedronGeometry(半径, 细节);   // 正八边形
new THREE.IconsahedronGeometry(
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);    
let renderer = new THREE.WebGLRenderer();   
renderer.setSize(window.innerWidth, window.innerHeight);  
renderer.setClearColor(0xEEEEEE,1.0);
renderer.shadowMapEnabled = true;//告诉渲染器我需要阴影
document.body.appendChild(renderer.domElement);  

//首先在场景里添加一个光源  
let spotLight = new THREE.SpotLight(0x00ff00);  //通过spotLight()方法创建一个光源  
spotLight.position.set(-40,60,-10);   //灯光在这个位置照射场景  
spotLight.castShadow = true;
scene.add(spotLight);                 //加入场景  


//创建一个平面
let planeGeometry = new THREE.PlaneGeometry(100,50);
let planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff} );
let plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.receiveShadow = true;//接收阴影
plane.rotation.x = -0.5*Math.PI;  //x轴旋转-90度
plane.position.set(15,0,0);
scene.add( plane ); 

//创建一个圆
let circleGeometry = new THREE.CircleGeometry(3,100);//第二个参数越大,越接近圆,如果参数为3(最小值),则是三角形,参数为4,则是矩形
let circleMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff} );
let circle = new THREE.Mesh(circleGeometry,circleMaterial);
circle.receiveShadow = true;//接收阴影
circle.rotation.x = -0.5*Math.PI;  //x轴旋转-90度
circle.position.set(7,5,0);
scene.add( circle ); 

//创建一个方块
let cubeGeometry = new THREE.CubeGeometry(4,4,4);
let cubeMaterial = new THREE.MeshLambertMaterial( {color:0x7777ff} );//{color: 0xff0000}
let cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.castShadow = true;//投射阴影
cube.position.set(-8,3,0);
scene.add( cube ); 
 
//创建一个球体
let sphereGeometry = new THREE.SphereGeometry(4,20,20);
let sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x7777ff} );
let sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = true;
sphere.position.set(20,4,2);
sphere.scale.set(1.5,1.5,1.5);//缩放
scene.add( sphere ); 

//创建一个圆柱
let cylinderGeometry = new THREE.CylinderGeometry(2,2,5);  //顶部或底部为0,则变成圆锥
let cylinderMaterial = new THREE.MeshLambertMaterial( {color:0x7777ff} );//{color: 0xff0000}
let cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
cylinder.castShadow = true;//投射阴影
cylinder.position.set(-4,3,-8);
scene.add( cylinder ); 

//创建一个圆环
let torusGeometry = new THREE.TorusGeometry(5,1,50,50);  //还有第五个参数控制是否绘制完整一个圆环
let torusMaterial = new THREE.MeshLambertMaterial( {color:0x7777ff} );//{color: 0xff0000}
let torus = new THREE.Mesh( torusGeometry, torusMaterial );
torus.position.set(-4,6,12);
scene.add( torus ); 

//创建一个环面扭结
let torusKnotGeometry = new THREE.TorusKnotGeometry(5,1,50,50);  //
let torusKnotMaterial = new THREE.MeshLambertMaterial( {color:0x7777ff} );//{color: 0xff0000}
let torusKnot = new THREE.Mesh( torusKnotGeometry, torusKnotMaterial );
torusKnot.castShadow = true;//投射阴影
torusKnot.position.set(20,12,16);
scene.add( torusKnot ); 

//利用PolyhedronGeometry创建多面体
let vertices = [1,0,1,1,0,-1,-1,0,-1,-1,0,1,0,1,0] ; //点坐标
let faces = [0,1,2,3,0,1,4,1,2,4,2,3,4,3,0,4] ;      //那几个点构成面

function createMesh(geometry){
    var meshMaterial = new THREE.MeshNormalMaterial();
    meshMaterial.side = THREE.DoubleSide; //侧面
    var wireFrameMaterial = new THREE.MeshBasicMaterial();
    wireFrameMaterial.wireframe = true;//是否显示线框

    var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,[meshMaterial,wireFrameMaterial]);//创建网格

    return mesh;
}
 let polyhedron= createMesh(new THREE.PolyhedronGeometry(vertices,faces));
 polyhedron.scale.set(3,3,3);//缩放
 scene.add(polyhedron);
 
 //创建一个正20面体
let icosahedronGeometry = new THREE.IcosahedronGeometry(4,0);  //
let icosahedronMaterial = new THREE.MeshLambertMaterial( {color:0x7777ff} );//{color: 0xff0000}
let icosahedron = new THREE.Mesh( icosahedronGeometry, icosahedronMaterial );
icosahedron.castShadow = true;//投射阴影
icosahedron.position.set(20,12,-10);
scene.add( icosahedron ); 

//坐标轴辅助    
let axes = new THREE.AxisHelper(100);    
scene.add(axes); 

//相机
camera.position.set(-30,40,30);
camera.lookAt(scene.position);
//相机往x轴移动10单位  
camera.lookAt(new THREE.Vector3(10,0,0));  


//动画(循环渲染) 
let step=0;
function updata(){  

    step+=0.04;
    //球体y轴运动
    sphere.position.y=20+(10*(Math.cos(step)));
    sphere.position.y=2+(10*Math.abs(Math.sin(step)));
    //方块y轴运动
    cube.position.y=20+(10*(Math.cos(step)));
    cube.position.y=2+(10*Math.abs(Math.sin(step)));
    //方块自我旋转
    cube.rotation.x+=0.02;
    cube.rotation.y+=0.02;
    cube.rotation.z+=0.02;
    //圆环自我旋转
    torus.rotation.x+=0.02;
    
    renderer.render(scene, camera);  
   requestAnimationFrame(updata);  
}  
updata(); 
半径, 细节); // 正十二边形new THREE.TorusGeometry(半径, 管道半径, 纬度分割, 经度分割, 圆环面的弧度); // 圆环面