Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use three.js to report errors in vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Preface

Recently, I was learning three.js, and I also studied vue3, and then there was a problem. I can't use it directly if I reported an error. The error message is as follows:

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]')

What the heck is this? I believe everyone copied the error information to Baidu to search the solution, right? Not many people encounter problems, the solution is to put scene, mesh and so on into the global variables, not into the data, a good problem is solved.

Am I a bit suspected of hydrology when I write like this? How can a mature programmer be hydrological? I had to find out why there was this problem, so it took me two hours to find out what the problem was, and I blamed myself for being unprofessional, otherwise I wouldn't have spent two hours.

1. The problem of vue?

As we all know, vue3 is a two-way binding of data through Proxy, and vue2 is a two-way binding of data through defindeProperty. I have also seen the source code of vue2, and there should be this problem, because under the development mode, if the browser supports Proxy will still use Proxy, I did not use vue2 to try, you can try, no accident will have this problem.

The above said a lot, just to lead to the abnormal situation of Proxy, OK, we can learn the knowledge of Proxy again.

2. Abnormal situation of Proxy

When using Proxy, when the attribute property configurable: false, value: undefined exists in the attribute, an error will be reported when taking the attribute value:

Const handle = {get () {return 1;},}; const obj = Object.create (null); Object.defineProperty (obj, 'asides, {configurable: false,}); Object.defineProperty (obj,' baked, {value: undefined,}); Object.defineProperty (obj, 'cations, {configurable: true, value:' cations,}); const proxy = new Proxy (obj, handle); console.log (proxy.a) / / error 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); / / error 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

Look at the error report above. Are you familiar with it? Do you know what the problem is at a glance?

3. Three.js 's problem this.scene = new Scene (); this.scene.modelViewMatrix

If you run the above code directly, you will see the error at the beginning of the text. The reason for the error is that configurable is set to false. If you find the problem, you have to solve the problem. Do you think it can be solved by using defineProperty directly?

I'm sorry, this won't work. Let's learn defineProperty again.

4. Abnormal condition of defineProperty

This is how MDN describes it.

If the property already exists, Object.defineProperty () will try to modify the property based on the value in the descriptor and the current configuration of the object. If the old descriptor sets its configurable property to false, the property is considered "unconfigurable" and no property can be changed (except for unidirectionally changing writable to false). You cannot switch between data and accessor property types when the property is not configurable.

When you try to change the value of a non-configurable property (except for the value and writable properties), TypeError is thrown unless the current value is the same as the new value.

That is to say, if you defined configurable as false, you can no longer change configurable to true, so what should you do? I said, of course, the problem should be solved for you.

5. Solve

Look it up on the Internet before, global variables to deal with, but I use vue, ah, I certainly want to define it into data, but the definition to data will automatically generate agents, so we can only start with the source code. I won't talk about how I find the source code. I'll go straight to the solution. In line 7392 of the file node_modules\ three\ build\ three.module.js, the code is as follows:

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 ()}})

See, there is a modelViewMatrix attribute in it, which does not set the configurable attribute description, that is, it defaults to false. Just add it, and change it as follows:

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: {normalMatrix: value ()})

Then restart the service, there will be no error, of course, this way is flawed, because the change is only local, the code of other colleagues has not changed, if you want to upgrade three.js will also re-overwrite the changed code, at the same time, I do not know why three.js deals with this variable in this way, this depends on how I handle it, I only deal with this problem this time.

The above is all the contents of the article "how to report an error using three.js in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.