2. 程式人生 > >89 Three.js 匯入dae格式的骨骼繫結動畫模型

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

阿新 • • 發佈：2019-01-28
var renderer, camera, scene, gui, light, stats, controls, meshHelper, mixer, action; var clock = new THREE.Clock(); function initRender() { renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0xeeeeee
); renderer.shadowMap.enabled = true; //告訴渲染器需要陰影效果 document.body.appendChild(renderer.domElement); } function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200); camera.position.set(5, 10, 15 ); } function
initScene() { scene = new THREE.Scene(); scene.background = new THREE.Color( 0xa0a0a0 ); scene.fog = new THREE.Fog( 0xa0a0a0, 20, 100 ); } //初始化dat.GUI簡化試驗流程 function initGui() { //宣告一個儲存需求修改的相關資料的物件 gui = { animation: true, helper:true //模型輔助線
}; var datGui = new dat.GUI(); //將設定屬性新增到gui當中，gui.add(物件，屬性，最小值，最大值） datGui.add(gui, "animation").onChange(function (e) { if (e) { action.play(); } else { action.stop(); } }); datGui.add(gui, "helper").onChange(function (e) { meshHelper.visible = e; }) } function initLight() { scene.add(new THREE.AmbientLight(0x444444)); light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 20, 10 ); light.castShadow = true; light.shadow.camera.top = 10; light.shadow.camera.bottom = -10; light.shadow.camera.left = -10; light.shadow.camera.right = 10; //告訴平行光需要開啟陰影投射 light.castShadow = true; scene.add(light); } function initModel() { //輔助工具 var helper = new THREE.AxesHelper(50); scene.add(helper); // 地板 var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 200, 200 ), new THREE.MeshPhongMaterial( { color: 0xffffff, depthWrite: false } ) ); mesh.rotation.x = - Math.PI / 2; mesh.receiveShadow = true; scene.add( mesh ); //新增地板割線 var grid = new THREE.GridHelper( 200, 50, 0x000000, 0x000000 ); grid.material.opacity = 0.2; grid.material.transparent = true; scene.add( grid ); //載入模型 var loader = new THREE.ColladaLoader(); loader.load("/lib/models/collada/stormtrooper/stormtrooper.dae", function (mesh) { console.log(mesh); var obj = mesh.scene; //獲取到模型物件 //新增骨骼輔助 meshHelper = new THREE.SkeletonHelper(obj); scene.add(meshHelper); //設定模型的每個部位都可以投影 obj.traverse( function ( child ) { if ( child.isMesh ) { child.castShadow = true; child.receiveShadow = true; } } ); //AnimationMixer是場景中特定物件的動畫播放器。當場景中的多個物件獨立動畫時，可以為每個物件使用一個AnimationMixer mixer = obj.mixer = new THREE.AnimationMixer(obj); //mixer.clipAction 返回一個可以控制動畫的AnimationAction物件 引數需要一個AnimationClip 物件 //AnimationAction.setDuration 設定一個迴圈所需要的時間，當前設定了一秒 //告訴AnimationAction啟動該動作 action = mixer.clipAction(mesh.animations[0]); action.play(); obj.rotation.z += Math.PI; scene.add(obj); }); } //初始化效能外掛 function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } function initControls() { controls = new THREE.OrbitControls(camera, renderer.domElement); //設定控制器的中心點 //controls.target.set( 0, 100, 0 ); // 如果使用animate方法時，將此函式刪除 //controls.addEventListener( 'change', render ); // 使動畫迴圈使用時阻尼或自轉 意思是否有慣性 controls.enableDamping = true; //動態阻尼係數 就是滑鼠拖拽旋轉靈敏度 //controls.dampingFactor = 0.25; //是否可以縮放 controls.enableZoom = true; //是否自動旋轉 controls.autoRotate = false; controls.autoRotateSpeed = 0.5; //設定相機距離原點的最遠距離 controls.minDistance = 1; //設定相機距離原點的最遠距離 controls.maxDistance = 2000; //是否開啟右鍵拖拽 controls.enablePan = true; } function render() { var time = clock.getDelta(); if (mixer) { mixer.update(time); } controls.update(); } //視窗變動觸發的函式 function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 render(); //更新效能外掛 stats.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } function draw() { //相容性判斷 if (!Detector.webgl) Detector.addGetWebGLMessage(); initGui(); initRender(); initScene(); initCamera(); initLight(); initModel(); initControls(); initStats(); animate(); window.onresize = onWindowResize; }

相關推薦

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

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

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

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

Three.js匯入gltf模型和動畫

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

vue.js v-model雙向資料繫結， vue.js form表單資料繫結

vue.js v-model雙向資料繫結， vue.js form表單資料繫結   ================================ ©Copyright 蕃薯耀 2018年11月29日 http://fanshuyao.iteye.com/   &l

vue.js和angular雙向資料繫結的實現原理

一、vue雙向資料繫結 1、原理 資料劫持： vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。 2、實現步驟 要實現mv

js 將json資料自動繫結到 html table 表格中

/*自動繫結到table*/ var f = new Function("+[{id:"1",name:"aa"},{id:"2",name:"bb"}]+"); var list = f(); var h= "<table id='tb'>"; h+= "&l

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

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

js中三種事件繫結之間的關係和事件處理函式裡的this值

<!DOCTYPE HTML> <html > <head>     <meta charset="UTF-8"> </head> <body> <div id="b" onclick="cons

Vue.js快速上手｜單向繫結與雙向繫結

 概述 Vue.js 最顯著的特點就是響應式和資料驅動，也就是將Model和View進行單向繫結或者雙向繫結。單向繫結：把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新。因此，我們不需要進行額外的DOM操作，只需要進行Mod

vue.js 2.0 關於ref--繫結dom物件並獲取

v-ref、v-el 棄用 統一使用ref屬性為元素或元件新增標記，然後通過this.$refs獲取。 開始我用: <div class="menu-wrapper" ref="menu-wrapper"> 來繫結dom物

underscore.js原始碼解析之函式繫結

1. 引言 　　underscore.js是一個1500行左右的Javascript函式式工具庫，裡面提供了很多實用的、耦合度極低的函式，用來方便的操作Javascript中的陣列、物件和函式，它支援函式式和麵向物件鏈式的程式設計風格，還提供了一個精巧的模板引

JS事件機制：事件繫結、事件監聽、事件委託(代理)和事件執行順序總結

JS 對於使用者的操作做出響應,就必須對DOM元素繫結事件處理函式 事件繫結 　1、在DMO中直接繫結事件 <input type="button" value="click me"

JS實現迴圈給元素繫結事件的幾個常用方法

作為一個JS的初學者，想對一些元素迴圈繫結事件的時候總是出現各種問題，尤其是在對閉包沒有熟練掌握的時候更是一頭霧水。網上一查，果然好多初學者有這個困惑，既然這個問題總是出現，於是在我就總結了以下兩個比較好理解的解決方案，分享給大家：（可能還有更好的方式我沒有發現，請各位前輩

js給文字框動態繫結onblur方法，失焦的時候觸發

//以下以失焦時，去掉文字框對應值的前後空格為例；此外存在區域性重新整理元素也適應，區域性重新整理後再呼叫此方法即可。 var funMap = {};//記錄頁面變動之前的所有元素原始onblur方

（更新）knockout.js學習——1.7例子——繫結的詳細語法

建立自定義模板 1、註冊繫結 新增子屬性到ko.bindingHandlers.yourBindingName ={};註冊繫結。 init和update可以只定義其中一個。 （1）初始化：init   // 建立初始化狀態，事件處理等等 （2）更新：update    

微信小程式 js動態給前臺元素繫結事件

//js動態給前臺繫結事件 var myList = ["items1","items2","items3"] pageObject = { data:{ actionSheet

關於js動態渲染的元素繫結事件遇到的坑

總結一下今天專案中遇到的關於動態渲染元素繫結事件遇到的一些坑。 首先作為後臺管理系統除左邊側邊欄外，右邊主體部分都是動態渲染出來的。 第一：在給右側主體裡面元素繫結事件的時候，不要直接on繫結，而是用父元素代理事件來繫結，直接on是綁不上去的。 第二：因為是動態渲染的元素

（更新）knockout.js學習——1.8例子——繫結的詳細語法

knockout.js 1、click 如果應用於a標籤，會阻止a的預設href動作。如果需要保持href，則在click事件後面加上return true。 clickBubble:false阻止冒泡。 event: data-bind="event:{mouseover

Vue.js學習筆記：屬性繫結 v-bind

v-bind  主要用於屬性繫結，Vue官方提供了一個簡寫方式 :bind，例如： <!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"

原生js和jquery框架下繫結事件的方法

一、原生js的事件的繫結 1、通過JavaScript物件屬性進行繫結 document.getElementById("test1").onclick=function(){alert("你好！")}; document.getElementsByTagName ("te