Question

我用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上的代码

Answer 1

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

Answer 2

您可以使用css控制背景颜色，但必须先设置＆＃34; alpha＆＃34;您的WebGLRenderer对于＆＃34; true＆＃34;。

在您的示例中，我添加了alpha选项并在渲染器中设置为true，并且还在正文样式中添加了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>

Answer 3

你制作了一个场景，创建了一个相机并创建了一个渲染器，但是你错过了两个重要的事情：添加一些东西来渲染，然后实际渲染它。

在最后一行之后，添加

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 4

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

var scene = new THREE.Scene（）;

scene.background = new THREE.Color（0x000000）;

Answer 5

@Jaume Sanchez是正确的答案。虽然其他答案都是事实，但我不认为他们会回答你作为一个刚接触三人的人的问题。 var renderer只是对渲染目标的引用。你的代码不会绘制anthing。您的场景中也没有相机可以查看任何内容。 Creating a scene入门教程

Answer 6

为此进行更新以获取ThreeJS（2019）的最新版本-

使用以下方法实例化场景后：

scene = new THREE.Scene();

然后，您可以访问此对象的“ background”属性，并设置十六进制颜色，如下所示：

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

Threejs帆布背景黑色

6 个答案: