Three.js --- 快速入门（2）

1、创建动画渲染函数

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

2、创建控件对象，并添加鼠标事件

    //创建控件对象。相机对象camera作为参数，控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera);

    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);

3、添加辅助坐标系

    // 辅助坐标系
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);

4、插入多个几何体

    let scene = new THREE.Scene();

    // 创建网格模型 --- 正方体
    let geometry1 = new THREE.BoxGeometry(100, 100, 100);
    let material1 = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    // 将网格模型添加到场景中
    let mesh1 = new THREE.Mesh(geometry1, material1);
    scene.add(mesh1);

    // 创建网格模型 --- 球体
    let geometry2 = new THREE.SphereGeometry(60, 40, 40);
    let material2 = new THREE.MeshLambertMaterial({
        color: 0xff00ff
    })
    // 将网格模型添加到场景中
    let mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.translateY(120); // 球体沿Y轴正方向平移120
    scene.add(mesh2);

    //创建网格模型 --- 圆柱体
    let geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
    let material3 = new THREE.MeshLambertMaterial({
        color: 0xffff00
    });
    let mesh3 = new THREE.Mesh(geometry3, material3);
    mesh3.translateX(120);
    // mesh3.positon.set(120, 0, 0);  // 设置mesh3模型对象的xyz坐标为120,0,0
    scene.add(mesh3);

5、创建不同材质，含半透明

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

    // 创建网格模型
    // 基础材质对象---不受光照影响---没有棱角感
    let geometry1 = new THREE.SphereGeometry(60, 40, 40);
    let material1 = new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        wireframe: true  // 线条模式渲染（整个球体被线条包围）
    });
    // 与光照计算---漫反射---产生棱角感
    let geometry2 = new THREE.SphereGeometry(60, 40, 40);
    let material2 = new THREE.MeshLambertMaterial({
        color: 0x00ff00,
        transparent: true,  // 开启半透明
        opacity: 0.5        // 半透明程度
    });
    let geometry3 = new THREE.SphereGeometry(60, 40, 40);
    let material3 = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        specular: 0x444444,   // 镜面反射
        shininess: 30,
    });
    let mesh1 = new THREE.Mesh(geometry1, material1);
    mesh1.translateX(120);
    let mesh2 = new THREE.Mesh(geometry2, material2);
    mesh2.translateY(120);
    let mesh3 = new THREE.Mesh(geometry3, material3);
    scene.add(mesh1);
    scene.add(mesh2);
    scene.add(mesh3);

6、光照效果设置

    // 点光源1
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中

    // 点光源2  位置和point关于原点对称
    var point2 = new THREE.PointLight(0xffffff);
    point2.position.set(-400, -200, -300); //点光源位置
    scene.add(point2); //点光源添加到场景中

    //环境光---环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

7、其它