快捷導(dǎo)航

使用three.js 畫(huà)漸變的直線

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

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

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

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

我們來(lái)看實(shí)例吧

<!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)該畫(huà)在頁(yè)面的元素什么元素上面并且怎樣繪制。
      renderer = new THREE.WebGLRenderer({
        antialias : true
      });
      renderer.setSize(width,height);
      //domElement表示渲染器中的畫(huà)布，所有的渲染都畫(huà)在上邊
      document.getElementById('canvas-frame').appendChild(renderer.domElement);
      renderer.setClearColor(0xFFFFFF,1.0);
    }
    //相機(jī) 透視相機(jī)
    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
      });
    }
    //場(chǎng)景
    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(){
      //聲明的幾何體， 里邊有個(gè)vertices參數(shù)可以用來(lái)存放點(diǎn)
      var geometry = new THREE.Geometry();
      //LineBasicMaterial(parameters)//basic翻譯：基礎(chǔ)//Material翻譯：原料
      //Parameters:是一個(gè)定義材質(zhì)外觀的對(duì)象，它包含多個(gè)屬性來(lái)定義材質(zhì)，這些屬性是//翻譯：參數(shù)
      //Color:線條的顏色，用16進(jìn)制來(lái)表示，默認(rèn)的顏色是白色。
      //Linewidth
      //Linecap:線條兩端的外觀，默認(rèn)是圓角端點(diǎn)，當(dāng)線條較粗的時(shí)候才看得出效果//cap翻譯：帽子
      //Linejoin:兩個(gè)線條的連接點(diǎn)處的外觀，默認(rèn)是round 圓角//join翻譯：加入
      //VertexColors:定義線條材質(zhì)是否使用頂點(diǎn)元素，這是一個(gè)boolean值。意思是線條各部分的顏色根據(jù)頂點(diǎn)的顏色來(lái)進(jìn)行插值。//vertex翻譯：頂點(diǎn)
      //Fog:定義材質(zhì)的顏色是否受全局霧效的影響。//翻譯：霧  
      var material = new THREE.LineBasicMaterial({
        vertexColors: true
      });
      //定義兩種顏色分別是兩個(gè)端點(diǎn)的顏色
      var color1 = new THREE.Color( 0x444444 ),
        color2 = new THREE.Color( 0xFF0000 );
      //線的材質(zhì)可以由兩點(diǎn)的顏色決定
      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);
      //定義線條 這里會(huì)傳進(jìn)去三個(gè)參數(shù)  
      //第一個(gè)是幾何體geometry，里面包含兩個(gè)頂點(diǎn)和頂點(diǎn)顏色
      //第二個(gè)是線條的材質(zhì)
      //第三個(gè)是一組點(diǎn)的連接方式
      var line = new THREE.Line(geometry,material, THREE.LinePieces);
      //將線條添加到場(chǎng)景中
      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>

希望本實(shí)例能給大家學(xué)習(xí)three.js帶來(lái)些幫助

您可能感興趣的文章: