fixed renderer location

aryapsinha · aryapsinha · commit a9d30a184d5b · 2022-07-21T12:15:58.000-04:00
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
     <link href="assets/dist/css/bootstrap.min.css" rel="stylesheet">
     
     <!-- Custom styles for this template -->
-    <link href="starter-template.css" rel="stylesheet">
+    <link href="./starter-template.css" rel="stylesheet">
   </head>
   <body>
     
@@ -58,12 +58,13 @@ <h1>TSL API</h1>
       <p>Get the code here</p>
       <textarea class="input-xlarge" id="codeBox" rows="10" spellcheck="false" style="min-width:100%"></textarea>
     </div>
-    <div class="col-4">
-        <p>Render the animation here</p>
-        <span style="min-width:100%; border: 1px solid black"  id="synthBox" class="diagram right">
+    <div class="col-4" id="synthBox">
         
-        </span>
-        <!--textarea class="input-xlarge" id="synthBox" rows="10" spellcheck="false" style="min-width:100%"></textarea-->
+        <p id = "render">Render the animation here</p>
+        <!--span style="min-width:100%; border: 1px solid black"  id="synthBox" class="diagram right">
+        
+        </span-->
+        <!--textarea class="input-xlarge"  rows="10" spellcheck="false" style="min-width:100%"></textarea-->
       </div>
   </div>
     
diff --git a/index.js b/index.js
@@ -133,12 +133,15 @@ function sceneBuild() { //so this is where the thing will animate
         //create the renderer
         const renderer = new THREE.WebGLRenderer();
         // document.body.appendChild( renderer.domElement );
-        renderer.setSize( window.innerWidth/4, window.innerHeight/4 ); //this changes the size of the renderer
+        
+        renderer.setSize( window.innerWidth/4, window.innerHeight/4 );
+        document.getElementById("render").appendChild( renderer.domElement );
+        //renderer.setSize( document.getElementById('synthBox').style.width, document.getElementById('synthBox').style.height ); //this changes the size of the renderer
         //*I believe renderer.setviewPort can change the positioning of the animation 
         //renderer.setViewport(0, 0, window.innerWidth/4, window.innerHeight/4);
-        console.log(document.getElementById("synthBox"))
+        //console.log(document.getElementById("synthBox"))
        // document.body.insertBefore(renderer.domElement, document.getElementById("synthBox"));
-       document.body.appendChild( renderer.domElement );
+       
         
        
         
diff --git a/starter-template.css b/starter-template.css
@@ -16,9 +16,10 @@
     content: "";
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
   }
-  .diagram {
+  /*.diagram {
     display: inline-block;
     width: 7em;
     height:17em;
     border: 1px solid black;
-  }
+    z-index: -1; 
+  }*/
