2015-01-24 17 views
5

Posso ottenere un solido clearColor in threejs, ma c'è un modo per ottenere una sfumatura di ClearColor. O un modo simile per ottenere un po 'più di profondità nel mio cielo, magari con le luci?gradient clearColor in threejs

Ecco il mio codice rilevante:

renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setClearColor(0x3dc800); 

var light = new THREE.HemisphereLight(0xffffff, 0xeeeeee, 0.75); 
    light.position.set(0.5, 1, 0.75); 
    scene.add(light); 

scene.fog = new THREE.Fog(0x4ff904, 0, 750); 

enter image description here

+0

un'occhiata a http: // threejs. org/examples/# webgl_shaders_sky – gaitat

+1

wow - è bello - volevo qualcosa di un po 'più retrò, ma vedrò se posso lavorare con quello. Grazie per il link. – mheavers

risposta

3

mi sono imbattuto in questo codepen:

http://codepen.io/billimarie/pen/mJLeBY

prendo nessun credito, ma risponde alla domanda perfettamente.

I pezzi rilevanti sono:

renderer = new THREE.CanvasRenderer({ alpha: true }); // gradient 

withe il css:

body { 
      background-color: #1A8FCF; 
      margin: 0px; 
      overflow: hidden; 
      background-image: -webkit-gradient(#1A8FCF,#D1236A,#1A8FCF); 
      /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */ 
      background-image: -webkit-linear-gradient(#1A8FCF,#D1236A,#1A8FCF); 
      /* Firefox 3.6 - 15 */ 
      background-image: -moz-linear-gradient(#1A8FCF,#D1236A,#1A8FCF); 
      /* Opera 11.1 - 12 */ 
      background-image: -o-linear-gradient(#1A8FCF,#D1236A,#1A8FCF); 
      /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */ 
      background-image: linear-gradient(#1A8FCF,#D1236A,#1A8FCF); 
     } 

** Nota, i miei colori ...

+0

Sfortunatamente hanno spostato 'CanvasRenderer' in'/examples/js/renderers/CanvasRenderer.js', quindi è necessario anche nelle ultime versioni. –

Problemi correlati