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

Three.js视频教程

视频教程链接

WebGL教程

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

Threejs进阶教程

内容:向量、矩阵、自定义着色器、Three.js系统原理

网易云课堂播放视频的时候,右下角选择超高清,视频会很清晰

课程介绍

课程形式

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

源码

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

源码案例1

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
...
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);//网格模型添加到场景中
...
...
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>

源码案例2

  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 ); //三角面添加到几何体

与《threejs开发指南》比较

代码

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

授课形式

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

新旧

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

Three.js相关文章

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