threejs之常見幾何形狀使用
阿新 • • 發佈：2018-12-24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>threejs之常見幾何形狀使用</title> <script src="../js/three.js"></script> </head> <body> <!-- 常見的幾何形狀有 BoxGeometry、CircleGeometry、ConeGeometry、CylinderGeometry、DodecahedronGeometry、EdgesGeometry、ExtrudeGeometry、IcosahedronGeometry、LatheGeometry、OctahedronGeometry、 【Geometry。。。換為。。。BufferGeometry（如BoxGeometry——BoxBufferGeometry）。效能更優，渲染更快。 BufferGeometry 會快取網格模型，效能要高效點。網格模型生成原理 區別如下 1、Geometry 生成的模型是這樣的 （程式碼）-> (CUP 進行資料處理，轉化成虛擬3D資料) -> (GPU 進行資料組裝，轉化成畫素點，準備渲染) -> 顯示器 第二次操作時重複走這些流程。 2、BufferGeometry 生成模型流程 (程式碼) -> (CUP 進行資料處理，轉化成虛擬3D資料) -> (GPU 進行資料組裝，轉化成畫素點，準備渲染) -> (丟入快取區) -> 顯示器 第二次修改時，通過API直接修改快取區資料，流程就變成了這樣 (程式碼) -> (CUP 進行資料處理，轉化成虛擬3D資料) -> (修改快取區資料) -> 顯示器 --> <!-- --> <canvas id="cc"></canvas> <script type="text/javascript"> // 建立一個場景，它將儲存我們所有的元素，如物體、照相機和燈光。 var scene = new THREE.Scene(); // 建立一個攝像機，它定義了我們所處的位置. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 建立渲染並設定大小 指定渲染canvas物件 var renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#cc") }); renderer.setClearColor(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight); //建立一個xyz座標軸，方便初學者理解三維座標 var axes = new THREE.AxesHelper(20); scene.add(axes); //建立網格模型 var ConeGeometry = new THREE.DodecahedronBufferGeometry(10, 2);//我們就建立個立方體。 var material = new THREE.MeshBasicMaterial ({color:Math.random()*0xffffff})//基礎材質 var Cone = new THREE.Mesh(ConeGeometry,material) var wire = Cone.clone() wire.material = new THREE.MeshPhongMaterial({wireframe :true,depthTest:false})//depthTest解決共面衝突，不妨試試為true看看是什麼效果呢 scene.add(Cone) scene.add(wire) //我們的網格模型就搞成了。 //設定相機位置 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 執行一次渲染器，GPU渲染成影象，繪製到canvas裡面呈現 const draw = function(){ requestAnimationFrame(draw)//不斷繪製 renderer.render(scene, camera);//渲染 Cone.rotation.y+=0.01//網格模型旋轉 wire.rotation.y+=0.01//線框模型旋轉 } draw() </script> </body> </html>