2017-04-10 1 views
3

Ich habe diesen Code von webgl Ich habe es verwendet, wie sie in ihrem Tutorial erwähnt, aber ich kann nicht Ergebnis auf meinem Browser-Bildschirm nur ich sehe, ist nur schwarzer Hintergrund nichts anderes. Ich habe die Bibliothek three.js verwendet, um ein 3D-Würfelmodell zu erstellen. 3D Würfelform mit Javascript

<pre> 
      <!doctype html> 

      <html> 
     <head> 
     <meta charset="utf-8"> 
     <style> 
     canvas { width: 100%; height: 100% } 
     </style> 
     <title>Pryamid</title> 
     </head> 

<body> 

<script> 
var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer(); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 

     var cubegeometry = new THREE.CubeGeometry(1,1,1); 
     var cubematerial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000}); 

     var cube = new THREE.Mesh(cubegeometry, cubematerial); 

     scene.add(cube); 

     camera.position.z = 5; 

     var render = function() { 
      requestAnimationFrame(render); 

      cube.rotation.y += 0.01; 
      cube.rotation.x += 0.01; 
      cube.rotation.z += 0.01; 

      renderer.render(scene, camera); 
     }; 

     // Calling the render function 
window.onload = function() { 
render(); 
}; 

</script> 
</body> 
</html> 

Antwort

4

Ist das Ihr vollständige Code? Ich denke, es wäre hilfreich, wenn Sie den vollständigen HTML-Kontext von dem, was Sie erreichen möchten, gepostet haben.

Was ich jedoch auf den ersten Blick sehe, ist, dass Sie entweder das Rendering-Ziel nicht zu Ihrer HTML-Seite hinzufügen, oder Sie nicht die Leinwand in Ihrem HTML verwenden, um zu rendern. Ich bin Neuling mit Javascript document.body.appendChild(renderer.domElement);

+0

ich dich nicht hätte, und ich bearbeiten Beitrag mit html und ich vergaß:

Der einfachste Weg, Ihre Würfel angezeigt zu bekommen, ist durch die Rendering-Leinwand mit denen Sie Ihre Seite des DOM, mit zu erwähnen, dass ich die three.js-Bibliothek benutzt habe –

+0

Arbeitest du noch? Oder hat es das gelöst? – Alex