Why are elements in 3d rendering at the wrong size only at certain angles of perspective and rotation?

37
June 16, 2019, at 1:10 PM

I'm trying to create a 3d hallway using css and react inline styles. The function mimics a first-person perspective by translating and rotating the cuboid in relation to mouse position and arrow key inputs.

At most angles and distances of perspective it works. Unfortunately, at some of these perspectives the background shows through or one of the sides of the cuboid will render at the wrong size.

In addition different browsers will display these glitches differently. Firefox doesn't seem to have these issues, Google Chrome will render the sides of the hallway at incorrect sizes or perspective, and Edge doesn't even currently display the cuboid (It used to show even more background).

Here is a gif of the glitch I'm encountering in chrome: https://imgur.com/R4SFG1h The orange that you see is the background color on a wrapper element for everything, and it is leaking through.

I'm not sure what css property would cause such a difference in display between browsers.

It looks like it may be related to the issues shown at this question: very strange css3 spec bug for 3d object manipulation perspective z index . But, there weren't any answers or helpful hints at that question.

Relevant react component code:

const styles = {
      wrap: {
        perspective: this.props.perspective + "px"
      },
      cube: {
        width: this.props.windowWidth,
        height: this.props.windowHeight,
        transformOrigin: "50% 50% " + (-1 * this.props.curPos) +"px" ,
        transform:
          "rotateX(" + this.props.xRotation + "deg) " +
          "rotateY(" + this.props.yRotation + "deg) " +
          "translateX(" + (this.props.translateX) + "px) " +
          "translateY(" + (this.props.translateY) + "px) " +
          "translateZ(" + (this.props.translateZ) + "px)"
      },
      front: {width: "100%", height: "100%", transform: "rotateY(180deg) 
        translateZ(" + 0 + "px)"},
      back: {width: "100%", height: "100%", transform: "rotateY(0deg) 
        translateZ(" + -1 * this.props.length + "px)"},
      top: {height: this.props.length + "px", transform: "rotateX(270deg) 
        translateZ("+ 0 + "px)"},
      bottom: {height: this.props.length + "px", transform: "rotateX(90deg) 
        translateY(" +  -1 * this.props.length + "px) translateZ(" + -1 * 
        this.props.windowHeight + "px)"},
      left: {width: this.props.length + "px", transform: "rotateY(90deg) 
        translateZ(" + 0 + "px)"},
      right: {width: this.props.length + "px", transform: "rotateY(270deg) 
        translateZ(" + -1 * this.props.windowWidth + "px) translateX(" + -1 * 
        this.props.length + "px)"}
    }
    return (
      <div className="wrap" style = {styles.wrap}>
        <div className="cube" style={styles.cube}>
          <div className="ends front" style={styles.front} ></div>
          <div className="ends back" style={styles.back} ></div>
          <div className="flats top" style={styles.top} ></div>
          <div className="flats bottom" style={styles.bottom} ></div>
          <div className="sides left" style={styles.left} >
            <Project numProj="2"/>
            <Project numProj="2"/>
          </div>
          <div className="sides right" style={styles.right} >
            <Project numProj="2"/>
            <Project numProj="2"/>
          </div>
        </div>
      </div>
    );
  }

Styles relevant located in css are:

.wrap {
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    overflow: hidden;
    backface-visibility: hidden;
}
.cube {
    position: relative;
    transform-style: preserve-3d;
    /* transform: rotateY(215deg) rotateX(45deg); */
    backface-visibility: hidden;
}
.sides {
    display: flex;
  flex-direction: row;
  justify-content: space-evenly;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.ends {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.flats {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

Thank you for your suggestions. I'm not sure where to go from here.

READ ALSO
How can I create an image overlay blend mode algorithm like on Photoshop?

How can I create an image overlay blend mode algorithm like on Photoshop?

I'm working on a code that should blend 2 images with each otherThe effect should be similar to Photoshop overlay blend mode or screen mode

59
How to print current location using GPS?

How to print current location using GPS?

I want to print current city, state and countryI used IP tracking but that is not much accurate and displaying me different cities, i want current city

39
react-native : How to format object value properly

react-native : How to format object value properly

I am trying to create an empty objectFirst, each field will have a name with empty values

16
How can I get the innerHTML of a clicked button [duplicate]

How can I get the innerHTML of a clicked button [duplicate]

This question already has an answer here:

22