Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

    • 课程部分案例3D效果速览
    • 课程特点
    • 学前基础、如何学习3D
    • 1.Three.js快速入门

    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 0.学前说明
    郭隆邦
    2023-01-20
    目录

    学前基础、如何学习3D

    # 3.学前基础、如何学习Web3D可视化(WebGL Threejs Blender建模)

    视频: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

    有没有原生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。

    课程特点
    1. threejs文件包下载和目录简介

    ← 课程特点 1. threejs文件包下载和目录简介→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式