Three.js 第一篇：繪制一個靜態的3D球體

 第一篇就畫一個球體吧

　　首先我們知道Three.js其實是一個3D的JS引擎，其中的強大之處就在於這個JS框架並不是依托於JQUERY來寫的。那么，我們在寫這一篇繪制3D球體的文章的時候，應該注意哪些地方呢？下面我就來一一列舉

1.場景。

　　場景是什么，說得簡單一點，場景就是一個canvas ,我們就是要在Canvas上面實現3D效果的畫面而已。場景和容器，相機是息息相關的，我們就拿拍戲來說，假如我們需要演一個古裝劇的撕逼場景，那么，我們需要的道具其中之一就是一個相機。

2.容器

　　就是承載球體的DIV，比如我們要演戲，那么演戲的場地，比如某個山清水秀的地方。

3.相機

　　簡單一點說，就是你從屏幕里面看這個球體的樣子，說得不太明白？其實很簡單，你想一下你在玩生化危機的時候的，是不是第一人稱？那么你看到的不同的怪物，以不同的視角去看的話，那么得到的結果，就會有差異，這個就是相機的作用。

4.演員(這里指的是球體)

　　這個就太容易了，不過以后我提到的可不一定是球體哦，也許是正方體，也許是一個復雜的形狀都有可能，THREE.JS提供了很多的“庫”，這些庫可以繪制出不同的形狀的物體，對於初學者來說，理解這些就足夠了。

代碼

　　代碼不是特別的復雜，大家理解的話可以按照層級關系來理解，比如場景里面添加相機什么的，反正就是一層一層的套，英語的話有一些專有詞匯，

<div id="container"></div>

<script>
    //設置場景的大小
    var width = 400;
    var height = 300;

    //設置相機的一些參數。
    var view_angle = 45;
    aspect = width / height;
    near = 0.1;
    far = 10000;

    //設置容器
    var $container = $("#container");

    //新建一個WebGL 渲染，以及相機
    var renderer = new THREE.WebGLRenderer();
    var camera =
        new THREE.PerspectiveCamera(
        view_angle, aspect, near, far
        );
    var scene = new THREE.Scene();

    //把相機添加到場景里面
    scene.add(camera);

    camera.position.z = 300;

    renderer.setSize(width, height);

    //附加DOM元素
    $container.append(renderer.domElement);

    //設置球體的值
    var radius = 50, segemnt = 16, rings = 16;

    var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xCC0000 });

    var sphere = new THREE.Mesh(
        new THREE.SphereGeometry(radius,segemnt,rings),
        sphereMaterial
        );

    sphere.geometry.verticesNeedUpdate = true;
    sphere.geometry.normalsNeedUpdate = true;

    scene.add(sphere);

    var pointLight = new THREE.PointLight(0XFFFFFF);

    pointLight.position.x = 10;
    pointLight.position.y = 50;
    pointLight.position.z = 150;

    scene.add(pointLight);

    
    //畫圖
    renderer.render(scene, camera);

</script>

　　

最終效果

　　由於我也是初學者，所以給大家的幫助也很有限，不過我會努力的，經常把自己學習Three.js的一些心得分享出來，共勉之！