Threejs canvas 背景黑色

Question

我用threejs的基本场景试了一下，但是我不明白为什么canvas背景是全黑的

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

编辑：

代码位于 felpone.netsons.org

Answer 1

canvas 的背景颜色不是由 CSS 值决定的，而是使用 renderer.setClearColor (0xff0000, 1);

Answer 2

您创建了一个场景、创建了一个相机并创建了一个渲染器，但是您错过了两件重要的事情：添加要渲染的东西，以及实际渲染它。

在最后一行之后，添加

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

这将在原点 ( 0,0,0 ) 上创建一个大小为 1 的立方体；将相机放在离它稍远的地方并指向立方体；然后调用渲染器渲染立方体。

Answer 3

您可以使用 css 控制背景颜色，但您必须先将 WebGLRenderer 的 "alpha" 设置为 "true"。

在您的示例中，我在渲染器中添加了 alpha 选项并设置为 true，并且还在 body 样式中添加了背景色属性。

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

Answer 4

@Jaume Sanchez 是正确答案。尽管其他答案都是事实，但我认为他们并没有回答您作为 threeJS 新手所问的问题。 var renderer 只是对您的渲染目标的引用。您的代码没有绘制任何东西。您的场景中也没有相机可以查看任何东西。 Creating a scene入门教程

Answer 5

从 r78 版本开始，您可以使用下面的代码设置场景的背景颜色：

var scene = new THREE.Scene();

scene.background = 新 THREE.Color( 0x000000 );

Answer 6

更新最新版本的 ThreeJS (2019) -

在使用实例化场景后：

scene = new THREE.Scene();

然后您可以访问此对象的 "background" 属性并像这样设置十六进制颜色：

scene.background = new THREE.Color(0xf5f5f5);

Threejs canvas 背景黑色

Threejs canvas background black

javascript

three.js