前言

最近在學(xué)習(xí)three.js，同時(shí)也學(xué)習(xí)一下vue3，然后就出現(xiàn)問(wèn)題了，報(bào)錯(cuò)直接用不了，錯(cuò)誤信息如下：

Uncaught TypeError: 'get' on proxy: property 'modelViewMatrix' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#' but got '[object Object]')

這個(gè)是什么鬼？？？相信大家都把錯(cuò)誤信息復(fù)制到百度搜了一下解決方案吧？遇到問(wèn)題的人并不多，解決方案就是把scene、mesh 啥的放到全局變量中，不放到data中，好的問(wèn)題解決了。

我這樣寫是不是有點(diǎn)水文的嫌疑？作為一個(gè)成熟的程序員怎么能水文呢？我得找到為什么會(huì)出現(xiàn)這個(gè)問(wèn)題才行，于是我花了兩個(gè)小時(shí)找到問(wèn)題所在，也是怪自己不夠?qū)I(yè)，不然應(yīng)該花不了兩個(gè)小時(shí)。

1. vue的問(wèn)題？

眾所周知，vue3是通過(guò)Proxy實(shí)現(xiàn)的數(shù)據(jù)雙向綁定，vue2是通過(guò)defindeProperty實(shí)現(xiàn)的數(shù)據(jù)雙向綁定，vue2的源碼我也看過(guò)，應(yīng)該也是會(huì)有這個(gè)問(wèn)題的，因?yàn)樵陂_(kāi)發(fā)模式下面，如果瀏覽器支持Proxy還是會(huì)用Proxy，我沒(méi)有用vue2去嘗試，大家可以自行去嘗試，不出意外也會(huì)有這個(gè)問(wèn)題。
上面說(shuō)了一堆，就是為了引出Proxy的異常情況，好了又可以學(xué)習(xí)一下Proxy的知識(shí)了

2. Proxy的異常情況

在使用Proxy時(shí)，當(dāng)屬性存在屬性特性configurable: false, value: undefined,時(shí)，則取其屬性值時(shí)會(huì)報(bào)錯(cuò)：

const handle = {
  get() {
    return 1;
  },
};

const obj = Object.create(null);
Object.defineProperty(obj, 'a', {
  configurable: false,
});
Object.defineProperty(obj, 'b', {
  value: undefined,
});
Object.defineProperty(obj, 'c', {
  configurable: true,
  value: 'c',
});

const proxy = new Proxy(obj, handle);
console.log(proxy.a); // 報(bào)錯(cuò)TypeError: 'get' on proxy: property 'a' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected 'undefined' but got '1')
console.log(proxy.b); // 報(bào)錯(cuò)Uncaught TypeError: 'get' on proxy: property 'b' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected 'undefined' but got '1')
console.log(proxy.c); // 1

看看上面的報(bào)錯(cuò)，是不是很熟悉？這樣看是不是一下就知道是什么問(wèn)題了？

3. Three.js 的問(wèn)題

this.scene = new Scene();
this.scene.modelViewMatrix;

直接運(yùn)行上面的代碼，就會(huì)看到文首出現(xiàn)的錯(cuò)誤，錯(cuò)誤原因就是因?yàn)閏onfigurable設(shè)置為false，找到問(wèn)題就要解決問(wèn)題，是不是覺(jué)得直接使用defineProperty就可以解決了？
很抱歉，這個(gè)不行，再來(lái)學(xué)習(xí)一下defineProperty。

4. defineProperty異常情況

MDN中是這樣描述的

如果屬性已經(jīng)存在，Object.defineProperty()將嘗試根據(jù)描述符中的值以及對(duì)象當(dāng)前的配置來(lái)修改這個(gè)屬性。如果舊描述符將其configurable 屬性設(shè)置為false，則該屬性被認(rèn)為是“不可配置的”，并且沒(méi)有屬性可以被改變（除了單向改變 writable 為 false）。當(dāng)屬性不可配置時(shí)，不能在數(shù)據(jù)和訪問(wèn)器屬性類型之間切換。
當(dāng)試圖改變不可配置屬性（除了 value 和 writable 屬性之外）的值時(shí)，會(huì)拋出TypeError，除非當(dāng)前值和新值相同。

也就是說(shuō)之前定義了configurable為false，就不能再將configurable改為true了，那怎么辦？我說(shuō)了問(wèn)題當(dāng)然是要給你解決的。

5. 解決

之前在網(wǎng)上查了，全局變量來(lái)處理，但是我使用的vue啊，我當(dāng)然是希望將它定義到data中的，但是定義到data中就會(huì)自動(dòng)生成代理，那就只能從源碼入手了。 我也就不講我是怎么去找源碼的，我直接上解決之后的吧，在node_modules\three\build\three.module.js這個(gè)文件中，第7392行，里面的代碼如下：

Object.defineProperties( this, {
 position: {
  configurable: true,
  enumerable: true,
  value: position
 },
 rotation: {
  configurable: true,
  enumerable: true,
  value: rotation
 },
 quaternion: {
  configurable: true,
  enumerable: true,
  value: quaternion
 },
 scale: {
  configurable: true,
  enumerable: true,
  value: scale
 },
 modelViewMatrix: {
  value: new Matrix4()
 },
 normalMatrix: {
  value: new Matrix3()
 }
} );

看到了吧，里面有一個(gè)modelViewMatrix屬性，它沒(méi)有設(shè)置configurable屬性描述，也就是默認(rèn)為false，加上就好了,改好了如下：

Object.defineProperties( this, {
 position: {
  configurable: true,
  enumerable: true,
  value: position
 },
 rotation: {
  configurable: true,
  enumerable: true,
  value: rotation
 },
 quaternion: {
  configurable: true,
  enumerable: true,
  value: quaternion
 },
 scale: {
  configurable: true,
  enumerable: true,
  value: scale
 },
 modelViewMatrix: {
  configurable: true,
  value: new Matrix4()
 },
 normalMatrix: {
  value: new Matrix3()
 }
} );

然后重啟服務(wù)，就不會(huì)報(bào)錯(cuò)了，當(dāng)然這種方式是有缺陷的，因?yàn)楦牧酥皇悄惚镜氐?，你其他同事的代碼并沒(méi)有改，如果要升級(jí)three.js也會(huì)把改了的代碼重新覆蓋，同時(shí)也不知道為什么three.js要這樣處理這個(gè)變量，這個(gè)就看自己是怎么處理的，我這次只處理這個(gè)問(wèn)題。

總結(jié)

到此這篇關(guān)于vue中使用three.js報(bào)錯(cuò)解決的文章就介紹到這了,更多相關(guān)vue使用three.js報(bào)錯(cuò)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論