Threejs中的渐变clearColor

Posted 2023-02-27

【中文标题】Threejs中的渐变clearColor

【英文标题】：gradient clearColor in threejs

【发布时间】：2015-03-23 16:43:45

【问题描述】：

我可以在threejs中得到一个纯色的clearColor，但是有没有办法实现一个渐变的clearColor。或者一些类似的方法可以在我的天空中获得更多的深度，也许是用灯光？

这是我的相关代码：

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

【问题讨论】：

看看threejs.org/examples/#webgl_shaders_sky

哇 - 太美了 - 我想要一些更复古的东西，但我会看看我是否可以使用它。感谢您的链接。

【参考方案1】：

我遇到了这个代码笔：

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

我不相信，但它完美地回答了这个问题。

相关的块是：

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

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

**注意，我自己的颜色...

【讨论】：

不幸的是，他们将 CanvasRenderer 移至 /examples/js/renderers/CanvasRenderer.js，因此您在最新版本中也需要它。

【参考方案2】：

请参阅 Transparent background with three.js 了解透明背景渲染，然后您可以应用 CSS 渐变 http://www.w3schools.com/Css/css3_gradients.asp 但它不会随着您的场景移动，除非您非常棘手。