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

创建第一个三维网页

如今浏览器的功能越来越强大,而且这些功能可以通过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;

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