three.js笔记（1）

主要组成： 场景+相机+渲染器

一、场景 ： 光照+网格模型。

var scene = new THREE.Scene();//创建场景

**

• 网格模型骨架：几何体模型骨架尺寸大小、

**

var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象

• *网格材质：*几何体呈现的颜色、图片样式、透明度

  var material = new THREE.MeshLambertMaterial({ color: 0xcccccc }); //材质对象Material

• 组合网格模型：网格模型骨架 + 网格材质

  var mesh = new THREE.Mesh(geometry, material); //生成网格模型对象Mesh

• 光照：光照颜色和光的种类【环境光、点光源、平行光】

  /**

  • 光源设置 */ //点光源 var point = new THREE.PointLight(0xfccccf); point.position.set(400, 200, 300); //点光源位置

    //环境光 var ambient = new THREE.AmbientLight(0x444444);

• 将元素添加到场景中

  scene.add(mesh); //网格模型添加到场景中 scene.add(point); //点光源添加到场景中 scene.add(ambient);//环境光添加到场景中

二、相机=位置+ 视线方向 +投影方式

• 相机：位置、视线方向、投影方式
• 位置：相机或者视角源点所在位置坐标。
• 视线方向：视角源向哪里看的角度。

• 投影方式：投射投影和正射投影。

  /**

  • 相机设置 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(200, 380, 200); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

三、渲染器：创建、渲染

/**
   * 创建渲染器对象
   */
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height);//设置渲染区域尺寸
  renderer.setClearColor(0xccffff, 1); //设置背景颜色
  document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  //执行渲染操作   指定场景、相机作为参数
  renderer.render(scene, camera);

四、旋转

// 渲染函数
  // function render() {
  //   renderer.render(scene,camera);//执行渲染操作
  //   mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  // }
  // //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
  // setInterval("render()",20);

  // function render() {
  //   renderer.render(scene,camera);//执行渲染操作
  //   mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  //   requestAnimationFrame(render);//请求再次执行渲染函数render
  // }
  // render();

  let T0 = new Date();//上次时间
  function render() {
    let T1 = new Date();//本次时间
    let t = T1-T0;//时间差
    T0 = T1;//把本次时间赋值给上次时间
    requestAnimationFrame(render);
    renderer.render(scene,camera);//执行渲染操作
    mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
  }
  render();