畢業到工作已經半年了，以前一直在用有道筆記，今天第一次發表自己的技術博客，希望能得到個人的支持和鼓勵，也希望以后能堅持。

threejs的三大對象

代模型的導入

最近一段時間開始接觸threejs相關的項目，一直在挖坑和填坑之中，于是用webpack+vue2.5+sass搭建了一個threejs的項目，物理引擎：基于ammo.js的pysijs物理引擎，采用的是vue-clic直接搭建：

npm install -g vue-cli

vue init webpack threejstest

cd threejstest

npm install

npm run dev

由于threejs需要引用three.js等一些依賴模塊，將這些資源通過以靜態資源的形式引入，注：npm包安裝threejs模塊嘗試過，雖然可以導入獲取全局模塊，但是引入的其他包無法獲取對應的three全局變量，接下來講講本人對threejs的一些理解：

一、threejs的三大對象：場景(scene)、相機(Camera)、燈光(Light)。

場景相當于生活中的三維空間，用于承載物體用的，所有的模型以及燈光，相機都放在這個場景中，相機相當于現實生活中人的眼睛，用來觀看場景中物體用的，比如你在辦公室這樣的場景下，你的眼睛到處移動，所看到到辦公室的人也不同。燈光可以讓相機感受到反射到的光源，從而能夠看到物體，想象一下在漆黑的夜晚，沒有燈光即使周圍有很多物體，我們人眼也不能看見。

三維空間的構建：知道了三維空間所必須的元素后就可以開始項目了，這是需要一個div用來承載畫布的功能，跟二維空間canvas一樣，只是three.js把畫布的生成集成在對象里面，通過THREE.WebGLRenderer能夠直接生成相應的渲染環境，然后通過js的方法append到對應的標簽中，使用過canvas的朋友應該都知道畫布初始化需要設置其height和width，可以通過對象的setSize進行設置。

1.場景對象的創建：

threejs創建場景方法：let scene=THREE.Scene();

2.相機對象的創建

threejs提供兩種相機，一種是正投影相機，一種是透視相機，考慮到三維場景的真實性，采用了透視相機:

let camera = new THREE.PerspectiveCamera(fov,aspect,near,far);

fov推薦使用45，代表視場，aspect默認采用window.innerWidth/window.innerHeight,near為0.1，遠面far默認1000，相機添加完成會需要添加到場景中，scene.add(camera)；

3.燈光的生成：

threejs中有環境光、區域光、方向光，聚光燈、點光源幾種光源，通過對應的方法可以構建，然后添加到場景中,最后通過scene.add(Light)方法將光源添加到對應場景中相機光源作為空間中的一種對象，可以通過position屬性放在場景中的不同位置，根據自己需要可以隨時變化。

二、模型的導出

1.模型導出(3Dmax,blender)

3Dmax制作obj模型和fbx模型，利用blender導出js模型格式，需要安裝thress.js插件：

導出為js格式，可以直接修改文件后綴變成json格式，靜態模型的導入和動畫的導出選擇可能需要有些區別，動畫模型的導出需要選擇anmation等參數，以便在引擎中進行調用。

2、模型加載到頁面

在利用threejs來導入模型時候需要用到loader工具，obj模型采用OBJLoader.js，fbx模型的導入利用FBXLoader.js導入模塊，為了便于模型在服務端的存儲，通過blender將前面兩種模型導出成json格式然后通過THREE.JSONLoader來導入json格式的模型數據：

mesh生成之后就是需要將mesh添加到場景中，通過scene的add方法可以直接將mesh添加到空間中，mesh在三維空間中有很多屬性，position用來定義mesh在空間中的位置，rotation用來控制物體的旋轉角度，scale可以對物體進行所以，這三個屬性分別對應xyz三個方向上的操作。

let objectLoader = new THREE.JSONLoader();

objectLoader.load(modelurl, function (geometry, materials) {

let loader = new THREE.TextureLoader();

loader.load(pngurl, function (texture) {

let material = new THREE.MeshPhongMaterial({ map: texture });

geometry.center();

let mesh = new Physijs.BoxMesh(geometry, Physijs.createMaterial(material, 1, 0.1), 10);

mesh.scale.set(9, 9, 9);

if (rotationX && rotationY && rotationZ) {

mesh.rotation.x = -Math.random() * 2 * Math.PI;

mesh.rotation.y = -Math.random() * 2 * Math.PI;

mesh.rotation.z = -Math.random() * 2 * Math.PI;

}

material.morphTargets = true;

mesh.position.set(x, y, z); //(objectx.max.y - objectx.min.y) / 2

mesh.castShadow = true;

mesh.receiveShadow = true;

scene.add(mesh);

});

});

位置更新的過程：mesh.position.x=40相當于將模型x移動到x=40的位置，對模型位置進行更新的時候需要加上mesh.__dirtyPosition=true;

3、動畫模型的動畫操作

// AnimationMixer 動畫混合器 理解為這個動畫各方面的一個管理者吧

let mixer = new THREE.AnimationMixer(mesh);

// 骨骼動畫的動作片段保存在geometry中 下面是讀取第一個動畫的方式,所以animationFirst是一個AnimationClip

let firstAnimation = geometry.animations[0];

// AnimationAction是動作的schedule，之所以叫schedule是因為他可以控制著動畫開始 結束 停止 這些流程

let action = mixer.clipAction(firstAnimation);

// 接下來可以為這個動畫配置一些細節了

action.clampWhenFinished = false;// 0會停止，這里設置為0默認停止，不停要注意其他的地方是否有設置這個值，值越大越快

action.setEffectiveTimeScale(0);

action.play();

mesh.mixer = mixer;

mesh.action = action;

先寫到這里后面會繼續補充，希望大家批評和指導，哈哈。

總結

以上是生活随笔為你收集整理的three相机在模型上_threejs学习心得（场景的搭建+运动模型导入）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。