Three js 学习笔记 1

如何开始

Threejs 是入门Web 3D门槛比较低的一个库。Threejs是对WebGL的一个封装实现，使开发者不必具备图形学的基础就可以进行Web 3D应用的开发。但门槛低不代表没有门槛，Threejs中提供了很多封装好的工具类，开发者必须对这些概念依依学习理解之后，才能入门开发。
从Web前端开发者的角度来讲，WebGL 相较于 Threejs 的关系就像是原生JavaScript相较于JQuery。我们在能够熟练使用Threejs实现各种效果后再涉足比较底层WebGL，就能循序渐进得不断取得阶段性成就。这种相对平滑的学习曲线对我来说是比较友好的，毕竟成就感是坚持学习的最好原动力。

hello cube

如果你想快速地写出一个在网页上旋转的立方体，并感受web3d的开发魅力。你可以从githu上下载threejs源码，并在html中引用。快速粘贴threejs官网的实力代码，就能愉快的看见hello cube了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>threejs demo 1</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <script src="three.js"></script>
    <script>
        const {
            REVISION,
            Scene,
            PerspectiveCamera,
            WebGLRenderer,
            BoxGeometry,
            MeshBasicMaterial,
            Mesh
        } = window.THREE

        const scene = new Scene();
        const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        scene.add(camera);
        document.body.appendChild(renderer.domElement);

        const geometry = new BoxGeometry(1, 1, 1);
        const material = new MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {
            cube.rotation.x += 0.005;
            cube.rotation.y += 0.005;
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        window.addEventListener('resize', onWindowResize);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>

Threejs 项目

如果想要继续学习的话，建议使用基于前端模块化打包工具生成的项目模板开发。比如umi、parcel、vue-cli、create-react-app。这样做有以下几点好处

  • 这些工具只需要一行命令就能建立项目模板，开箱即用
  • 方便地使用yarn、npm、pnpm、cnpm 进行模块安装，无需繁琐地寻找下载相关依赖库
  • 框架支持热更新，一边写代码，页面能一边实时预览，所见即所得
  • 打包工具可以编译整个项目，发布方便

主要还是前3点，在学习过程中能够给我们极大的方便和助力，让我们专注库的学习。如果你不熟悉上面任何一款打包框架，建议花一点时间学习一下，只需了解如何使用即可。

环境准备

  • 安装node，npm，这是打包依赖运行环境
  • 安装框架命令行工具

下面以umi为例简单演示相关步骤

  • 打开命令行（cmd/iterm），按照umi文档新建项目

  • 在src下新建component/dmeo1/index.js，并写入以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    import * as THREE from 'three';

    const {
        REVISION,
        Scene,
        PerspectiveCamera,
        WebGLRenderer,
        BoxGeometry,
        MeshBasicMaterial,
        Mesh
    } = THREE

    const scene = new Scene();
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    const renderer = new WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    scene.add(camera);
    document.querySelector("#box").appendChild(renderer.domElement);

    const geometry = new BoxGeometry(1, 1, 1);
    const material = new MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    function animate() {
        cube.rotation.x += 0.005;
        cube.rotation.y += 0.005;
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
    animate();

    window.addEventListener('resize', onWindowResize);

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

  • 打开src/page/index.tsx 修改代码为下面的代码

    1
    2
    3
    4
    5
    6
    7
    import '@/component/demo1';

    export default function IndexPage() {
      return (
        <div id="box"></div>
      );
    }

  • 打开命令行，执行以下命令

    1
    2
    3
    4
    5
    6
    7
    # 安装threejs依赖库
    > npm i three -S
    # 启动项目
    > npm start

    # 启动浏览器预览应用
    start http://localhost:8000/

  • 现在你应该在页面中看到一个旋转的正方体

道阻且长

能跑起来demo还是很有成就感的，后面就是学习Threejs的各种概念，须戒骄戒躁。不积跬步无以至千里，不积小流无以成江海。Threejs的概念相对不是很多，跟着官方示例一步一步来就行了。

#threejs
Three js 学习笔记 1
https://jacksiongt.github.io/2023/02/21/Threejs/threejs学习笔记1/
作者
Jacksion
发布于
2023年2月21日
许可协议