blocks|key|126725|text|画布背景的颜色不是由CSS值决定的，而是使用renderer.setClearColor+(0xff0000,+1);确定的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|126726|entityMap^0|M|11|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|$]]

<p>The color of the background of the canvas is not determined by the CSS value but using <code>renderer.setClearColor (0xff0000, 1);</code></p>


blocks|key|2471376|text|你做了一个场景，创建了一个相机，创建了一个渲染器，但是你遗漏了两件重要的事情:添加一些渲染的东西，以及实际渲染它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2471377|在最后一行之后，添加|2471378|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+);|code-block|syntax|javascript|2471379|这将在原点(+0,0,0+)上创建一个大小为1的多维数据集；将相机稍微远离它并指向多维数据集；然后调用渲染器来呈现多维数据集。|2471380|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You made a scene, created a camera and created a renderer, but you're missing two important things: adding something to render, and actually rendering it.</p>

<p>After your last line, add</p>

<pre><code>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 );
</code></pre>

<p>That will create a cube on the origin ( 0,0,0 ), with size 1 unit; place the camera a bit away from it and pointed at the cube; and then call the renderer to render the cube.</p>


blocks|key|1174219|text|您可以使用css控制背景色，但必须首先将WebGLRenderer的"alpha“设置为"true”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1174220|在您的示例中，我添加了alpha选项并在呈现器中设置为true，还在主体样式中添加了背景颜色属性。|1174221|<html>
++++<head>
++++++++<title>My+first+Three.js+app</title>
++++++++<style>
++++++++++++body+{+margin:+0;+background-color:+white;+}
++++++++++++canvas+{+width:+100%25;+height:+100%25;+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>|code-block|syntax|javascript|1174222|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can control the background color using css, but you must first set the "alpha" of your WebGLRenderer to "true".</p>

<p>In you example, I added the alpha option and set to true in the renderer, and I also added the background-color property in the body style.</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;My first Three.js app&lt;/title&gt;
        &lt;style&gt;
            body { margin: 0; background-color: white; }
            canvas { width: 100%; height: 100%; background-color: white; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script src="Stereos/threejs/three.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        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 );
    &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|126759|text|@Jaume+Sanchez是正确的答案。虽然其他的答案是真实的，但我不认为他们回答的是你作为threeJS新手问的问题。var+renderer只是对渲染目标的引用。你的代码没有画任何东西。你也没有相机在你的场景中看任何东西。创造一个场景入门教程|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|126760|entityMap|0|LINK|mutability|MUTABLE|url|https://threejs.org/docs/#manual/introduction/Creating-a-scene^0|1P|C|36|6|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]]]]

<p>@Jaume Sanchez is the correct answer. Although the others answers are factual, I don't think that they answer what you where asking as a person new to threeJS. the    <code>var renderer</code>is just a reference to your render target. your code does not draw anthing. You also do not have a camera in your scene to look at anything. <a href="https://threejs.org/docs/#manual/introduction/Creating-a-scene" rel="nofollow noreferrer">Creating a scene</a> a tutorial for getting started</p>


blocks|key|126791|text|最好将背景直接添加到场景中，可以是纹理，也可以是THREE.Color!|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|126792|从r78版本开始，您可以使用下面的代码设置场景的背景颜色：|126793|var+scene+=+new+THREE.Scene();
scene.background+=+new+THREE.Color(+0x000000+);|code-block|syntax|javascript|126794|医生：|126795|Scene.background|unordered-list-item|126796|entityMap|0|LINK|mutability|MUTABLE|url|https://threejs.org/docs/#api/en/scenes/Scene.background^0|E|M|0|0|0|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|R|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>Better add the background to the scene directly <em><strong>which can be a texture or a THREE.Color!</strong></em></p>
<p>From r78 versions onwards, you can use the code below to set your scene's background colour:</p>
<pre><code>var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
</code></pre>
<h3>Docs:</h3>
<ul>
<li><a href="https://threejs.org/docs/#api/en/scenes/Scene.background" rel="nofollow noreferrer">Scene.background</a></li>
</ul>


blocks|key|1174305|text|更新最新版本的ThreeJS+(2019年)-|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1174306|使用以下方法实例化场景之后：|1174307|scene+=+new+THREE.Scene();|code-block|syntax|javascript|1174308|然后，您可以访问该对象的“背景”属性，并设置十六进制颜色如下：|1174309|scene.background+=+new+THREE.Color(0xf5f5f5);|1174310|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Updating this for the latest version of ThreeJS (2019) -</p>

<p>After you instantiate your scene using:</p>

<pre><code>scene = new THREE.Scene();
</code></pre>

<p>You can then access the "background" property of this object and set the hex color like this:</p>

<pre><code>scene.background = new THREE.Color(0xf5f5f5);
</code></pre>


blocks|key|2471477|text|如果出于某种原因：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2471478|renderer.setClearColor(0xff0000,+1);|code-block|syntax|javascript|2471479|不起作用，请尝试如下：|2471480|const+renderer+=+new+THREE.WebGLRenderer();
renderer.domElement.className+=+"domElement";|2471481|在css中添加一个选择器：|2471482|.domElement+{
++background-color:+red;+/*+any+color+*/
}|2471483|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>If for some reason:</p>
<pre><code>renderer.setClearColor(0xff0000, 1);
</code></pre>
<p>does not work, try this:</p>
<pre><code>const renderer = new THREE.WebGLRenderer();
renderer.domElement.className = &quot;domElement&quot;;
</code></pre>
<p>and in css add a selector:</p>
<pre><code>.domElement {
  background-color: red; /* any color */
}
</code></pre>


<p>I made a trial with basic scene of threejs but I can't understand why the canvas background is completely black.</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;My first Three.js app&lt;/title&gt;
    &lt;style&gt;
        body { margin: 0; }
        canvas { width: 100%; height: 100%;background-color: white; }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script src="Stereos/threejs/three.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        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 );
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>EDIT:</strong></p>

<p>Code at felpone.netsons.org</p>


Threejs canvas background black

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试用了三个基本场景，但我不明白为什么画布背景是完全黑色的。<html><head>    <title>My first Three.js app</title>    <style>        body { margin: 0; }        canvas { width: 100%; height: 10...

问三色帆布背景黑色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三色帆布背景黑色EN