Трижды холст фон черный

Я сделал пробную версию с основной сценой из трех, но я не могу понять, почему фон холста полностью черный.

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

Код на felpone.netsons.org

Ответ 1

Цвет фона холста не определяется значением CSS, но с использованием renderer.setClearColor (0xff0000, 1);

Ответ 2

Вы можете управлять цветом фона с помощью css, но сначала вы должны установить "alpha" вашего WebGLRenderer в "true".

В вашем примере я добавил параметр alpha и установил true в средстве визуализации, а также добавил свойство background-color в стиле 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>

Ответ 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; поместите камеру немного от нее и заострите на кубе; а затем вызовите рендерер для рендеринга куба.

Ответ 4

@Jaume Sanchez - правильный ответ. Хотя остальные ответы являются фактическими, я не думаю, что они отвечают на то, что вы спрашиваете как человек, плохо знакомый с ThreeJS. var renderer - это просто ссылка на вашу цель рендеринга. ваш код не рисует муравейник. У вас также нет камеры в вашей сцене, чтобы смотреть на что-либо. Создание сцены учебник для начала

Ответ 5

Начиная с версии r78, вы можете использовать код ниже, чтобы установить цвет фона вашей сцены:

var scene = new THREE.Scene();

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

Ответ 6

Обновление для последней версии ThreeJS (2019) -

После того, как вы создали экземпляр своей сцены, используя

scene = new THREE.Scene();

Затем вы можете получить доступ к свойству "background" этого объекта и установить шестнадцатеричный цвет следующим образом:

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