teliportme/remixvr

'Day 1' project shows black screen without any error messages in console

tgruser opened this issue · 3 comments

tgruser commented

Dear Mr. Simon,

i have a quick question for you, concerning your "30 VR Projects In 30 Days" - Projects.
I really like all of these Projects and i would like to "reconstruate" them myself.
Last Week i started with the VR Photos Tutorial: https://tutorialsforvr.com/360-virtual-reality-photos-tutorial/.
It is working i guess because the console displays not any error messages but
the website only shows me a black screen.
I honestly can't find the mistake i did or rather the Cause of this black screen.
It would be amazing if you or maybe other users here can help me out.

Here is the Code:

<!DOCTYPE html>
<html>
<head>
  <title>Day 1 - 360 Photos VR</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, `shrink-to-fit=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="description" content="View 360 photos and photospheres in virutal reality."/>
  <script async src="https://www.google-analytics.com/analytics.js"></script>
  <script src="three.min.js"></script>
  <script src="webvr-polyfill.min.js"></script>
  <script src="VRControls.js"></script>
  <script src="VREffect.js"></script>
  <script src="webvr-ui.min.js"></script>
  <style type="text/css">
    body {
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      margin: 0px;
      padding: 0;
      overflow: hidden;
    }
    #ui {
     position: absolute;
     bottom: 10px;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     font-family: 'Karla', sans-serif;
     z-index: 1;
    }
    a#no-vr {
     display: block;
     color: white;
     margin-top: 1em;
    }
  </style>
</head>
<body>
  <div id="ui">
    <div id="vr-button"></div>
    <a id="no-vr" href="#">Try without a headset</a>
  </div>
<script src="script.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-18119185-16', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>

I only changed the external javascripts, cause i have them in the same Folder.
in the script.js i only changed the TextureLoader to:

var texture = new THREE.TextureLoader().load('coral2.jpg');

Because i want to display my own 360° panorama photos.

Yours faithfully

risonsimon commented

Is the coral2.jpg in the same folder? Try with filename as ./coral2.jpg.
Can you upload the files somewhere for a demo?

tgruser commented

stereo3D.zip

This the whole folder. I hope you can work with that, thank you.

risonsimon commented

Found the problem.

You're using a different version of VREffect.js and VRControls.js than used in the project. You can get the correct version from common folder.

Also, if you're using the latest version of three.js, you can also enable threejs VR without using VREffect.js and VRControls.js. But this would mean change in the script.js file also. You can see the usage here.

  • 🎉2