javascript Threejs画布背景黑色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29422118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Threejs canvas background black
提问by Stefano Maglione
I made a trial with basic scene of threejs but I can't understand why the canvas background is completely black.
我用threejs的基本场景进行了试用，但我不明白为什么画布背景是全黑的。
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%;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();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
</script>
</body>
</html>
EDIT:
编辑：
Code at felpone.netsons.org
felpone.netsons.org 上的代码
回答by gaitat
The color of the background of the canvas is not determined by the CSS value but using renderer.setClearColor (0xff0000, 1);
画布背景的颜色不是由 CSS 值决定的，而是使用 renderer.setClearColor (0xff0000, 1);
回答by asherkhb
You can control the background color using css, but you must first set the "alpha" of your WebGLRenderer to "true".
您可以使用 css 控制背景颜色，但您必须首先将 WebGLRenderer 的“alpha”设置为“true”。
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.
在你的例子中，我在渲染器中添加了 alpha 选项并设置为 true，我还在 body 样式中添加了 background-color 属性。
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; background-color: white; }
canvas { width: 100%; height: 100%; 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>
回答by Swapnil Hadge
From r78 versions onwards, you can use the code below to set your scene's background colour:
从 r78 版本开始，您可以使用以下代码设置场景的背景颜色：
var scene = new THREE.Scene();
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
场景背景=新三色（0x000000）；
回答by Jaume Sánchez
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.
您创建了一个场景，创建了一个相机并创建了一个渲染器，但是您缺少两件重要的事情：添加一些要渲染的东西，并实际渲染它。
After your last line, add
在最后一行之后，添加
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 );
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.
这将在原点 ( 0,0,0 ) 上创建一个大小为 1 单位的立方体；将相机稍微远离它并指向立方体；然后调用渲染器来渲染立方体。
回答by Dcoollx
@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 var rendereris 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. Creating a scenea tutorial for getting started
@Jaume Sanchez 是正确答案。尽管其他答案是事实，但我认为他们并没有回答您作为 ThreeJS 新手提出的问题。这 var renderer只是对渲染目标的引用。您的代码不会绘制任何东西。您的场景中也没有相机可以查看任何内容。创建场景入门教程
回答by Alex Melluzzo
Updating this for the latest version of ThreeJS (2019) -
更新最新版本的 ThreeJS (2019) -
After you instantiate your scene using:
使用以下方法实例化场景后：
scene = new THREE.Scene();
You can then access the "background" property of this object and set the hex color like this:
然后，您可以访问此对象的“背景”属性并设置十六进制颜色，如下所示：
scene.background = new THREE.Color(0xf5f5f5);
