51 使用ThreeBSP庫進行Three.js網格組合

阿新 • • 發佈：2019-01-21

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //設定背景顏色 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } var

camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(0, 200, 500); } var scene; function initScene() { scene = new THREE.Scene(); } var light; function initLight

() { scene.add(new THREE.AmbientLight(0x404040)); light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); } function initModel() { //軸輔助（每一個軸的長度） var object = new THREE.AxesHelper(500); scene.add(object); //建立球形幾何體

var sphereGeometry = new THREE.SphereGeometry(50, 20, 20); var sphere = createMesh(sphereGeometry); //建立立方體幾何體 var cubeGeometry = new THREE.BoxGeometry(30, 30, 30); var cube = createMesh(cubeGeometry); cube.position.x = -50; //生成ThreeBSP物件 var sphereBSP = new ThreeBSP(sphere); var cubeBSP = new ThreeBSP(cube); //進行並集計算 var resultBSP = sphereBSP.subtract(cubeBSP); //從BSP物件內獲取到處理完後的mesh模型資料 var result = resultBSP.toMesh(); //更新模型的面和頂點的資料 result.geometry.computeFaceNormals(); result.geometry.computeVertexNormals(); //重新賦值一個紋理 var material = new THREE.MeshPhongMaterial({color: 0x00ffff}); result.material = material; //將計算出來模型新增到場景當中 scene.add(sphere); scene.add(cube); scene.add(result); } //生成模型 function createMesh(geom) { //設定當前的模型矩陣沿xy軸偏移，讓圖片處於顯示中心 //geom.applyMatrix(new THREE.Matrix4().makeTranslation(-250, -100, 0)); // 建立法向量紋理 var meshMaterial = new THREE.MeshNormalMaterial({ flatShading: THREE.FlatShading, transparent: true, opacity: 0.9 }); // 建立一個線框紋理 var wireFrameMat = new THREE.MeshBasicMaterial({opacity: 0.5, wireframeLinewidth: 0.5}); wireFrameMat.wireframe = true; // 建立模型 var mesh = new THREE.Mesh(geom, wireFrameMat); return mesh; } //初始化效能外掛 var stats; function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } //使用者互動外掛滑鼠左鍵按住旋轉，右鍵按住平移，滾輪縮放 var controls; function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); // 如果使用animate方法時，將此函式刪除 //controls.addEventListener( 'change', render ); // 使動畫迴圈使用時阻尼或自轉意思是否有慣性 controls.enableDamping = true; //動態阻尼係數就是滑鼠拖拽旋轉靈敏度 //controls.dampingFactor = 0.25; //是否可以縮放 controls.enableZoom = true; //是否自動旋轉 controls.autoRotate = false; //設定相機距離原點的最遠距離 controls.minDistance = 20; //設定相機距離原點的最遠距離 controls.maxDistance = 10000; //是否開啟右鍵拖拽 controls.enablePan = true; } //生成gui設定配置項 var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { }; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） } function render() { renderer.render(scene, camera); } //視窗變動觸發的函式 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); render(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 controls.update(); render(); //更新效能外掛 stats.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); initGui(); animate(); window.onresize = onWindowResize; }

51 使用ThreeBSP庫進行Three.js網格組合

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); //renderer.setClearColor(new THREE.C

threejs 使用ThreeBSP庫進行Three.js網格組合 (原始碼)

import * as THREE from 'three'; let BACK; let COPLANAR; let EPSILON; let FRONT; let SPANNING; let Timelimit; let returning; let bind = function(fn, me

學習Three.js——網格(Mesh)

網格幾何體是不能被渲染的，只有幾何體和材質結合成網格才能被渲染到螢幕上常見屬性和方法 position:表示網格的絕對位置設定position的方法有3個： mesh.position.x = x;mesh.position.y=y;mesh.positio

three.js的組合與合併

1.組合　　建立一個組非常簡單，在組中新增子元素的效果是，你可以對組進行移動、縮放和變形，而所有的子物件都會受到影響。使用組的時候，你依然可以引用、修改每一個單獨的幾何體。但是，使用raycaster射線是無法獲取組group，只能獲取組中的元素。 var geometry = new THREE

three.js 多面幾何體進行多面貼圖 (貼圖後需要再次渲染才能顯現出來）

let materials = []; for (var i = 0; i < 6; ++i) { materials.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('../

64 - three.js 筆記 - 載入紋理並應用到網格

紋理最基礎的用法就是在材質上貼圖，將圖片通過THREE.TextureLoader載入，然後設定為材質的map屬性。 1、示例 http://ithanmang.com/threeJs/home/201809/20180905/01-basic-texture.html 效果

three.js使用掩碼MaskPass高階效果組合器

three.js使用掩碼MaskPass高階效果組合器所需要基本外掛，下面5個都需要。 <script type="text/javascript" src="../js/postprocessing/EffectComposer.js"></script&g

three.js中效能外掛，可除錯介面dat.GUI庫實現

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <st

three.js的raycaster射線無法獲取visible為false的網格物件

在做網格物件拖放時，需要建立一個不可見的參考平面，如果將平面物件設定為visible，則射線物件無法獲取該平面，就無法進行位置計算。 onDocumentMouseMove: function (e) { var event = e || window.event; var mouse =

初識3D圖形庫three.js

Three.js是當下最流行的網頁3D渲染JS引擎，其主要是對WebGL程式設計以面向物件方式進行的封裝。但由於Three.js英文文件還在開發中（本身就比較簡陋且有不少拷貝錯誤），而網路上Three.js方面的資料比較散亂且良莠不齊，部分中文文件翻譯低階錯誤頻出，以

three.js 02-02 之使用幾何與網格物件

上一篇我們對場景 Scene 物件進行了單獨講解。本篇我們將來看看 Three.js 中的幾個標準的幾何體的用法。我們先上一段完整的程式碼，如下所示： <!DOCTYPE html> <html> <head> <

Three.JS學習 3：Threejs畫網格

右手直角座標系各軸之間的順序要求符合右手法則,即以右手握住Z軸,讓右手的四指從X軸的正向以90度的直角轉向Y軸的正向,這時大拇指所指的方向就是Z軸的正向.這樣的三個座標軸構成的座標系稱為右手空間直角座標系右手座標系右手定則也決定三維空

three.js繪製網格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three框架</title> <script src=".

three.js 畫網格

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <script src="thre

在瀏覽器和node中使用 GitHub的js-xlsx庫進行Excel檔案處理(一)

關鍵詞：JavaScript， js excel，node excel 1.簡介 js-xlsx 庫是目前 Github 上 star 數量最多的處理 Excel 的庫，功能強大，提供了各種對錶格的操作，但是這個專案文件有些亂，提供的demo也只具備最基

63 Three.js 將多個網格合併成一個網格

var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, wi

three.js 02-04 之網格物件函式及屬性

上一篇中，我們對自定義幾何體的相關知識做了一個簡單介紹，並講解了如何克隆（複製）一個幾何體。本篇我們要介紹的是關於 Mesh 網格物件常用的一些相關函式和屬性。照例，我們先上一個完整的示例，程式碼如下： <!DOCTYPE html> <html

three.js 08-02 之網格合併

上一篇文中，我們介紹到利用 THREE.Group 物件可以很容易操縱和管理大量的網格。但是當網格物件的數量非常多時，效能就會成為一個瓶頸。實際上在組裡的每個物件還是獨立的，需要對它們分別進行處理和渲染。在舊版 three.js 中，有個叫 THREE.G

《Three.js學習筆記02》場景中新增網格物件

<!DOCTYPE html><html><head> <title> First Scene</title> <script type="text/javascript" src="../assets/three.min.js"&

17 Three.js針對瀏覽器變動進行自適應

可以改變頁面大小測試效果。有的時候，我們打開了瀏覽器的頁面，顯示了當前的渲染的模型。但是，如果你沒有設定場景模型跟隨著瀏覽器的寬高度變化進行自適應，就gg了。所以，今天額外補上一篇相關的怎麼跟隨瀏覽器變動進行自適應。要是場景隨著瀏覽器的大小變動進行自適應，就需要監聽windo