three.js学习

Posted on Edited on In , ,

最近看见太多three.js做出来的有意思的东西了于是准备系统的学一下

three.js

学习计划和学习记录

2023.11.25

计划

  • 搭建vue环境
  • 完成官网盒子

    过程

    安装+复制官网代码运行，整体来说十分简单。

踩坑

  1. 官方包是不支持Ts的（我使用的是vue+ts），所以要按照包@types/three。
    npm i --save-dev @types/three
    另一个方法：
    创建或查找shims-vue.d.ts文件，加入： 
    1
    2
    3
    4
    5
    6
    declare module '*.vue' {
      import Vue from 'vue'
      export default Vue
    }
    //declare module 'xxx'对应库名
    declare module 'three'
    重启后生效

2021.11.26

计划

待执行计划

  • 看连接文章

Three.js

概念

前置知识

webGl和OpenGl

前端也要懂图形化： 浅谈 WebGL 技术 - 掘金 (juejin.cn)(后序阅读)

WebGL是一项结合了HTML5和JavaScript，用来在网页上绘制和渲染复杂三维图形的技术。WebGL通过JavaScript操作OpenGL接口的标准，把三维空间图像显示在二维的屏幕上。

OpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ，OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集，针对手机、游戏主机等嵌入式设备而设计。

Canvas

Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL。

Threejs

Three.js是基于webGL的封装的一个易于使用且轻量级的3D库

应用场景

3D游戏、3D模型展示、数据可视化、web VR、

例子：跳一跳小游戏

前置准备

  • 浏览器
  • 基础的几何知识（三维坐标系）
  • 模块化导入库知识

开始

1. 三大要素

场景（scene）、相机（camera）、渲染器（renderer）

建模软件也是这一套逻辑

场景

var scene = new THREE.Scene()

相机

透视投影相机（perspectiveCamera）【重要】

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

正交投影相机（OrthographicCamera ）

微信跳一跳就是用的这个吧

var camera = new THREE.OrthographicCamera( left,right, top,bottom, near, far )

渲染器

var renderer = new THERR.WebGLRenderer();

2.基本元素

建模软件也是这一套逻辑+1

物体
  • 几何体模型（Geometry）：物体
  • 材质（Material）：皮肤
  • 网格（Mesh）：物体的展现形式
光源