黑色三件套帆布背景

Threejs canvas background black

本文关键字：帆布 背景 三件 黑色      更新时间：2023-09-26

我试用了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>

编辑：

代码位于felpone.netsons.org

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

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

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

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

最好直接将背景添加到场景中可以是纹理或THREE.Color

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

var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );

文档：

  • 场景背景

您制作了一个场景，创建了一个相机并创建了渲染器，但您缺少了两件重要的事情：添加要渲染的东西，并实际渲染它。

在最后一行之后，添加

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个单位；将相机放在离它稍远的地方，并指向立方体；然后调用渲染器来渲染立方体。

将其更新为ThreeJS（2019）的最新版本-

使用实例化场景后

scene = new THREE.Scene();

然后，您可以访问该对象的"背景"属性，并设置如下十六进制颜色：

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

@Jaume Sanchez是正确答案。虽然其他人的回答都是事实，但我不认为他们回答了你作为一个新手在哪里问的问题。CCD_ 2只是对渲染目标的引用。您的代码不会绘制anthing。场景中也没有用于查看任何内容的摄影机。创建场景开始的教程

如果出于某种原因：

renderer.setClearColor(0xff0000, 1);

不起作用，试试这个：

const renderer = new THREE.WebGLRenderer();
renderer.domElement.className = "domElement";

在css中添加一个选择器：

.domElement {
  background-color: red; /* any color */
}

你说你尝试过基本场景。而问题是你们的黑屏。我看到你的代码了。我发现了这个错误。

您还没有调用渲染方法。

renderer.render(scene, camera);

此外，您还没有向threejs场景添加任何几何体（网格）。（基本内容）*

所以你可能会得到黑屏

毕竟，你想把黑色屏幕改成白色屏幕。

然后设置

 scene.background = new THREE.Color(0xffffff);
相关文章：