three.js的学习

Threejs

1 前言

Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。

既然Threejs是一款WebGL三维引擎,那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用,以便大家了解。

参考资料:

官网Demo

官网 api 文档

Three.js入门教程

2 three 核心概念

1.1 场景

3d 世界的容器,可以在容器中,添加 地面、天空、光照、人、动物等等。

1.2 相机

用来拍摄场景中的画面,相机在场景中的位置不同,角度不同,拍摄出来的画面就不一样。

1.3 渲染器

用于将相机拍摄出来的画面,绘制到画布上。

1.4 物体

3D世界是由一个个物体组合而成的。人、车、楼等等都是一个个的物体。

1.5 光线

有了光线你看到的物体才会有各种各样的颜色,并且随着光线的反射与折射产生出更加真实的感觉。

3 安装及使用three

3.1 安装

# three的版本指定好,新版有时更新了api,可能导致之前使用的方法不起作用
npm i [email protected]

3.2 使用

  • 在脚手架搭建的项目中使用

    import Three from 'three'
    
  • 在html 页面中使用

    <script src='./three.js'>script>
    

4 threejs 初探

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>three-demotitle>
    <script src="./libs/three.min.js">script>
    <style>
      html,
      body {
        height: 100vh;
        width: 100vw;
        padding: 0;
        margin: 0;
        border: 0;
      }

      #demo {
        width: 100%;
        height: 100vh;
      }
    style>
  head>
  <body>
    <div id="demo">div>

    <script>
      const { THREE } = window;

      const {
        // 核心三件套
        Scene, // 场景
        WebGLRenderer, // 渲染器
        PerspectiveCamera, // 透视相机
          
        BoxGeometry, // 正方体几何体

        Mesh, // 网格 -- 物体

        PointLight, // 点光源
        AmbientLight, // 环境光 
      } = THREE;

      // 用于绘制3D图像的dom
      const renderDom = document.getElementById("demo");

      const width = renderDom.clientWidth; //窗口宽度
      const height = renderDom.clientHeight; //窗口高度
        
      const k = width / height; //窗口宽高比
      const s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大

      // 创建场景
      const scene = new Scene();

      // 物体的形状 -- 创建一个立方体几何对象
      const geometry = new BoxGeometry(100, 100, 100);
      // 物体材质 -- 铜、铁、颜色
      const material = new MeshLambertMaterial({
        color: 0x0000ff,
      });
      // 通过几何形状和材质创建出一个 立方体
      const mesh = new Mesh(geometry, material); //网格模型对象Mesh
      // 将物体加入到场景中
      scene.add(mesh); //网格模型添加到场景中
        
      // 添加点光源
      const point = new PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中

      // 添加环境光
      const ambient = new AmbientLight(0xfbea94);
      scene.add(ambient);

      // 创建相机
      const camera = new PerspectiveCamera();
      camera.fov = 35; //  视角度数
      camera.near = 1; // 设置相机最小拍摄距离
      camera.far = 1000; // 设置相机最大拍摄距离

      camera.position.set(350, 290, 220); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

      // 创建渲染器
      const renderer = new WebGLRenderer({
        precision: "lowp",
        alpha: true,
        antialias: true,
        logarithmicDepthBuffer: true,
      });

      renderer.setSize(width, height); // 设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色

      // 在 demo dom 中插入渲染器
      renderDom.appendChild(renderer.domElement);

      // 将相机拍摄到的画面渲染出来
      renderer.render(scene, camera);
    script>
  body>
html>

three 核心概念示例图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zrNrYOL-1687830109752)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHszuf74-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs2.png)]

透视相机图解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zSBWKOE-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\14238c00f908461ba7007348de2bc604.png)]

5 threejs 全景学习曲线

  • Scene - 场景
  • Camera - 相机
    • 透视相机
    • 正交相机
  • WebGLRenderer - 渲染器
  • 物体
    • Points - 点
    • Line - 线
    • Mesh - 多边形网格
    • Geometry - 几何体
    • Skeleton - 骨架
    • Bone - 骨骼
    • Sprite - 精灵
  • Group - 分组
  • Light - 光
    • 环境光
    • 平行光
    • 点光源
    • 聚光灯
    • 半球光
  • Texture - 纹理贴图
    • VideoTexture - 视频纹理
    • DepthTexture - 深度纹理
    • CubeTexture - 立方纹理
    • Canvas纹理
  • Material - 材质
    • 线材质
    • 点材质
    • 网格材质
    • 着色器材质
    • 阴影材质
    • 精灵材质
  • Loader - 加载器
    • 加载模型文件
    • 加载文字
    • 加载图片
    • 加载音频
    • 加载视频
    • 加载纹理
  • Animation - 动画
    • 帧动画
    • 轨道动画
    • 骨骼动画
    • 变形动画
  • Audio - 语音
  • 内置计算方法
    • 数学库
    • 路径创建
    • 形状创建

你可能感兴趣的:(three,javascript,学习,开发语言)