Threejs canvas background black

Ho eseguito una prova con la scena base di threejs ma non riesco a capire perché lo sfondo della tela sia completamente nero.Threejs canvas background black

<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:

Codice e felpone.netsons.org

fonte

2015-04-02 Stefano Maglione

Il colore dello sfondo della tela non è determinato dal valore CSS ma utilizzando renderer.setClearColor (0xff0000, 1);

fonte

2015-04-02 20:51:07 gaitat

Questo non è proprio vero. Usa 'renderer = new THREE.WebGLRenderer ({alpha: true}); renderer.setClearColor (0x000000, 0); 'e il colore di sfondo CSS verrà visualizzato. – WestLangley

@WestLangley in realtà la confusione (e anche il mio) deriva dal fatto che il colore di sfondo della tela si comporta in modo diverso in base a dove è definito; come stile css sull'elemento canvas direttamente (http://jsfiddle.net/dzdoLosm/) o come elemento css di per sé (http://jsfiddle.net/n0jdpr76/) dove si imposta 'setClearColor (color, 0) 'non sembra funzionare. – gaitat

ClearColor ha zero alfa. Prova 'renderer.setClearColor (0xff0000, 0.5);' – WestLangley

Hai fatto una scena, creato una macchina fotografica e creato un renderer, ma ti mancano due cose importanti: aggiungere qualcosa da renderizzare e renderlo effettivamente.

Dopo l'ultima riga, aggiungere

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);

che creerà un cubo su l'origine (0,0,0), con dimensioni 1 unità; posiziona la fotocamera un po 'lontano e punta il cubo; e quindi chiama il renderer per rendere il cubo.

fonte

2015-07-23 10:12:02

È possibile controllare il colore di sfondo utilizzando css, ma è necessario prima impostare "alpha" del WebGLRenderer su "true".

Nell'esempio, ho aggiunto l'opzione alfa e impostato su true nel renderer e ho anche aggiunto la proprietà background-color nello stile del corpo.

<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>

fonte

2015-07-29 17:11:09 asherkhb

@Jaume Sanchez è la risposta corretta. Anche se le altre risposte sono reali, non penso che rispondano a ciò che chiedevi come persona nuova a tre JS. lo var renderer è solo un riferimento al target di rendering. il tuo codice non disegna nulla. Inoltre non hai una macchina fotografica nella tua scena per guardare qualsiasi cosa. https://threejs.org/docs/index.html#Manual/Getting_Started/Creating_a_scene un tutorial per iniziare

fonte

2017-01-26 15:01:17 Dcoollx

Threejs canvas background black

risposta

Problemi correlati