three.js一個簡單demo學些和講解

時間  2019-11-17
標籤 three.js 一個 簡單 demo 講解 欄目 JavaScript 简体版
原文   原文鏈接

叉口裁剪球體案例

二話不說先上效果圖:

叉口裁剪球體案例效果圖
叉口裁剪球體案例效果圖

所有代碼帶註釋

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>clipIntersection</title>
  <style>
  body {
    margin: 0;
    background: #000;
    overflow: hidden;
  }
  </style>
</head>

<body>
  <script src="../three.js-master/build/three.js"></script>
  <script src="../libs/OrbitControls.js"></script>
  <script>
  var camera, scene, renderer;
  // 定義參數，後面定義材質的時候會用到
  var params = {
    clipIntersection: true
  };
  // 定義裁剪的切面，後面定義材質的時候會用到
  var clipPlanes = [
    new THREE.Plane(new THREE.Vector3(1, 0, 0), 0),
    new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
    new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
  ];

  init()
  render()

  function init() {
    // 定義WebGL渲染器，而且開啓抗鋸齒
    renderer = new THREE.WebGLRenderer({ antialias: true })
    // 設置設備像素比，一般用於HiDPI（一種高清渲染方式）設備防止模糊輸出canvas
    renderer.setPixelRatio(window.devicePixelRatio)
    // 返回一個包含渲染器輸出canvas寬高的對象，以像素爲單位
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 定義渲染器是否考慮對象級別的裁剪平面
    renderer.localClippingEnabled = true
    // 將輸出的canvas添加到body中
    document.body.appendChild(renderer.domElement)

    // 定義場景和相機而且設置相機的位置
    scene = new THREE.Scene()
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(-20, 30, 40)

    // 設置鼠標點擊拖拽以後旋轉和滾動滾輪放大縮小
    var controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', render); // use only if there is no animation loop
    controls.minDistance = 10;
    controls.maxDistance = 100;
    controls.enablePan = false;

    // 定義半球光，參數爲天空顏色，地面顏色，光的強度
    var light = new THREE.HemisphereLight(0xffffff, 0x080808, 1)
    scene.add(light)
    // 添加環境光
    scene.add(new THREE.AmbientLight(0x505050))

    // 這與Object3d幾乎是同樣的，其目的是使用語法上更清晰的對象組進行工做
    var group = new THREE.Group()

    for (var i = 1; i < 25; i++) {
      // 建立球體的緩存幾何模型，參數爲半徑，水平分割面數量，垂直分割面數量
      var geometry = new THREE.SphereBufferGeometry(i / 2, 48, 24);
      // 定義蘭伯特網口材料，一種非發光材質
      var material = new THREE.MeshLambertMaterial({
        // 線條的十六進制顏色
        color: new THREE.Color(Math.sin(i * 0.5) * 0.5 + 0.5, Math.cos(i * 1.5) * 0.5 + 0.5, Math.sin(i * 4.5 + 0) * 0.5 + 0.5),
        // 定義表面兩側的哪個將呈現，默認是前面
        side: THREE.DoubleSide,
        // 用戶在全局使用THREE.Plane對象定義的裁剪平面，這些平面應用於該材料所附的對象。
        // 空間中與平面點積爲負的點將被裁剪掉。缺省爲空 []。
        clippingPlanes: clipPlanes,
        // 改變剪切平面的行爲，以便只裁剪他們的交集，而不是剪接
        clipIntersection: params.clipIntersection
      })
      // 三角形布成的網格圖形的基類
      group.add(new THREE.Mesh(geometry, material))
    }

    scene.add(group)
    window.addEventListener('resize', onWindowResize, false);
  }


  function onWindowResize() {
    // 設置相機視錐體寬高比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相機投影矩陣
    camera.updateProjectionMatrix();
    // 設置渲染器寬高
    renderer.setSize(window.innerWidth, window.innerHeight);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
  </script>
</body>

</html>

代碼知識點詳解

  1. THREE.Plane
    • 該方法是定義一個在三維空間中無線伸展的平面，Plane( normal, constant )
    • normal -- (Vector3) 定義平面指向原點的法向量，(1, 0, 0)
    • constant -- (Float) 從原點到平面沿法線方向的負距離，默認0
  2. THREE.Vector3
    • 定義一個三維向量，Vector3( x, y, z )
    • x,y,z分別表明向量的x,y,z的值
  3. THREE.WebGLRenderer
    • WebGL渲染器使用WebGL來繪製您的場景，若是您的設備支持的話。使用WebGL將可以利用GPU硬件加速從而提升渲染性能。這個渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。
    • WebGLRenderer( parameters )，parameters能夠不寫，parameters參數介紹：
      • canvas：將要渲染到的canvas對象，若是沒有定義將會新建立一個canvas
      • context：所須要的渲染上下文對象
      • precision：着色器的精度，有"highp","mediump","lowp",若是設備支持的話默認爲"highp"
      • alpha：這個canvas是否包含alpha（透明度）緩衝區，默認爲false
      • premultipliedAlpha：渲染器是否會假設顏色具備預乘透明度
      • antialias：是否抗鋸齒，默認爲false
      • stencil：繪製緩衝區是否有一個最少8位的模板緩衝區，默認爲true
      • preserveDrawingBuffer：是否保留緩衝區，知道手動清除或者覆蓋，默認爲false
      • depth：繪圖緩衝區是否具備至少16位的深度緩衝區，默認爲true
      • logarithmicDepthBuffer：是否使用對數深度緩衝區，若是在一個場景中處理巨大的差別可能須要使用它
    • renderer.setPixelRatio(PixelRatio),設置設備像素比，一般用於HiDPI設備放置模糊輸出canvas，最好使用新的three.js文件
    • renderer.setSize(width,height，updateStyle),調整輸出canvas尺寸，要考慮設備像素比，而且設置視口以匹配改尺寸，若是設置updateStyle爲true則顯示添加像素到輸出canvas的樣式中
    • renderer.localClippingEnabled，定義渲染器是否考慮對象級別的裁剪平面
    • 他還有不少的屬性和方法，之後在須要的時候再介紹
  4. THREE.Scene
    • 場景容許你設置哪些對象唄three.js渲染而且渲染在哪裏，咱們在場景中放置物體，燈光和相機，他有三個屬性：
      • fog，一個fog實例，定義了場景中霧狀北京類型，默認爲null
      • overrideMaterial，若是不爲空，它將強制場景中的一切對象都是用該材料進行渲染，默認爲null
      • autoUpdate：默認爲true，若是設置爲true，那麼每一幀的渲染都要檢查場景和對象是否須要矩陣更新，不然你必須本身來維護場景中的全部矩陣
  5. THREE.PerspectiveCamera
    • 進行遠景投影的相機，PerspectiveCamera( fov, aspect, near, far )
      • FOV，相機視錐體垂直角度
      • aspect，相機視錐體寬高比
      • near，相機視錐體近裁剪面
      • far，相機視錐體遠裁剪面
    • camera.position.set(x,y,z),定義相機的位置
    • camera.updateProjectionMatrix()，更新相機投影矩陣
  6. THREE.HemisphereLight
    • 位於場景正上方的光源，HemisphereLight( skyColor, groundColor, intensity )
      • skyColor，RGB天空顏色值
      • groundColor，RGB地面顏色值
      • intensity，光的強度
  7. THREE.AmbientLight
    • 定義環境光，AmbientLight( color, intensity ),這種光應用到場景中的全部物體
      • color：RGB顏色
      • intensity：光的強度
  8. THREE.SphereBufferGeometry
    • 球體緩存幾何模型，SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
      • radius，球體半徑，默認爲50
      • widthSegments，水平分割面的數量，最小爲3，默認爲8
      • heightSegments，垂直分割面數量，最小爲2，默認爲6
      • phiStart，水平起始角度，默認爲0
      • phiLength，指定水平掃描角度大小，默認爲Math.PI*2
      • thetaStart，垂直起始角度，默認爲0
      • thetaLength，指定垂直掃描角度大小，默認爲Math.PI
  9. THREE.MeshLambertMaterial
    • 蘭伯特網口材質，一種非發光材料，無鏡面高光，改材料使用非物理的朗博模型來計算反射率，這能夠模擬一些表面（如未經處理的木材或者石頭），可是不能模擬具備鏡面高光的光澤表面（好比上漆的木頭）
    • 陰影使用Gouraud陰影模型計算，這將計算每一個頂點的陰影（在頂點着色器中），並在多邊形的面上插入結果
    • 因爲反射率和照明模型的簡單性，性能要比其餘幾個材質更好，代價是圖形的準確行要稍差
    • MeshLambertMaterial( parameters )
      • color,線條的十六進制顏色，默認爲0xffffff
      • side，定義表面兩側的哪個將呈現，前面，後面或者雙面，默認值是THREE.Frontside，其餘可選爲THREE.Backside和THREE.Doubleside
      • map，設置紋理貼圖，默認爲null
      • lightMap，設置光照貼圖，默認爲null
      • lightMapIntensity，設置光照貼圖強度，默認爲1
      • aoMap，設置環境遮擋貼圖（ao=ambient occlusion），默認爲null
      • aoMapIntensity，設置環境遮擋貼圖強度，默認爲1
      • specularMap，高光貼圖，默認爲null
      • alphaMap，透明度貼圖，默認爲null
      • envMap，環境貼圖，默認爲null
      • combine，若是有環境貼圖，如何組合表面顏色的結果，默認爲THREE.Multiply，還有THREE.MixOperation, THREE.AddOperation.若是選擇了mix，反射率用於在兩種顏色之間進行混合
      • reflectivity，設置反射率，默認爲1
      • refractionRatio，設置折射率默認值是0.98
      • fog，定義材質是否受全局霧設置的有影響，默認爲true
      • shading，定義着色器，默認爲THREE.SmoothShading
      • wireframe，渲染模型爲線框，默認爲false
      • wireframeLinewidth，線框線寬度，默認爲1
      • wireframeLinecap，定義線端的外觀，默認值是round
      • vertexColors：定義頂點如何着色，默認值是THREE.NoColors
      • skinning：定義材質是否使用皮膚，默認爲false
      • morphTargets：定義是否使用變形目標，默認爲false
      • morphNormals：定義材質是否使用morphNormals，若是設置爲true的話將morphNormals從geometry傳遞到着色器，默認爲false
      • clippingPlanes，用戶定義的裁剪平面，指定爲世界空間中的THREE.Plane對象。 這些平面應用於該材料所附的對象。空間中與平面點積爲負的點將被裁剪掉。缺省爲空 []
      • chipIntersection，改變裁剪平面的行爲，一邊只是裁剪他們的交集而不是剪接
      • 還有其餘許多基礎材料的屬性就不在繼續介紹了，會在後續逐漸介紹
  10. THREE.Mesh
    • 網孔對象的基類，Mesh( geometry, material )
      • geometry，一個幾何體的實例
      • 一個材質的實例
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程