初识three.js

老规矩先看效果图

这里可以看到我创建了一个立方体，并且带有自动旋转和手动旋转的功能，接下来我们逐一介绍

安装three.js

npm install three

安装完成后引入就可以使用了，有两种引入方式

1. 全部引入

    import three from "three";

2. 按需引入引入需要的部分

import { Scene,  PerspectiveCamera, ... } from "three";

创建基本立方体

    import { 
        Scene,  PerspectiveCamera, WebGLRenderer,
        BoxGeometry, MeshMatcapMaterial, Mesh, 
        Color
    } from "three";
    // 场景
    const scene = new Scene();
    // 设置场景颜色
    scene.background = new Color( 0xF0F1F5 );
     // 摄像机
    const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

    // 几何体
    const geometry = new BoxGeometry();
    // 材质
    const material = new MeshMatcapMaterial( { color: 0x00FFFF } );
    // 网格
    const cube = new Mesh( geometry, material );
    // 场景中添加网格
    scene.add( cube );

    camera.position.z = 5;
    
    // 渲染
    renderer.render( scene, camera );

这样我们便可以创建好了一个立方体,只是现在还不明显，我这里对基本的类型创建就不多介绍了注释上都有，下面也有简单的介绍。

scene 场景

scene 用来创建一个场景，摄像机、物体、灯光都应该放在这里。
更多详情请点击这里

PerspectiveCamera 摄像机

PerspectiveCamera 这一摄像机使用 perspective projection（透视投影）来进行投影。
更多详情请点击这里
这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

WebGLRenderer 渲染器

WebGL Render 用 WebGL 渲染出你精心制作的场景。

更多详情请点击这里

BoxGeometry 立方缓冲几何体

BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。

更多详情请点击这里

MeshMatcapMaterial 材质

MeshMatcapMaterial 由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗，他只是材质中的一种。

更多详情请点击这里

Mesh网格

表示基于以三角形为polygon mesh（多边形网格）的物体的类。

更多详情请点击这里

让立方体动起来

    // 动画
    function animate() {
        requestAnimationFrame( animate );
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        // 渲染
        renderer.render( scene, camera );
    };

    // 执行
    animate();

原理非常简单，我们使创建好的立方体的x、y坐标不断地旋转就好。

增加手动旋转立方体

这个手动旋转立方体其实并不是真的在旋转立方体，而是在旋转我们的相机，我们可以使用 OrbitControls 来让指定相机围绕着目标进行轨道运动，但想使用 OrbitControls 需要在但如引入一次，因为他不是直接存在three中

引入

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

使用

const controls = new OrbitControls( camera, renderer.domElement );

第一个参数是指要被控制的相机。

第二个参数是指用于事件监听的HTML元素, 通常是要渲染到页面中的dom。

现在就实现了旋转立方体的功能。

结语: 天才无非是长久的忍耐，努力吧!