前端Three.js入门（一）-Three的第一个简单的页面

前言

小编想学点3d酷炫效果，迫不及died的点开了b站，立马点击第一个《老陈打码》的视频，开始了我的Three.js美妙（痛苦）之旅…先附上官网链接：https://threejs.org/

1.Three的简单3D页面

首先，我们可以在终端新建一个文件夹，命名为01-three初学习。然后在终端开始我们的项目安装。

# 初始化项目01-start_three
npm init vite@latest
# 一开始我们不用任何的框架，选择Vanilla即可，然后再选择JavaScript

然后修改style.css的代码如下，可以把样式放进public的css下面（public/css）

* {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;//将元素设置为块级元素，使其占据一整行
  position: fixed;//将元素固定在视口中，即使页面滚动，它也不会移动。
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

然后我们删除main.js文件。然后在index.html文件里面先引入css样式。

然后我们在终端开始安装three.js

npm install three

安装好之后我们就可以在main.js里面开始创建我们的第一个3d页面。

1-导入three.js

import * as THREE from 'three'

2-创建场景与相机

//创建场景
const scene = new THREE.Scene()
//创建相机
const camera = new THREE.PerspectiveCamera(
  45,//视角
  window.innerWidth / window.innerHeight,//宽高比
  0.1,//近平面
  1000//远平面
);

3-创建渲染器

• 这里创建了一个WebGL渲染器实例。WebGL是一种基于OpenGL ES的JavaScript API，用于在浏览器中渲染2D和3D图形。
• THREE.WebGLRenderer是Three.js中用于WebGL渲染的核心类，它会利用GPU硬件加速来高效地渲染3D场景。
• renderer.domElement是渲染器生成的元素，它是WebGL渲染的载体。
• 通过将renderer.domElement添加到document.body中，渲染器生成的3D内容会显示在网页中。

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

  4-创建几何体、材质和网格

  1. 几何体（Geometry）

  几何体定义了3D物体的形状和结构，即物体的顶点、边和面。它描述了物体在三维空间中的几何信息。

  1. 材质（Material）

  材质定义了物体的外观，包括颜色、纹理、透明度、光照效果等。它决定了物体如何与光线交互以及如何被渲染。

  1. 网格（Mesh）

  网格是将几何体和材质结合起来，形成一个可以渲染的3D物体。它是几何体和材质的载体，决定了物体在场景中的位置、旋转和缩放。

  //创建几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  //创建材质
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  //创建网格
  const cube = new THREE.Mesh(geometry, material);
  //将网格添加到场景中
  scene.add(cube);
  

  5-我们可以设置一下相机的位置

  1·相机的作用：

  
  （图片来源网络，侵删）
  • 相机是观察3D场景的“眼睛”，它决定了我们能看到什么以及如何看到。
  • 在Three.js中，相机（如PerspectiveCamera）定义了视角、视野范围（FOV）、近平面、远平面等参数，用于渲染场景中的可见部分。

    2·为什么需要设置相机位置：

    (1) 物体不可见

    
    （图片来源网络，侵删）
    • 如果相机和物体都位于原点，相机可能会“卡”在物体内部，导致无法正确渲染物体。
    • 例如，你的立方体位于原点，如果相机也位于原点，相机可能会被立方体遮挡，导致画面一片空白。

      (2) 视角不合适

      • 如果相机离物体太近或太远，可能会导致物体在画面中显得过大或过小，影响视觉效果。
      • 例如，如果相机离立方体太近，可能只能看到立方体的一部分；如果太远，立方体会显得很小。

        (3) 无法控制观察方向

        
        （图片来源网络，侵删）
        • 相机的位置决定了观察的方向。通过调整相机的位置，可以控制从哪个角度观察场景。
        • 例如，将相机放在立方体的前方、侧面或上方，会得到不同的视觉效果。

          //设置相机位置
          camera.position.set(0, 0, 5);
          camera.lookAt(0, 0, 0)//相机看向原点
          

          6-开始渲染，可以使用循环渲染，让正方体动起来

          • animate函数是一个递归调用的渲染循环，它通过requestAnimationFrame实现动画效果。
          • 在每一帧中，立方体的旋转角度被更新，然后调用renderer.render重新渲染场景，从而实现立方体的动态旋转效果。

            //渲染循环
            function animate() {
              // 递归调用渲染函数
              requestAnimationFrame(animate);
              // 旋转立方体
              cube.rotation.x += 0.01;
              // 旋转立方体
              cube.rotation.y += 0.01;
              // 渲染场景和相机
              renderer.render(scene, camera);
            }
            animate();
            

            下面是完整代码：

            //导入three.js
            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);
            document.body.appendChild(renderer.domElement);//将渲染器添加到body中
            //创建几何体
            const geometry = new THREE.BoxGeometry(1, 1, 1);
            //创建材质
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            //创建网格
            const cube = new THREE.Mesh(geometry, material);
            scene.add(cube);//将网格添加到场景中
            //设置相机位置
            camera.position.set(0, 0, 5);
            camera.lookAt(0, 0, 0)//相机看向原点
            //渲染循环
            function animate() {
              // 递归调用渲染函数
              requestAnimationFrame(animate);
              // 旋转立方体
              cube.rotation.x += 0.01;
              // 旋转立方体
              cube.rotation.y += 0.01;
              // 渲染场景和相机
              renderer.render(scene, camera);
            }
            animate();
            

            2.使用vue开发threejs

            也是先初始化好项目 npm install vite@latest，项目名看自己。然后框架我们选择vue框架+JavaScript语言编程。

            然后我们进入项目 cd threejsvue，然后先安装好依赖 npm i 还有npm i three

            然后我们在App.vue文件里面简单清理一下代码：下面代码大家可以直接复制进去（是刚刚第一节的css代码）

            
            
              
            
            
            
            * {
              margin: 0;
              padding: 0;
            }
            body{
              width: 100vw;
              height: 100vh;
            }
            canvas {
              display: block;
              position: fixed;
              left: 0;
              top: 0;
              width: 100vw;
              height: 100vh;
            }
            
            

            然后我们可以在 color: 0x00ff00 }); //创建网格 const cube = new THREE.Mesh(geometry, material); scene.add(cube);//将网格添加到场景中 //设置相机位置 camera.position.set(0, 0, 5); camera.lookAt(0, 0, 0)//相机看向原点 //渲染循环 function animate() { // 递归调用渲染函数 requestAnimationFrame(animate); // 旋转立方体 cube.rotation.x += 0.01; // 旋转立方体 cube.rotation.y += 0.01; // 渲染场景和相机 renderer.render(scene, camera); } animate();