WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 注册

Three.js视频教程

适合没有图形学或其他3D引擎基础的程序员入门,尤其对于前端工程师是更好的学习课程,如果你没有前端基础,最好预先学习一点HTML/JavaScript的知识。

课程视频链接

腾讯课堂

网易云课堂

WebGL教程

课程介绍

课程形式

视频+源码+思维导图课件

源码

代码基本行行中文注释,相比较《WebGL开发指南》注释更详细,注释是中文不是英文,方便查看。基础好的可以快进看视频,直接查看源码。

  1    <!DOCTYPE html>
  2    <html lang="en">
  3    <head>
  4        <meta charset="UTF-8">
  5        <title>Title</title>
  6        <style>
  7            body{
  8                margin: 0;
  9                overflow: hidden;//隐藏body窗口区域滚动条
  10           }
  11       </style>
  12       <!--引入three.js三维引擎-->
  13      <script src="http://www.yanhuangxueyuan.com/3D/example/three.min.js"></script>
  14   </head>
  15   <body>
  16   <script>
  17       /**
  18        * 创建场景对象
  19        */
  20       var scene=new THREE.Scene();
  21       /**
  22        * 创建网格模型
  23        */
  24       var box=new THREE.BoxGeometry(100,100,100);//创建一个立方体几何对象
  25       var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象
  26       var mesh=new THREE.Mesh(box,material);//网格模型对象
  27       scene.add(mesh);//网格模型添加到场景中
  28       /**
  29        * 光源设置
  30        */
  31       //点光源
  32       var point=new THREE.PointLight(0xffffff);
  33       point.position.set(400,200,300);//点光源位置
  34       scene.add(point);//点光源添加到场景中
  35       //环境光
  36       var ambient=new THREE.AmbientLight(0x444444);
  37       scene.add(ambient);
  38       /**
  39        * 相机设置
  40        */
  41       var width = window.innerWidth;//窗口宽度
  42       var height = window.innerHeight;//窗口高度
  43       var k = width/height;//窗口宽高比
  44       var s = 100;//三维场景缩放系数
  45       //创建相机对象
  46       var camera=new THREE.OrthographicCamera(-s*k,s*k, s,-s,1,1000);
  47       camera.position.set(200,300,200);//设置相机位置
  48       camera.lookAt(scene.position);//设置相机方向(指向的场景对象)
  49       /**
  50        * 创建渲染器对象
  51        */
  52       var renderer=new THREE.WebGLRenderer();
  53       renderer.setSize(width,height);
  54       renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
  55       document.body.appendChild(renderer.domElement);//body元素中插入canvas对象
  56       //执行渲染操作
  57       renderer.render(scene,camera);
  58   </script>
  59   </body>
  60   </html>
                    /**
                       * 创建网格模型
                       */
                      var geometry = new THREE.Geometry(); //声明一个空几何体对象
                      var p1 = new THREE.Vector3(0,0,0); //顶点1坐标
                      var p2 = new THREE.Vector3(80,0,0); //顶点2坐标
                      var p3 = new THREE.Vector3(0,80,0); //顶点3坐标
                      geometry.vertices.push(p1,p2,p3); //顶点坐标添加到geometry对象
                      var face = new THREE.Face3( 0, 1, 2, normal); //创建三角面
                      /**顶点颜色**/
                      var color1 = new THREE.Color(0xFF0000);//顶点1颜色——红色
                      var color2 = new THREE.Color(0x00FF00);//顶点2颜色——绿色
                      var color3 = new THREE.Color(0x0000FF);//顶点3颜色——蓝色
                      var normal = new THREE.Vector3( 0, 0, 1 ); //三角面法向量
                      face.vertexColors.push(color1, color2,color3);//定义三角面三个顶点的颜色
                      geometry.faces.push( face ); //三角面添加到几何体
                      var material=new THREE.MeshLambertMaterial({
                          vertexColors: THREE.VertexColors,//以顶点颜色为准
                          side:THREE.DoubleSide//两面可见
                      });//材质对象
                      var mesh=new THREE.Mesh(geometry,material);//网格模型对象
                      scene.add(mesh);//网格模型添加到场景中
                  

购书指南

《Three.js开发指南》

目前Threejs相关的书籍基本只有《Three.js开发指南》,如果不喜欢视频可以选择书籍。

《Three.js开发指南》京东链接

与《threejs开发指南》比较

代码

本教程是中文注释,基本每一句代码都有中文注释,开发指南是英文注释,一般一段代码注释一句。

授课形式

开发指南是文字授课,本教程是视频+文字,因为本教程的源码基本每一句代码都有中文注释,其实和买书基本没区别,所以基础好的可以直接看源码+快进看视频,基础不好的可以多听听视频。

新旧

开发指南用的是threejs的R69版本,是2014年的,本教程是用的2018年发布的R92版本。 新版本相比旧版本改动比较大,如果初学者基础不好,建议买本教程,如果基础好,无所谓,看喜好。

Three.js相关文章

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com