three.js的一些基本使用

three.js的一些基本使用记录

创建一个旋转的正方体

步骤：
1.初始化渲染器

          let mesh ;
          //初始化渲染器
          let  renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth,window.innerHeight) //设置宽高
          document.body.appendChild(renderer.domElement)  //添加到dom

2.初始化场景
 //初始化场景
           let scene = new THREE.Scene()

3.初始化相机
 //创建一个相机（参数1：相机的视野参数越大视野也越大，参数2：宽高比，参数3参数4：近裁面和远裁面，设置可以看到的范围）
          let camere = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 200);
             camere.position.set(0,0,15) //x ,y ,z位置
4.创建一个模型
 //创建一个模型
          function init() {
               let geomery = new THREE.BoxGeometry(2,2,2)
               let material = new THREE.MeshNormalMaterial();//创建一个七彩材质
               mesh = new THREE.Mesh(geomery,material) ;//创建一个网格
               scene.add(mesh); //将网格添加到场景中
          }
5.执行动画
//运行动画
          function animate() {
              //递归循环调用函数
                requestAnimationFrame(animate);
                mesh.rotation.x+=0.01; //每帧网格旋转0.01的弧度  半圈是180度
                mesh.rotation.y+=0.02;
                renderer.render(scene,camere)  //渲染界面
          }