Threejs三要素及demo

news2024/9/20 6:00:19

本文目录

前言
一、threejs三要素
- 1.1 场景Scene
- 1.2 相机Camera
- 1.3 渲染器Renderer
- 1.4 项目构建准备
二、安装Threejs
- 2.1 编写代码

前言

Three.js是一个在 MIT 许可下的 JavaScript 库，它在 WebGL 之上运行。这个库的目标就是简化处理3D内容的过程。它是一个WebGL引擎（WebGL 是一种 JavaScript API，它可以在画布中呈现三角形，而且速度非常快，因为它使用访问者的图形处理单元 (GPU)。原生 WebGL 非常困难，因为你需要手动写很多代码。但是 Three.js 消除了这个障碍，让你可以轻松创建3D场景。），基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

一、threejs三要素

场景Scene、相机Camera、渲染器Renderer。

1.1 场景Scene

场景Scene类似于一个容器或者说世界，它用于存放所有需要放在3维中存在的对象。

1.2 相机Camera

相机Camera用来决定我们观察场景的角度和位置，相机被用来模拟人眼对场景的观察，在 Three.js 中，相机本身是不可见的，它仅用于计算和确定场景中物体的位置和角度。在Three.js中，我们可以拥有多个相机，但通常情况下只需要一个。相机在Three.js中类似于一个锥形体，它受到视野范围和纵横比的影响。

1.3 渲染器Renderer

渲染器它的工作是将我们的代码与设计渲染到我们的web中。在threejs中，我们通常使用 WebGLRenderer 类来进行渲染。WebGLRenderer的一个伟大之处在于它提供了丰富的功能，例如对材质、灯光、阴影和反射的支持。这使得我们能够创建出更加逼真的场景和模型，从而提高用户体验。

1.4 项目构建准备

这步如果你电脑已正常有node和yarn环境可以跳过 （跳过开始）
首先默认你电脑已经安装了node和yarn，没有安装的可自行安装。
如果你的电脑安装了volta你使用了volta安装的yarn那么可能会引起报错：

➤ YN0027: vite@unknown can't be resolved to a satisfying range
➤ YN0081: Unsafe http requests must be explicitly whitelisted in your configuration (registry.npm.taobao.org)
➤ Errors happened when preparing the environment required to run this command.

那么请删除此yarn，输入命令where yarn：
在这里插入图片描述
那么请把这个yarn删除。
如果你是mac系统，可以使用brew install yarn：

输入命令就可以看到：

（跳过结束）

接下来我们在终端中使用命令yarn init -y接着再运行命令yarn add -D vite安装前端构建工具vite：
在这里插入图片描述

安装完成。

二、安装Threejs

运行命令yarn add three：
在这里插入图片描述

2.1 编写代码

创建01threejs.html写入代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from "three";
        // 创建场景
        const scene = new THREE.Scene();

        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        )

        // 创建渲染器
        const renderer = new THREE.WebGLRenderer();
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement)
        // new THREE.BoxGeometry 创建一个立方体
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        // 设置基础材质，颜色色值为十六进制
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        // 设置Mesh（网格），网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(geometry, material);
        // 将网格对象放入到我们的场景中
        scene.add(cube);

        // 默认情况下，当我们调用scene.add()的时候，
        //物体将会被添加到(0,0,0)坐标。但将使得摄像
        //机和立方体彼此在一起。为了防止这种情况的发生，
        //我们只需要将摄像机稍微向外移动一些即可。
        camera.position.z = 5;

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

运行命令yarn dev，可以看到：
请添加图片描述

那么我们使用代码可以用以下三种方式改变背景颜色：

        scene.background = new THREE.Color(0x003400);
        scene.background = new THREE.Color("rgb(200, 150, 11)");
        scene.background = new THREE.Color("hsl(35, 90%, 31%)");

在这里插入图片描述

还可以通过图片来进行贴图背景：

        const loader = new THREE.TextureLoader();
        loader.load('../images/cute.png', function(texture) {
            scene.background = texture;
            // 这是异步的，因为下面已经在不停播放动画，所以这边没加这行代码也能生效
            // 如果每天不停播放动画那就要加上这行才会生效
            // renderer.render(scene, camera);
        });

可以看到：
在这里插入图片描述