• Three.js


    定义:
    three,js,一WebGL引擎(也叫库),基于javaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供大量特性与API以绘制3D场景于浏览器。
    WebGL:Web图形库,一组浏览器的API,可以无需其他插件,独立渲染3D场景
    GPU:图形处理单元,计算机部件,负责在显示器上绘制显示图形 
    视频:Web 3D可视化学习技术栈选择(opens new window)

    下面主要大家谈谈怎么学习Web3D可视化,具体说就是怎么学习WebGL、Three.js、3D建模等。

    #学前Web前端基础

    在学习WebGL和Three.js之前,首先确保你有web前端基础,最差也要掌握HTMl、CSS、JavaScript(含es6),对nodejs也要有一定的了解,主要是搭建开发环境也离不开nodejs,如果你没有相关基础请提前学习。

    如果没有前端基础,请学习Web前端入门视频教程(opens new window)

    #Web3D项目开发——前端基础

    WebGL和threejs入门,对web前端要求比较低,如果是开发web3d项目,你肯定需要系统学习web前端,毕竟web3d也是建立在普通web前端基础上。

    关于web前端技术栈,你可以通过b站视频(web前端都需要学习什么? (opens new window))了解。

    #three.js广泛应用

    Three.js是一款基于原生WebGL封装通用Web 3D引擎,在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。

    只要你有Web3D可视化的需求,基本上都可以首选学习Three.js。

    #如何学习Three.js three.js学习文档

    有没有原生WebGL基础,你都可以直接学习Three.js,刚刚入门three.js时候,可以先不用学习WebGL,当你需要进阶深入学习Three.js的时候,最好先去学学原生WebGL,了解了解图形学相关理论知识,即便只是稍微入门WebGL,那对于three.js深入学习帮助都是很大的。

    #WebGL

    原生WebGL和图形学是Three.js的底层知识,学习难度相对大些,尤其是没有计算机图形学基础的同学。

    我的建议是通过咱们课程先入门原生WebGL,渲染管线和着色器语法有一定的了解,最后根据个人情况考虑要不要深入学习图形学相关理论知识。

    关于计算机图形学相关的理论书籍,初学者也不用上来就看,可以有一定three.js和原生WebGL基础在翻看。

    书籍推荐: 入门:《WebGL编程指南》 图形学:《交互式计算机图形学基于WebGL的自顶向下方法》

    #3D建模——Blender

    有些Web3D可视化项目,可能需要通过3D建模软件绘制模型,一般可以通过Blender、3dmax、c4d等任何三维软件实现。

    对于3D建模,一般工作的时候,都是美术负责,当然部分公司,也可能会要求程序员3D建模。

    即使公司日常是美术负责3D建模,不过作为WebGL开发,学习一下3D建模知识也是有一定必要性的,这对于Web3d项目开发还是很有帮助的,只不过要求没有美术那么高而已。

    关于3D建模,对于程序员而言,可以选择Blender学习,Blender更轻量,且开源免费。

    如果你们公司的美术用的三维软件不是Blender,其实你也可以建议学习下,这样与threejs配合更加方便。

    Bledner视频教程——Web3D方向(opens new window)

    #Cesium

    Cesium也是一款WebGL的3D引擎,相比Three.js封装更进一步,主要是给GIS行业使用,并不像three.js那么通用,如果你不是GIS专业方向,可以不用学习,如果你是GIS方向,可以同时学习WebGL、Three.js和Cesium。

  • 相关阅读:
    Python sorted()函数
    ESbuild 简介
    Kubernetes亲和性学习笔记
    详解BFS,Dijkstra算法,Floyd算法是如何解决最短路径问题的
    MySQL修改root账号密码
    外骨骼机器人关键技术与核心问题
    java毕业设计采购系统mybatis+源码+调试部署+系统+数据库+lw
    (数据科学学习手札157)pandas新增case_when方法
    训练集测试集验证集的区别
    前端面试0906
  • 原文地址:https://blog.csdn.net/luoxiaonuan_hi/article/details/133293607