2015-01-24 16 views
5

Mogę uzyskać solidną clearColor w trojkach, ale czy istnieje sposób na uzyskanie gradientu clearColor. Lub w inny sposób, aby uzyskać nieco więcej głębi na moim niebie, może ze światłami?gradient clearColor in threejs

Oto mój odpowiedni kod:

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

spojrzeć na http: // threejs. org/examples/# webgl_shaders_sky – gaitat

+1

wow - to piękne - chciałem czegoś bardziej retro, ale zobaczę, czy mogę z tym pracować. Dzięki za link. – mheavers

Odpowiedz

3

natknąłem tej codepen:

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

biorę żadnego kredytu, ale odpowiedź na pytanie doskonale.

Odpowiednie kawałki są:

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

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

** Uwaga, moje kolory ...

+0

Niestety przenieśli 'CanvasRenderer' do'/examples/js/renderers/CanvasRenderer.js', więc również tego potrzebujesz w najnowszych wydaniach. –