Threejs Canvas Hintergrund schwarz

Ich habe einen Versuch mit der Basis Szene von Threejs gemacht, aber ich kann nicht verstehen, warum der Canvas-Hintergrund komplett schwarz ist.Threejs Canvas Hintergrund schwarz

<html> 
<head> 
    <title>My first Three.js app</title> 
    <style> 
     body { margin: 0; } 
     canvas { width: 100%; height: 100%;background-color: white; } 
    </style> 
</head> 
<body> 
    <script src="Stereos/threejs/three.js"></script> 
    <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); 
    </script> 
    </body> 
</html>

EDIT:

-Code bei felpone.netsons.org

Quelle

2015-04-02 Stefano Maglione

Die Farbe des Hintergrundes der Leinwand nicht durch die CSS-Wert bestimmt wird, jedoch unter Verwendung von renderer.setClearColor (0xff0000, 1);

Quelle

2015-04-02 20:51:07 gaitat

Das ist nicht ganz richtig. Verwenden Sie 'renderer = new THREE.WebGLRenderer ({alpha: true}); renderer.setClearColor (0x000000, 0); 'und die CSS-Hintergrundfarbe wird angezeigt. – WestLangley

@WestLangley eigentlich die Verwirrung (und meine auch) kommt von der Tatsache, dass die Canvas-Hintergrundfarbe sich anders verhält, je nachdem, wo es definiert ist; als CSS-Stil auf dem Canvas-Element direkt (http://jsfiddle.net/dzdoLosm/) oder als css-Element selbst (http://jsfiddle.net/n0jdpr76/) wobei setClearColor (color, 0) 'scheint nicht zu funktionieren. – gaitat

Ihre clearColor hat null Alpha. Probiere 'renderer.setClearColor (0xff0000, 0.5);' – WestLangley

Sie gemacht Sie haben eine Szene erstellt, eine Kamera erstellt und einen Renderer erstellt, aber Ihnen fehlen zwei wichtige Dinge: Hinzufügen von etwas zum Rendern und Rendern.

Nach der letzten Zeile, fügen

var cube = new THREE.Mesh( 
    new THREE.CubeGeometry(1,1,1), 
    new THREE.MeshNormalMaterial() 
); 
scene.add(cube); 

camera.position.set(2,2,2); 
camera.lookAt(cube.position); 

renderer.render(scene, camera);

, dass ein Würfel auf den Ursprung (0,0,0), mit einer Größe von 1 Einheit schaffen wird; stelle die Kamera ein Stück weit weg und deute auf den Würfel; Rufen Sie dann den Renderer auf, um den Cube zu rendern.

Quelle

2015-07-23 10:12:02

Sie können die Hintergrundfarbe mit css steuern, aber Sie müssen zuerst das "alpha" Ihres WebGLRenderer auf "true" setzen.

In Ihrem Beispiel habe ich die Option alpha hinzugefügt und im Renderer auf true gesetzt, und ich habe auch die Eigenschaft background-color im body style hinzugefügt.

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; background-color: white; } 
      canvas { width: 100%; height: 100%; background-color: white; } 
     </style> 
    </head> 
    <body> 
    <script src="Stereos/threejs/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer({alpha: true}); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    </script> 
    </body> 
</html>

Quelle

2015-07-29 17:11:09 asherkhb

@Jaume Sanchez ist die richtige Antwort. Obwohl die anderen Antworten sachlich sind, glaube ich nicht, dass sie antworten, was Sie gefragt haben, als eine Person, die neu bei threeJS ist. Die var renderer ist nur eine Referenz zu Ihrem Renderziel. Dein Code zeichnet kein Anthing. Sie haben auch keine Kamera in Ihrer Szene, um etwas zu sehen. https://threejs.org/docs/index.html#Manual/Getting_Started/Creating_a_scene ein Tutorial für den Einstieg

Quelle

2017-01-26 15:01:17 Dcoollx

Threejs Canvas Hintergrund schwarz

Antwort

Verwandte Themen