Изменение фона three.js на прозрачный или другой цвет

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

Мой HTML:

 

Мой CSS:

  #canvasColor { z-index: 998; opacity:1; background: red; }  

Как вы можете видеть в следующем онлайн-примере, у меня есть анимация, прикрепленная к canvasу, поэтому не могу сделать непрозрачность: 0; на идентификаторе.

Предварительный просмотр в прямом эфире: http://devsgs.com/preview/test/particle/

Любые идеи о том, как перезаписать черный цвет по умолчанию?

Я натолкнулся на это, когда начал использовать тр.js. Это проблема javascript. В настоящее время у вас есть:

 renderer.setClearColorHex( 0x000000, 1 ); 

в вашей функции threejs init. Измените его на:

 renderer.setClearColorHex( 0xffffff, 1 ); 

Обновление: благодаря HdN8 для обновленного решения:

 renderer.setClearColor( 0xffffff, 0); 

Обновление № 2: Как отметил WestLangley в другом, аналогичном вопросе – теперь вы должны использовать приведенный ниже код при создании нового экземпляра WebGLRenderer в сочетании с setClearColor() :

 var renderer = new THREE.WebGLRenderer({ alpha: true }); 

Обновление № 3: Mr.doob указывает, что с r78 вы также можете использовать код ниже, чтобы установить цвет фона вашей сцены:

 var scene = new THREE.Scene(); // initialising the scene scene.background = new THREE.Color( 0xff0000 ); 

Для прозрачности это также является обязательным: renderer = new THREE.WebGLRenderer( { alpha: true } ) через Прозрачный фон с тэгом.

Полный ответ: (Протестировано с r71)

Чтобы установить цвет фона, используйте:

 renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color 

Если вам нужен прозрачный фон, вам нужно сначала включить альфа в вашем рендерере:

 renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent 

Просмотрите документы для получения дополнительной информации.

Я обнаружил, что когда я создал сцену с помощью редактора three.js, мне не только пришлось использовать правильный код ответа (см. Выше), чтобы настроить рендер с альфа-значением и четким цветом, мне пришлось войти в приложение .json и найдите атрибут «Background» объекта «Scene» и установите его: "background: null" .

Экспорт из редактора Three.js изначально был установлен на «background»: 0

Interesting Posts

Запись строки в том же месте с помощью Console.Write в C # 2.0

Express.js: как получить удаленный адрес клиента

Как запустить службу, когда .apk установлен в первый раз

Как отредактировать абзац в Notepad ++?

Написание сценариев оболочки, которые будут выполняться на любой оболочке (используя несколько строк shebang?)

Как увеличить количество отображаемых строк дампа трассировки Java-стека?

Удаление границы изображения в Chrome / IE9

Как отключить поиск и догадывание доменов в адресной строке Firefox, сохраняя при этом другие функции?

Как объявить 2d-массив в C ++ с помощью new?

javac для компиляции всех java-файлов в данной директории рекурсивно

Как отправить электронное письмо в .Net в соответствии с новыми политиками безопасности?

Почему не логично синхронизировать логику?

Как очистить кеш проекта в идее Intellij, например, Eclipse?

Могу ли я сделать cURL fail с exitCode, отличным от 0, если код статуса HTTP не равен 200?

Замена fragmentа другим fragmentом внутри группы действий

Давайте будем гением компьютера.