Three.js开发指南-快速入门

共计 2407 个字符，预计需要花费 7 分钟才能阅读完成。

创建第一个三维网页

如今浏览器的功能越来越强大，而且这些功能可以通过Javascript直接调用。html5标签可以轻松的添加视频和音频，而且支持Canvas 和SVG，这些强大的功能，如今这个功能集有添加了一个新成员，即支持WebGL。通过WebGL，你可以直接调用显卡的计算资源，创建高性能的二维和三 维计算机图形。而three.js库可以简化这个过程。

目前支持three.js的浏览器如下：

firefox4.0版本以后；chrome9.0版本以后；Safari5.1版本以后；opera12.00版本以后；IE11支持。如若你想让浏览本的IE支持，可以使用iewebgl插件。

注：three.js的源码https://github.com/mrdoob/three.js/
ThreeJS中文教程

现在开始制作第一个三维场景吧！！！

• 首先引入js文件

  <script src="../js/three.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>

1. 定义场景

   var scene = new THREE.Scene();

2.  定义相机

   var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
   camera.position.x = -30;
   camera.position.y = 40;
   camera.position.z = 30;
   camera.lookAt(scene.position);

3. 定义渲染器

   var renderer = new THREE.WebGLRenderer();
   renderer.setClearColor(0xEEEEEE);
   renderer.setSize(window.innerWidth, window.innerHeight);

4. 定义坐标轴

   var axes = new THREE.AxisHelper(20);
   //把坐标轴添加到场景中
   scene.add(axes);

5. 定义平面

   var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
   var planeMaterial = new THREE.MeshBasicMaterial({
      color: 0xcccccc
   });
   var plane = new THREE.Mesh(planeGeometry, planeMaterial);
   plane.rotation.x = -0.5 * Math.PI;
   plane.position.x = 15;
   plane.position.y = 0;
   plane.position.z = 0;
   //把平面添加到场景中
   scene.add(plane);

6. 创建方块

   var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);
   var cubeMaterial = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      wireframe: true
   });
   var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
   cube.position.x = -4;
   cube.position.y = 3;
   cube.position.z = 0;
   scene.add(cube);

7. 创建球体

   var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
   var sphereMaterial = new THREE.MeshBasicMaterial({
      color: 0x7777ff,
      wireframe: true
   });
   var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
   sphere.position.x = 20;
   sphere.position.y = 4
   sphere.position.z = 2;
   scene.add(sphere);

8. 最后添加到DOM中

   $("#WebGL").append(renderer.domElement);
   renderer.render(scene, camera);

   注意：three.js可以基于三种渲染器；¹ 基于WebGL渲染器；² 基于canvas渲染器；³ 基于SVG渲染器。

• 可能这样还是很简单，那么现在我们为他添加一个光源。

  //添加光源
  var spotLight = new THREE.SpotLight(0xffffff);
  spotLight.position.set(-40, 60, -10);
  spotLight.castShadow = true;
  scene.add(spotLight);

• 还需要变换一些材质,需要使用方法MeshLambertMaterial()和MeshPhongMaterial();例如：

  var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
  //var cubeMaterial = new THREE.MeshPhongMaterial({color: 0xff0000});
  //var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: true});

• 在添加阴影

  renderer.shadowMapEnabled = true;
  plane.receiveShadow = true;
  cube.castShadow = true;
  sphere.castShadow = true;

  这里基本就完成了。是不是很兴奋~~