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

Three.js视频教程

threejs交流群:763260191 关于课程选择建议问题可以私信群主

通用课程链接( 入门和后期进阶建议必选 )

下面两个链接是three.js从入门到精通的系统学习课程,内容比较多,共计200多节,除了入门内容,还包含高级进阶和实战技巧内容,学习完下面内容你会对three.js会非常熟悉,了如指掌。

具体案例课程链接(建议根据工作或兴趣需要选择)

three.js应用领域和行业比较多,下面课程主要是不同领域或不同应用的具体案例课程,大家可以根据**工作需要**和**爱好**选择性学习。

智慧城市园区可视化

物联网3D可视化( 粮仓 )

Three.js产品Web3D展示

地球Web3D可视化

地图Web3D可视化

three.js课程如何选择

three.js应用行业领域比较多,而且不同行业对three.js使用方式差异也比较大。

给大家的学习建议很简单,通用课程建议大家必选,不针对任何行业,除了通用课程,还提供了其它针对特定方向或应用的案例课程,这部分内容根据需要选择。

课程源码

所有课程基本上每节课都有对应源码且注释,注释非常详细,基础好的话,可以直接查看案例源码,视频偏向思路讲解,注意视频结合源码一块学习,不要仅仅看视频

课程源码注释展示

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>

课程源码注释展示

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

Three.js相关文章

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