2. 程式人生 > >63 Three.js 將多個網格合併成一個網格

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

阿新 • • 發佈：2019-02-07
var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); //告訴渲染器需要陰影效果 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 預設的是，沒有設定的這個清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement); } var camera; function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set(0, 40, 100); camera.lookAt(new THREE.Vector3(0,0,0)); } var scene; function
initScene() { scene = new THREE.Scene(); } //初始化dat.GUI簡化試驗流程 var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { numberOfObjects:500, //當前場景中模型的個數 combined:false, //是否合併模型 redraw:function () { //刪除場景內現有的立方體 var
arr = []; scene.traverse(function (e) { if (e instanceof THREE.Mesh) arr.push(e); }); arr.forEach(function (value) { scene.remove(value); }); //重新生成立方體 if(gui.combined){ //合併模型，則使用merge方法合併 var geometry = new THREE.Geometry(); //merge方法將兩個幾何體物件或者Object3D裡面的幾何體物件合併,(使用物件的變換)將幾何體的頂點,面,UV分別合併. //THREE.GeometryUtils: .merge() has been moved to Geometry. Use geometry.merge( geometry2, matrix, materialIndexOffset ) instead. for(var i=0; i<gui.numberOfObjects; i++){ var cube = addCube(); cube.updateMatrix(); geometry.merge(cube.geometry, cube.matrix); } scene.add(new THREE.Mesh(geometry, cubeMaterial)); } else{ //不合並模型，則直接將模型放入 for(var i=0; i<gui.numberOfObjects; i++){ scene.add(addCube()); } } } }; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） //新增旋轉功能 datGui.add(gui, "numberOfObjects", 0, 20000); datGui.add(gui, "combined"); datGui.add(gui, "redraw"); gui.redraw(); } //建立立方體的方法 var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true, opacity: 0.8}); function addCube() { var cubeSize = 1.0; var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true; cube.position.x = -100+Math.round(Math.random()*200); cube.position.y = -100+Math.round(Math.random()*200); cube.position.z = -100+Math.round(Math.random()*200); return cube; } var light; function initLight() { scene.add(new THREE.AmbientLight(0x444444)); light = new THREE.DirectionalLight(0xffffff); light.position.set(15,50,10); //告訴平行光需要開啟陰影投射 light.castShadow = true; scene.add(light); } var sphere,cube; function initModel() { //輔助工具 var helper = new THREE.AxisHelper(50); scene.add(helper); return; //模型組 group = new THREE.Object3D(); scene.add(group); //球 var sphereGeometry = new THREE.SphereGeometry(5,200,200); var sphereMaterial = new THREE.MeshLambertMaterial({color:0xaaaaaa}); sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.x = -5; sphere.position.y = 5; //告訴球需要投射陰影 sphere.castShadow = true; group.add(sphere); //立方體 var cubeGeometry = new THREE.CubeGeometry(10,10,8); var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff}); cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = 15; cube.position.y = 5; cube.position.z = -5; //告訴立方體需要投射陰影 cube.castShadow = true; group.add(cube); //底部平面 var planeGeometry = new THREE.PlaneGeometry(100,100); var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa}); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = - 0.5 * Math.PI; plane.position.y = -0; //告訴底部平面需要接收陰影 plane.receiveShadow = true; scene.add(plane); } //初始化效能外掛 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 = true; controls.autoRotateSpeed = 0.5; //設定相機距離原點的最近距離 controls.minDistance = 10; //設定相機距離原點的最遠距離 controls.maxDistance = 500; //是否開啟右鍵拖拽 controls.enablePan = true; } var step = 0.02; //模型旋轉的速度 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() { //更新控制器 render(); //更新效能外掛 stats.update(); controls.update(); requestAnimationFrame(animate); } function draw() { initRender(); initScene(); initCamera(); initLight(); initModel(); initGui(); initControls(); initStats(); animate(); window.onresize = onWindowResize; }

相關推薦

js 將多個物件合併成一個物件 assign方法。ES6新特性有哪些

1.接下來介紹一下ES6在Object新加的方法  assign()  1.作用：將多個物件{}  合併成一個獨立物件。  2.使用方式: Obejct.assign(合併的物件，傳入合併中的物件....) let user = {name:'無敵人',age:19}

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

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

如何將多個PDF合併成一個PDF？這樣的方法最簡單

　　現在很多PDF文獻資料都是以多個檔案進行上傳，也就是一個完整的文件可能會被分成幾個部分，文章是被分成很多個這樣預覽起來會比較的麻煩，那我們如何將多個PDF合併成一個PDF格式呢？ 　　下面看看迅捷轉換器（www.xunjiepdf.com）如何將多個PDF檔案合併成一個PDF。 　　軟體

python將多個對映合併為一個對映

我們有時需要將多個字典合併成一個單獨的對映結構，但不同的字典之間可能有相同的鍵，又不想將鍵覆蓋掉，於是可以使用ChainMap類來實現。它在邏輯上將不同的字典合併為一個單獨的對映結構。 from pprint import pprint from collections import ChainM

pandas將多個excel合併至一個DataFrame

import pandas as pd import glob def GetFile(fname):     df = pd.read_excel(fname)          # 記錄檔名    

將多個jar合併為一個jar

將多個jar包合併為一個jar包 將jar包放到同一個目錄中，cmd移動到jar所在目錄中， 1.解壓所有jar包： jar –xvf xx.jar 2.刪除原來的全部jar包： del xx.jar  （不刪除，會將原來的jar打入都新的jar包中） 3.合併所

將多個檔案合併為一個檔案

實現效果： 　　 知識運用： 　　FileStream  和BinaryReader  及BinaryWriter類  實現程式碼: /// <summary> /// 檔案合併 /// </sum

如何把多個pdf合併成一個pdf

伴隨著工作的日積月累，電腦上零散的PDF檔案也越來越多，經常有一些同一型別的檔案分成好幾個PDF檔案，大家都想將相同的檔案整理成一份PDF檔案，這樣不僅不會丟失某一部分檔案，也方便檔案的查詢，那麼如何把多個PDF合併成一個PDF呢？小編將自己總結得來的方法和大家一起分享吧。1.想要把PDF檔案合併，大家先需要

java 怎麼把多個list 合併成一個去掉重複的

轉自https://www.cnblogs.com/holyday/p/7685571.html public static void main(String[] args){ List<Integer> list1 = new ArrayList<Inte

用eclipse將多個jar打包成一個jar

在開發java程式時，經常要用到第三方jar包。釋出java程式時，若帶著一大堆第三方jar包，既不方便，命令列也挺長，容易出錯。若是能將所有的第三方jar檔案連同程式執行檔案一併打包成一個jar，使用就會方便得多。經過摸索，可以使用eclipse完成此項功能。步驟如下：

.net中如何把多個檔案合併成一個檔案

懶得再單獨寫一個，所以就加了超級詳細的註釋 前幾個判斷主要是合併sql檔案，什麼樣的sql對應的什麼樣的處理， 最後一個判斷是合併任何檔案 方法的兩個引數：第一個是開啟檔案路徑的集合，第二個引數檔案儲存路徑 private void FileMerge(strin

字串中連續多個空格合併成一個空格

 public string UnitMoreSpan(string str)         {             string originStr = str;             string newStr = "";             string[

vs中多個檔案合併成一個檔案顯示

主要是通過修改 .csproj 檔案來達到顯示合併的效果，看測試： 新建一個控制檯程式，然後新建2個類Class1和Class2【它們都是partial類，是不是partial無所謂，主要看你怎麼按業務分塊組合】。 然後記事本開啟.csproj檔案。將Class2的Com

logstash將兩個field合併成一個field方法

今天格式化一個日誌，日期不好取，分成了兩個欄位。後來date又支援一個欄位date {      match => ["time", "yyyy-MM-dd HH:mm:ss.SSS" ]   

在python中如何將兩個list合併成一個list，不用for語句

除了直接相加（生成新的list），還有兩種方法(修改其中一個list)： 用list的extend方法,L1.extend(L2)，該方法將引數L2的全部元素新增到L1的尾部，例如： 1 2 3 4 5 >>> L1 = [1, 2, 3, 4, 5] >

多個數組合併成一個，多個物件合併成一個

多個數組合併成一個 ver arrry=arr1.concat(arr2).concat(arr3).concat(arr4).concat(arr4) 兩個物件合併成一個。                 let para={name:'1'};            

如何將多個視訊合併並新增轉場特效？怎麼製作視訊轉場效果

　　上週才立了冬，雖然說立冬了吧，但是並沒有絲毫的感覺到來自冬天的寒意。甚至今天刷朋友圈的時候，看到有人說“這個冬天越過越熱了”。貌似的確是這樣子的，前陣子降溫了，結果最近又是豔陽高照了呢。好啦，嘮一下天氣之後該進入我們的正題了。正如標題所言，今天咱們要講的是，如何將多個視訊合併，並且在合併時給視訊新增專

[work] Python將多個list合併為1個list

1. 可以使用"+"號完成操作 輸出為： [1, 2, 3, 8, 'google', 'com'] 2.使用extend方法 、 輸入相同 3使用切片 輸出相同 PS：len（l1）代表要將l2插入l1中的位置 例如 輸出為： 又如： 輸出為：

python實際應用1-將多個PDF合併

@2018年12月24日 背景 由於工作性質，經常面對不同的問題，某些場景下SQL+Excel、常用辦公軟體不能處理，這時到網上找一些案例，自己動手用python處理。後續，藉此部落格記錄比較典型的處理過程。 後續，陸續實際處理的問題，如 1. 合併PDF 2. 拆分PDF

將多個jsonArray合併(scala)

因為業務需求，要將多個jsonArray合併，使用scala分分鐘實現，程式碼異常簡潔。 程式碼 object test extends App{ //構造jsonArray val obj1