blocks|key|113895|text|对于透明度，这也是必需的:通过Transparent+background+with+three.js实现的renderer+=+new+THREE.WebGLRenderer(+{+alpha:+true+}+)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|113896|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/20495302/transparent-background-with-three-js^0|1I|1H|F|10|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

For transparency, this is also mandatory: <code>renderer = new THREE.WebGLRenderer( { alpha: true } )</code> via <a href="https://stackoverflow.com/questions/20495302/transparent-background-with-three-js">Transparent background with three.js</a>

blocks|key|331302|text|完整的答案：(用r71测试)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|331303|要设置背景色，请使用：|331304|renderer.setClearColor(+0xffffff+);+//+white+background+-+replace+ffffff+with+any+hex+color|code-block|syntax|javascript|331305|如果你想要一个透明的背景，你必须首先在你的渲染器中启用alpha：|331306|renderer+=+new+THREE.WebGLRenderer(+{+alpha:+true+}+);+//+init+like+this
renderer.setClearColor(+0xffffff,+0+);+//+second+param+is+opacity,+0+=>+transparent|331307|有关更多信息，请访问View+the+docs。|offset|length|331308|entityMap|0|LINK|mutability|MUTABLE|url|https://threejs.org/docs/#api/renderers/WebGLRenderer.setClearColor^0|0|0|0|0|0|A|D|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

A full answer: (Tested with r71)

To set a background color use:

<pre><code>renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color
</code></pre>

If you want a transparent background you will have to enable alpha in your renderer first:

<pre><code>renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 =&gt; transparent
</code></pre>

<a href="https://threejs.org/docs/#api/renderers/WebGLRenderer.setClearColor" rel="noreferrer">View the docs</a> for more info.

blocks|key|331367|text|我发现，当我通过three.js编辑器创建一个场景时，我不仅需要使用正确答案的代码(如上)，要设置渲染器的Alpha值和清晰的颜色，我还必须进入app.json文件，找到"+scene“对象的”"background:+null"“属性并将其设置为："background:+null"。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|331368|从Three.js编辑器导出时，它最初设置为"background"：0|331369|entityMap^0|2P|I|3H|I|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

I found that when I created a scene via the three.js editor, I not only had to use the correct answer's code (above), to set up the renderer with an alpha value and the clear color, I had to go into the app.json file and find the "Scene" Object's "background" attribute and set it to:
<code>"background: null"</code>. 

The export from Three.js editor had it originally set to "background": 0

blocks|key|114055|text|我还想补充的是，如果使用three.js编辑器，不要忘记在index.html中将背景颜色也设置为clear。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114056|background-color:#00000000|code-block|syntax|javascript|114057|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I'd also like to add that if using the three.js editor don't forget to set the background colour to clear as well in the index.html.

<pre><code>background-color:#00000000
</code></pre>

blocks|key|114076|text|在2020年使用r115时，它可以很好地使用下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114077|const+renderer+=+new+THREE.WebGLRenderer({+alpha:+true+});++const+scene+=+new+THREE.Scene();++scene.background+=+null;|offset|length|style|CODE|114078|entityMap^0|0|0|3A|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

In 2020 using r115 it works very good with this:

<code>const renderer = new THREE.WebGLRenderer({ alpha: true });
 const scene = new THREE.Scene();
 scene.background = null;</code>

blocks|key|331439|text|使用下面的代码renderer.setClearColor(+0x000000,+1+);设置渲染器的透明颜色|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|331440|entityMap^0|7|12|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Set renderer clear colour
With the below code
<code> renderer.setClearColor( 0x000000, 1 );</code>

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.

My HTML:

<pre><code>&lt;canvas id="canvasColor"&gt;
</code></pre>

My CSS:

<pre><code>&lt;style type="text/css"&gt;
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
&lt;/style&gt;
</code></pre>

As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.

Live preview:
<a href="http://devsgs.com/preview/test/particle/">http://devsgs.com/preview/test/particle/</a>

Any ideas how to overwrite the default black?

Changing three.js background to transparent or other color

我一直在尝试将画布的默认背景颜色从黑色更改为透明/任何其他颜色-但没有成功。我的HTML：<canvas id="canvasColor">我的CSS：<style type="text/css">#canvasColor { z-index: 998;opacity:1;background: red;}</styl...

问将three.js背景更改为透明或其他颜色
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将three.js背景更改为透明或其他颜色EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将three.js背景更改为透明或其他颜色
EN