快捷導航

使用three.js 畫漸變的直線

更新時間：2016年06月05日 11:29:29 投稿：hebedich

這篇文章主要介紹了使用three.js 畫漸變的直線的相關(guān)資料以及具體的實例代碼，有需要的小伙伴可以參考下

Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場景，包括了攝影機、光影、材質(zhì)等各種對象。你可以在它的主頁上看到許多精彩的演示。不過，這款引擎目前還處在比較不成熟的開發(fā)階段，其不夠豐富的 API 以及匱乏的文檔增加了初學者的學習難度（尤其是文檔的匱乏）three.js的代碼托管在github上面。

http://github.com/mrdoob/three.js/

我們來看實例吧

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <script type="text/javascript" src="js/three.js" ></script>
  <style>
    div#canvas-frame{
      border: none;
      cursor: pointer;
      width: 100%;
      height: 600px;
      background-color: #eeeeee;
    }
  </style>
  <script>
    var renderer;
    function initThree(){
      width = document.getElementById('canvas-frame').clientWidth;
      height = document.getElementById('canvas-frame').clientHeight;
      //渲染器 決定渲染的結(jié)果和應(yīng)該畫在頁面的元素什么元素上面并且怎樣繪制。
      renderer = new THREE.WebGLRenderer({
        antialias : true
      });
      renderer.setSize(width,height);
      //domElement表示渲染器中的畫布，所有的渲染都畫在上邊
      document.getElementById('canvas-frame').appendChild(renderer.domElement);
      renderer.setClearColor(0xFFFFFF,1.0);
    }
    //相機 透視相機
    var camera;
    function initCamera(){
      camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
      camera.position.x = 0;
      camera.position.y = 1000;
      camera.position.z = 0;
      camera.up.x = 0;
      camera.up.y = 0;
      camera.up.z = 1;
      camera.lookAt({
        x : 0,
        y : 0,
        z : 0
      });
    }
    //場景
    var scene;
    function initScene(){
      scene = new THREE.Scene();
    }
    //燈光
    var light;
    function initLight(){
      light = new THREE.DirectionalLight(0xFF0000, 1.0 , 0);
      light.position.set(100, 100, 200);
      scene.add(light);
    }
    //幾何體
    var cube;
    function initObject(){
      //聲明的幾何體， 里邊有個vertices參數(shù)可以用來存放點
      var geometry = new THREE.Geometry();
      //LineBasicMaterial(parameters)//basic翻譯：基礎(chǔ)//Material翻譯：原料
      //Parameters:是一個定義材質(zhì)外觀的對象，它包含多個屬性來定義材質(zhì)，這些屬性是//翻譯：參數(shù)
      //Color:線條的顏色，用16進制來表示，默認的顏色是白色。
      //Linewidth
      //Linecap:線條兩端的外觀，默認是圓角端點，當線條較粗的時候才看得出效果//cap翻譯：帽子
      //Linejoin:兩個線條的連接點處的外觀，默認是round 圓角//join翻譯：加入
      //VertexColors:定義線條材質(zhì)是否使用頂點元素，這是一個boolean值。意思是線條各部分的顏色根據(jù)頂點的顏色來進行插值。//vertex翻譯：頂點
      //Fog:定義材質(zhì)的顏色是否受全局霧效的影響。//翻譯：霧  
      var material = new THREE.LineBasicMaterial({
        vertexColors: true
      });
      //定義兩種顏色分別是兩個端點的顏色
      var color1 = new THREE.Color( 0x444444 ),
        color2 = new THREE.Color( 0xFF0000 );
      //線的材質(zhì)可以由兩點的顏色決定
      var p1 = new THREE.Vector3();
      var p2 = new THREE.Vector3();
      p1.set(-100,0,100);
      p2.set(100,0,-100);
      geometry.vertices.push(p1);
      geometry.vertices.push(p2);
      geometry.colors.push(color1, color2);
      //定義線條 這里會傳進去三個參數(shù)  
      //第一個是幾何體geometry，里面包含兩個頂點和頂點顏色
      //第二個是線條的材質(zhì)
      //第三個是一組點的連接方式
      var line = new THREE.Line(geometry,material, THREE.LinePieces);
      //將線條添加到場景中
      scene.add(line);
    }
    function threeStart(){
      initThree();
      initCamera();
      initScene();
      initLight();
      initObject();
      renderer.clear();
      renderer.render(scene,camera);
    }
  </script>
  <body onload="threeStart()">
    <div id="canvas-frame"></div>
  </body>
</html>

希望本實例能給大家學習three.js帶來些幫助

您可能感興趣的文章: