Three.js视频教程

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

Web3D可视化系统课程(WebGL、Three.js、WebGPU)

Web3D可视化系统课程面向群体：1. 自己想转3D方向系统学习 2.公司项目赶鸭子上架，且公司愿意给你报销学习费用

如果你没有web前端编程基础，请先学习 Web前端入门视频教程

课程形式

视频 + 图文电子书 + 注释源码

课程源码

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

课程源码注释展示

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