VUE how to Rerender a component

Questions
1

The Vue A page introduces a packaged model component loaded with Threejs, which has CSS3dsprite text on the model. After rotating the model, it jumps to page B and then returns to page A. The Threejs model is still in the same position as when it left. Dragging the mouse, the text does not correspond to the model and does not follow the model anymore. May I ask how to jump back to page A and reload the rendering of Threejs components? Using v-if='flag 'at the component reference point on page A to switch the flag state does not work

111
111742×584 167 KB

222
2221185×605 240 KB

2

CSS3dsprite must be created in some of your code?
It sounds like that code is not getting re-run when the model is reloaded?

3

Re entering the page, the model is still in the same position as when it left, and the text labels no longer follow the model， use ‘location.reload’ can resolve ,but it’s not good; I have no other way to handle it

4

Hello, linxi! If you share some code we can find ways to help you. :slight_smile:

1 Like
5

below is my component , home page reference this component：

@import url(../css/common.css); /* #mythree /deep/ .detail { background-color: rgba(41, 51, 75, 0.7); display: flex; } */ #mythree /deep/ .mylabel{ z-index: -1000; position: absolute; color: white; background: linear-gradient(to top, #9ddbd9, #9ddbd9) left top no-repeat, linear-gradient(to right, #9ddbd9, #9ddbd9) left top no-repeat, linear-gradient(to left, #9ddbd9, #9ddbd9) right top no-repeat, linear-gradient(to bottom, #9ddbd9, #9ddbd9) right top no-repeat, linear-gradient(to left, #9ddbd9, #9ddbd9) left bottom no-repeat, linear-gradient(to bottom, #9ddbd9, #9ddbd9) left bottom no-repeat, linear-gradient(to top, #9ddbd9, #9ddbd9) right bottom no-repeat, linear-gradient(to left, #9ddbd9, #9ddbd9) right bottom no-repeat; background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px; /* background-color: #1a2030; */ background-color: rgba(41, 51, 75, 0.7); width: 100px; height: 150px; font-size: 16px; color:white; } #mythree /deep/ .detail{ display: flex; }

home page reference component
444

1 Like
6

I have found a way to resolve the problem ,in the component add this
aaa

1 Like