THREE 1

尘劳迥脱事非常，紧把绳头做一场。

不经一番寒彻骨，怎得梅花扑鼻香。

three.js的学习之旅开始了。。。

实例：

 /**
      * 创建场景/模型并加入场景中
    */
    let scene = new THREE.Scene();  //创建场景

    /**
      *  更多几何体
    */
    // //长方体 参数：长，宽，高
    // var geometry = new THREE.BoxGeometry(100, 100, 100);
    // // 球体 参数：半径60  经纬度细分数40,40
    // var geometry = new THREE.SphereGeometry(60, 40, 40);
    // // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
    // var geometry = new THREE.CylinderGeometry(50, 50, 100, 25);
    // // 正八面体
    // var geometry = new THREE.OctahedronGeometry(50);
    // // 正十二面体
    // var geometry = new THREE.DodecahedronGeometry(50);
    // // 正二十面体
    // var geometry = new THREE.IcosahedronGeometry(50);
    let geometry = new THREE.BoxGeometry(80, 80, 80);  // 创建几何对象
    let geometry1 = new THREE.SphereGeometry(60, 40, 40);
    let material = new THREE.MeshLambertMaterial({  //模型的材质
      color: 0xaabbff
    })
    let mesh = new THREE.Mesh(geometry, material)  //模型等于对象+材质
    let mesh1 = new THREE.Mesh(geometry1, material)  //第二个模型
    scene.add(mesh) //将模型加入到场景中
    scene.add(mesh1)

    mesh.position.x = 305;
    mesh.position.z = 0;
    mesh.position.y = 0;
    
    
    /**
      * 光源设置
    */
    // 点光源
    let point = new THREE.PointLight(0xffffff);
    
    // 确定光源的位置，这是设置的光源从背部开始照射，所以正面看到的模型会是比较黑的，
    // 注意不要把光源设置到模型里面，否则你将看不见点光源
    point.position.set(-400, -200, -300);
    
    scene.add(point);

    // 环境光
    let ambient = new THREE.AmbientLight(0x444444)
    scene.add(ambient);



    /**
      * 相机设置
    */
    // 窗口宽高/宽高比
    let width = window.innerWidth;
    let height = window.innerHeight;
    let k = width / height;
    let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大

    // 创建相机对象
    let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)


    /**
       * 创建渲染器对象
    */
    let renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染的区域
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

    document.getElementsByTagName('div')[0].appendChild(renderer.domElement);
    // renderer.render(scene, camera);

旋转动画和 requestAnimationFrame() 函数

 /**
      *  旋转动画和 requestAnimationFrame() 函数
      *  渲染函数,定时旋转模型，不断render渲染。成为旋转动画
    */
    // let T0 = new Date();//上次时间
    // function render() {
    //   let T1 = new Date();//本次时间
    //   let t = T1 - T0;//时间差
    //   T0 = T1;//把本次时间赋值给上次时间
    //   requestAnimationFrame(render);   // 用setinterval也行，但是不如这个函数优秀
    //   renderer.render(scene, camera);//执行渲染操作
    //   mesh.rotateY(0.001 * t);//每次绕y轴旋转0.01弧度

    // }
    // render()

鼠标操作三维场景旋转缩放： 需引入控件OrbitControls.js

 /**
      *  鼠标操作三维场景旋转缩放
    */
    function render() {
      renderer.render(scene, camera);
    }
    render();  //** 必须要render一下，重新渲染，否则下面的新加入场景的属性不生效
    
    let controls = new THREE.OrbitControls(camera, renderer.domElement)
    // ** 不可以和requestAnimationFrame函数共同使用，否则冲突
    controls.addEventListener('change', render);//监听鼠标、键盘事件

注：

render(); // 必须要render一下，重新渲染，否则下面的新加入场景的属性不生效，无论是旋转效果还是鼠标控制都是不断进行render渲染场景和摄像机的过程。**

坐标系

/**
   * 坐标轴
*/
let AxesHelper = new THREE.AxesHelper(650); // 坐标系的长度
scene.add(AxesHelper);

材质的常用属性

材质的属性设置

材质的配置1: 半透明效果

 
    let geometry2 = new THREE.OctahedronGeometry(100); // 要用新材质的第三个模型 

    // 材质的配置1: 半透明效果
    let material2 = new THREE.MeshLambertMaterial({
      color: 0xff88ff, //颜色
      opctiy: 0.5,  // 透明度
      transparent: true,  // 是否开启透明度,默认false
      wireframe: true, // 将几何图形渲染为线框。 默认值为false
    })
    let mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.position.set(200, 300, 200)
    scene.add(mesh2)

材质的配置2: 高光效果

  let geometry3 = new THREE.IcosahedronGeometry(100); // 模型4

    // 材质的配置2: 高光效果
    let material3 = new THREE.MeshLambertMaterial({
      color: 0xff88ff,
      specular: 0x4488ee,
      shininess: 12
    })
    let mesh3 = new THREE.Mesh(geometry3, material3);
    mesh3.position.set(0, 300, 200)
    scene.add(mesh3)

常用的其他材质

光照效果设置

    /**
       * 光照效果设置： 上面已经设置点光源、环境光
    */
    let spotLight = new THREE.SpotLight(0xff0000)
    scene.add(spotLight)