2. 程式人生 > >77 Three.js 匯入BABYLON格式的模型

77 Three.js 匯入BABYLON格式的模型

阿新 • • 發佈：2019-01-09
var renderer; function initRender() { renderer = new THREE.WebGLRenderer({antialias:true}); renderer.setSize(window.innerWidth, window.innerHeight); //告訴渲染器需要陰影效果 renderer.setClearColor(0xffffff); 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, 50); camera.lookAt(new THREE.Vector3(0,0,0)); } var scene; function initScene() { scene = new THREE.Scene(); } //初始化dat.GUI簡化試驗流程
var gui; function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { }; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） } var light; function initLight() { scene.add(new THREE.AmbientLight(0x444444)); light = new THREE.DirectionalLight(0xffffff
); light.position.set(200, 200, 100); //告訴平行光需要開啟陰影投射 light.castShadow = true; scene.add(light); } function initModel() { //輔助工具 var helper = new THREE.AxesHelper(50); scene.add(helper); var loader = new THREE.BabylonLoader(); loader.load("/lib/assets/models/babylon/skull.babylon", function (obj) { //獲取babylon的相關內容，重新定義模型的紋理 obj.traverse( function ( object ) { if ( object instanceof THREE.Mesh ) { object.material = new THREE.MeshPhongMaterial( { color: Math.random() * 0xffffff } ); //設定中心位置 object.position.set(0, 0, 0); } } ); //新增到場景當中 scene.add( obj ); }); } //初始化效能外掛 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 = 1; //設定相機距離原點的最遠距離 controls.maxDistance = 200; //是否開啟右鍵拖拽 controls.enablePan = true; } 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() { //相容性判斷 if ( ! Detector.webgl ) Detector.addGetWebGLMessage(); initGui(); initRender(); initScene(); initCamera(); initControls(); initLight(); initModel(); initStats(); animate(); window.onresize = onWindowResize; }

相關推薦

77 Three.js 匯入BABYLON格式的模型

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

89 Three.js 匯入dae格式的骨骼繫結動畫模型

var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action; var clock = new THREE.Clock(); function initRender() {

Three.js匯入gltf模型和動畫

核心程式碼 複雜的3D模型一般都是用第三方建模工具生成，然後載入到three中 three官方推薦使用gltf格式的檔案，代表編輯器是blender 本文生成了自定義生成了一個blender模型，並且應用了動畫效果，核心程式碼如下 var mixers = []; var clock = new TH

Three.js導入gltf模型和動畫

var ble 播放 mode req begin stat mod animate 核心代碼 復雜的3D模型一般都是用第三方建模工具生成，然後加載到three中 three官方推薦使用gltf格式的文件，代表編輯器是blender 本文生成了自定義生成了一個blend

three.js 合併多個模型

      方法一：THREE.Geometry.merge()合併多個模型為一個 關鍵點：通過THREE.Geometry.merge()函式，你可以將多個幾何體合併起來建立一個聯合體 參考部落格：63 Three.js 將多個網格合併成一個網格

WebGL框架：Three.js和Babylon.js的比較

今天的web瀏覽器已經走了很長的路。由於出色的JavaScript WebGL api ,現代瀏覽器完全有能力在沒有第三方外掛幫助的情況下呈現先進的2 d和3 d圖形。利用專用的圖形處理器的效能,WebGL使我們訪問的網頁實現動態陰影和現實的物理。 正如你可能

【帶著canvas去流浪（14）】Three.js中凹浮雕模型的生成方式

目錄 一. 方案1：ThreeBSP.js或ThreeCSG.js擴充套件庫 二. 方案2：平面鏤空模型拉伸 三. 方案3：Cinema 4D建模後輸出模型檔案 示例程式碼託管在：http

【three.js : 3D】【load】threejs：3D模型匯入問題

  轉載：threejs：3D模型匯入問題 想想複雜的模型就交給3D設計師進行創作，而我們開發時只需引入模型檔案，是不是很美滋滋？ 當然，如果你時間充裕，又對模型創作感興趣，那你確實可以花時間好好學習3D建模軟體的使用，這樣以後就可以自己建立所需模型，由自己匯出與匯入模型檔案。

【three.js : 3D】【loader】THREE.js中載入不同格式的模型及動畫(fbx、json和obj)

  轉載：THREE.js中載入不同格式的模型及動畫(fbx、json和obj) 注：本文章內容基於 Three.js 88dev 實現 作為剛接觸three.js的小萌新，勵志將自己開荒歷程記錄下來，希望對後來人有所幫助。 網上有很多demo，文件卻不多。每次都是，照搬別人的

【Three.js:3D模型】【轉載】OBJ檔案格式詳解

  轉載：3D中的OBJ檔案格式詳解 常見到的*.obj檔案有兩種：第一種是基於COFF(Common Object File Format)格式的OBJ檔案(也稱目標檔案)，這種格式用於編譯應用程式；第二種是Alias|Wavefront公司推出的OBJ模型檔案。本文對第二種ob

three.js學習點滴（2）— 模型匯入

three.js沒有像mm，cm，m這樣的單位，為了和three.js的大部分外掛程式碼的引數一致，本人以cm為最小單位在3dmax中建模 3Dmax中設定 ： 一、單位問題： 最小單位為cm  ， 以現實實際大小建模 ，如人物高度：1.8m。 二、以原點為模型基準點：三

Webgl顯示Revit模型（二）——利用Three.js優化顯示效果

Webgl顯示Revit模型（一）請見： https://blog.csdn.net/niuge8905/article/details/80044802 Three.js已經算是開發webgl最常用的開源庫了。Autodesk團隊開源了一個va3c來在web端顯示revit，但是這個更

three.js實現螢幕座標轉化為模型的世界座標

three.js實現螢幕座標轉化為模型的世界座標 基礎：three.js中座標系統.doc   方法.project    通過Vector3物件的方法project，方法的引數是相機物件，語句worldVector.project(camera)

66 - three.js 筆記 - 載入 TGA 格式的紋理

1、TGA格式 TGA（Targa）格式是計算機上應用最廣泛的圖象格式。 在兼顧了BMP的圖象質量的同時又兼顧了JPEG的體積優勢。 並且還有自身的特點：通道效果、方向性。 在CG領域常作為影視動畫的序列輸出格式，因為兼具體積小和效果清晰的特點。 TGA的結構比較簡單，屬於一種圖

65 - three.js 筆記 - 載入 DDS 格式的紋理

1、DDS紋理格式 首先，圖片轉換成dds格式，佔用磁碟會變大，但是轉換成dds格式之後架載入到記憶體和視訊記憶體的佔用量會變小。 1.1、dds格式簡介 DDS格式要追述到S3(Silicon & Software Systems)公司提出的一種紋理壓縮格式S3TC(S

three.js學習（3）：匯入threejs

1.在HTML中匯入： 2.用js中匯入： （1）當你的檔案中內建的有一些匯入工具像Webpack或Browserify，你可以用 var THREE = require("three"); var scene = THREE.Scene(); （2）使用ES6的語法形式（如果

three.js載入obj模型

直接上js程式碼吧。我寫了挺多註釋。 <canvas id="scene" width="890px" height="500px"> <script> /* http://mamboleoo.be/learnThree/ */ var

three.js入門系列之匯入拓展類

先來看一下three.js包的目錄結構： 我們使用的時候，可以一次性import所有的功能，也可以按需引入，全依賴three.module.js這個檔案對three.js的功能作了模組化處理； 但是，該模組化處理的功能僅僅是引入了src下面的所有功能類，實際開發中，我們還需要拓展包（examples）

Three.js 從記憶體刪除scene中remove的模型資料，釋放記憶體

當需要動態更新顯示不同的模型，從 scene 中 remove 的模型還會在記憶體中，如果多次進行更新操作就會大量佔用記憶體資源，甚至使瀏覽器崩潰，以下程式碼功能為從記憶體中清除模型資料。 程式碼 /** * 清除模型，模型中有 group 和 scene,需要進行判斷 *

58 Three.js 通過THREE.Raycaster給模型繫結點選事件

簡介 由於瀏覽器是一個2d視口，而在裡面顯示three.js的內容是3d場景，所以，現在有一個問題就是如何將2d視口的x和y座標轉換成three.js場景中的3d座標。好在three.js已經有了解決相關問題的方案，那就是THREE.Raycaster射線，用