Three.js（三）通过简单使用光源提供一个基础封装类

这篇文章主要是为了提供一个基础的封装类，但是因为直接硬生生的代码会感觉很不友好，所以就是把简单使用光源的这部分作为这个类的简单demo了。

效果图

附带功能

1. 摄像头控制器
2. 环境光和平行光的使用
3. 网格的创建
4. 网格辅助功能
5. 性能监测工具
6. 坐标轴辅助
7. 自适应
8. 创建地板

以上功能都是提供到能够使用的程度，至于实现其他的效果就要自己去看api了，毕竟我这篇文章的本意是提供一个可以开箱即用的类。

代码

html

<style>
    body {
        margin: 0;
    }
    canvas {
        width: 100%;
        height: 100%
    }
</style>
<div id="room" style="position: absolute; left: 0px; top: 0px"></div>
<script src="./build/three.min.js"></script>
<script src="./build/OrbitControls.js"></script>
<script src="./build/stats.min.js"></script>
<script src="./js/basic.js"></script>
<script>
   let demo = new basicThree()
    demo.initModel()
</script>

basic.js

class basicThree {
    constructor(props) {

        // three 3要素
        this.renderer; //渲染器
        this.camera; //摄像头
        this.scene; //场景
        //光源
        this.ambientLight; //环境光
        this.pointLight; //平行光
        //摄像头控制
        this.controls;

        this.init()
    }
    init() {

        this.initScene()
        this.initCamera()
        this.initRender()
        /* ------ 辅助函数--------------*/

        this.orbitHelper() //摄像头辅助
        this.statsHelper() //性能辅助
        this.animate()

        window.onresize = this.onWindowResize.bind(this);
    }
    initScene() { //场景
        this.scene = new THREE.Scene();
    }
    initCamera() { //摄像头
        let camera = new THREE.PerspectiveCamera(85, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        this.camera = camera;
    }
    initRender() { //渲染器
        let renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setSize(window.innerWidth, window.innerHeight);

        let container = document.getElementById('room');
        container.appendChild(renderer.domElement);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;

        this.renderer = renderer;
    }
    initLight() {
        let ambientLight = new THREE.AmbientLight("#111111");
        this.scene.add(ambientLight);
        let pointLight = new THREE.PointLight("#ffffff");
        pointLight.position.set(15, 30, 10);
        //告诉平行光需要开启阴影投射
        pointLight.castShadow = true
        this.scene.add(pointLight);
        this.ambientLight = ambientLight; //环境光
        this.pointLight = pointLight; //平行光  
    }
    initModel() {
        // this.gridHelper() //网格辅助
        this.initLight()
        this.basicfloor()
        this.lambertBox()
    }
    orbitHelper() { //创建摄像头辅助
        let controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls = controls;
    }
    gridHelper() { // 创建网格辅助
        var gridHelper = new THREE.GridHelper(20, 20, 0x404040, 0x404040);
        this.scene.add(gridHelper);
    }
    statsHelper() { //性能插件
        this.stats = new Stats();
        document.body.appendChild(this.stats.dom);
    }
    axisHelper() { //坐标轴辅助
        var helper = new THREE.AxisHelper(10);
        this.scene.add(helper);
    }
    onWindowResize() { //自适应
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }
    render() { //渲染
        if (this.stats) this.stats.update();
        this.renderer.render(this.scene, this.camera);
    }
    animate() {
        this.render()
        requestAnimationFrame(this.animate.bind(this));
    }
    basicfloor() { //创建地板
        var planeGeometry = new THREE.PlaneGeometry(100, 100);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0xaaaaaa
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -0;
        //告诉底部平面需要接收阴影
        plane.receiveShadow = true;
        this.scene.add(plane);
    }
    lambertBox() {
        var cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
        var cubeMaterial = new THREE.MeshLambertMaterial({
            color: 0x00ffff
        });
        let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 5;
        cube.position.y = 5;
        cube.position.z = -5;
        //告诉立方体需要投射阴影
        cube.castShadow = true;
        this.scene.add(cube);
    }
}