Three.js基础概念和使用

先熟悉一下基础概念

1. 场景(Scene)：整个三维空间就称为场景，所有的物体都是在这个场景内的，我们可以理解场景就是一个大的3D容器。

2. 相机(Camera)：整个三维空间的一个观察点，相当于我们的眼睛在哪个位置看这个空间。其中相机有PerspectiveCamera（透视摄像机）和 OrthographicCamera（正交摄像机）。

   透视相机：模拟人眼所看到的景象，近大远小

   正交相机：定义一个矩形区域，只有这个区域内的物体是可见的，同时远近距离物体大小都是一样的。

3. 几何体(Gemotry)：3D的几何体，three.js提供了很多几何体例如:BoxGeometry(矩形体)、锥体( ConeGeometry)等等。

4. 材质(Material)：一个物体的材料，决定了物体的质感、颜色、光反射等。

5. 网格(Mesh)：用来包装或者加工几何体和材质，也就是几何体和材质会通过Mesh被融合到一起。

6. 光源(Light)：一个3D空间中的灯光，有平行光(DirectionalLight 太阳光就是)、点光源(PointLight)等。

7. 轨道控制(OrbitControls)：可以让相机围绕着目标运行，比如鼠标拖拽事件来旋转场景，控制场景平移、缩放等功能。

8. 光线投射(Raycaster)：计算鼠标在3D空间中点击或者滑过了什么物体。(后续文章详细说明...)

以上对几个基本的概念进行了大体的说明，先在脑海中建立这些概念。

创建一个立方体Demo

效果图如下：

<script src="./three/build/three.min.js"></script>
<script src="./three/examples/js/controls/OrbitControls.js"></script>
<script>
    // 创建场景
    const Scene = new THREE.Scene();

    // 创建相机，这里使用透视相机
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = -50;
    camera.position.y = 30;
    camera.position.z = 50;

    // 创建立方体
    const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
    // 创建一个材质
    const boxGeometryMaterial = new THREE.MeshLambertMaterial({ color: 0xff0040 });
    // 通过Mesh把立方体和材质组合到一起
    const box = new THREE.Mesh(boxGeometry, boxGeometryMaterial);
    box.position.x = 0;
    box.position.y = 5;
    box.position.z = 0;
    // 添加到场景中
    Scene.add(box);

    // 创建一个点光源
    const spotLight = new THREE.PointLight(0xffffff);
    spotLight.position.set(-60, 40, -20);
    Scene.add(spotLight);

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建轨道控制对象
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    // 开启自动旋转
    controls.autoRotate = true
    // 旋转速度设置为10，值越大旋转越快
    controls.autoRotateSpeed = 10
    // 开启缩放
    controls.enableZoom = true
     
    // render方法
    function render() {
        renderer.render(Scene, camera);
        controls.update()
        requestAnimationFrame(render);
    }
    render();

</script>

本文demo代码地址