最近在vue項(xiàng)目中使用threejs一下都是踩過的雷點(diǎn)
## 卡頓問題
在vue中three.js的相機(jī),場景,渲染器,控制器,都不能放在data中,否則會(huì)導(dǎo)致項(xiàng)目運(yùn)行使用出來后很卡
```
//將以上的東西放在mounted中創(chuàng)建,前面加上this.也是全局變量
mounted() {
? ? this.scene = null
? ? this.renderer = null
? ? this.camera = null
? ? this.controls = null
? ? this.init()
? },
? //后續(xù)還要在beforeDestory中進(jìn)行銷毀
? beforeDestroy() {
? ? this.scene = null
? ? this.renderer = null
? ? this.camera = null
? ? this.controls = null
? }
```
##? threebsp
通過npm 安裝threebsp庫后發(fā)現(xiàn)每次運(yùn)行都會(huì)報(bào)錯(cuò),嘗試自己把threebsp的代碼復(fù)制進(jìn)來后導(dǎo)出,也是一樣的報(bào)錯(cuò).[后來通過這個(gè)安裝舊版本的方法解決](http://www.reibang.com/p/53a3aaefb297).
## 紋理貼圖
在使用TextureLoader紋理貼圖的方法時(shí)不能直接.load(url),這樣無法url路徑的圖片渲染
```
//使用require方法請(qǐng)求到路徑.在放到.load方法里
const Texturing = require('../../../public/static/images/floor.jpg')
? ? const loader = new THREE.TextureLoader()
? ? loader.load(Texturing, (texture) => {
? ? ? ? texture.wrapS = texture.wrapT = THREE.RepeatWrapping
? ? ? ? texture.repeat.set(10, 10);
? ? ? ? const floorGeometry = new THREE.BoxGeometry(floorWidth,floorHeight,floorDepth)
? ? ? ? const floorMaterial = new THREE.MeshBasicMaterial({
? ? ? ? ? ? map: texture,
? ? ? ? });
? ? ? ? const floor = new THREE.Mesh(floorGeometry, floorMaterial)
? ? ? ? floor.rotation.x = -Math.PI / 2
? ? ? ? floor.name = "地面";
? ? ? ? scene.add(floor);
? ? })
```
但后續(xù)創(chuàng)建天空盒需要把圖片路徑以數(shù)組的方式放進(jìn)去,無法解決,導(dǎo)致天空盒內(nèi)部無法渲染圖片,尚未解決.
未完待續(xù)
