畢業(yè)到工作已經(jīng)半年了，以前一直在用有道筆記，今天第一次發(fā)表自己的技術(shù)博客，希望能得到個(gè)人的支持和鼓勵(lì)，也希望以后能堅(jiān)持。

threejs的三大對(duì)象

代模型的導(dǎo)入

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

npm install -g vue-cli

vue init webpack threejstest

cd threejstest

npm install

npm run dev

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

一、threejs的三大對(duì)象：場(chǎng)景(scene)、相機(jī)(Camera)、燈光(Light)。

場(chǎng)景相當(dāng)于生活中的三維空間，用于承載物體用的，所有的模型以及燈光，相機(jī)都放在這個(gè)場(chǎng)景中，相機(jī)相當(dāng)于現(xiàn)實(shí)生活中人的眼睛，用來觀看場(chǎng)景中物體用的，比如你在辦公室這樣的場(chǎng)景下，你的眼睛到處移動(dòng)，所看到到辦公室的人也不同。燈光可以讓相機(jī)感受到反射到的光源，從而能夠看到物體，想象一下在漆黑的夜晚，沒有燈光即使周圍有很多物體，我們?nèi)搜垡膊荒芸匆姟?/p>

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

1.場(chǎng)景對(duì)象的創(chuàng)建：

threejs創(chuàng)建場(chǎng)景方法：let scene=THREE.Scene();

2.相機(jī)對(duì)象的創(chuàng)建

threejs提供兩種相機(jī)，一種是正投影相機(jī)，一種是透視相機(jī)，考慮到三維場(chǎng)景的真實(shí)性，采用了透視相機(jī):

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

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

3.燈光的生成：

threejs中有環(huán)境光、區(qū)域光、方向光，聚光燈、點(diǎn)光源幾種光源，通過對(duì)應(yīng)的方法可以構(gòu)建，然后添加到場(chǎng)景中,最后通過scene.add(Light)方法將光源添加到對(duì)應(yīng)場(chǎng)景中相機(jī)光源作為空間中的一種對(duì)象，可以通過position屬性放在場(chǎng)景中的不同位置，根據(jù)自己需要可以隨時(shí)變化。

二、模型的導(dǎo)出

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

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

導(dǎo)出為js格式，可以直接修改文件后綴變成json格式，靜態(tài)模型的導(dǎo)入和動(dòng)畫的導(dǎo)出選擇可能需要有些區(qū)別，動(dòng)畫模型的導(dǎo)出需要選擇anmation等參數(shù)，以便在引擎中進(jìn)行調(diào)用。

2、模型加載到頁面

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

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

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相當(dāng)于將模型x移動(dòng)到x=40的位置，對(duì)模型位置進(jìn)行更新的時(shí)候需要加上mesh.__dirtyPosition=true;

3、動(dòng)畫模型的動(dòng)畫操作

// AnimationMixer 動(dòng)畫混合器 理解為這個(gè)動(dòng)畫各方面的一個(gè)管理者吧

let mixer = new THREE.AnimationMixer(mesh);

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

let firstAnimation = geometry.animations[0];

// AnimationAction是動(dòng)作的schedule，之所以叫schedule是因?yàn)樗梢钥刂浦鴦?dòng)畫開始 結(jié)束 停止 這些流程

let action = mixer.clipAction(firstAnimation);

// 接下來可以為這個(gè)動(dòng)畫配置一些細(xì)節(jié)了

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

action.setEffectiveTimeScale(0);

action.play();

mesh.mixer = mixer;

mesh.action = action;

先寫到這里后面會(huì)繼續(xù)補(bǔ)充，希望大家批評(píng)和指導(dǎo)，哈哈。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。