0

Собственно сам вопрос. Можно ли задать задний фон сцены градиентом, чтобы он со временем плавно менялся (например из желто-синего в красно-зеленый)?

1
  • Я криво прочитал вопрос из предыдущего комментария про фон :) Я думал, что градиентом должен заполняться только фон внутри пузыря ) Commented 18 сент. 2018 в 19:50

1 ответ 1

2

Есть вариант с использованием THREE.CanvasTexture(), где этот объект использует данные из элемента canvas, на котором рисуется градиент из двух цветов, меняющих свои значения посредством использования библиотеки Tween.js.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load('https://threejs.org/examples/textures/uv_grid_opengl.jpg')
});

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 2;

var canvas = document.createElement("canvas");
canvas.width = 256;
canvas.height = 256;

var bkTexture = new THREE.CanvasTexture(canvas);
scene.background = bkTexture;

var ctx = canvas.getContext("2d");

function setGradient(c1, c2) {
  var my_gradient = ctx.createLinearGradient(0, 0, 0, 256);
  my_gradient.addColorStop(0, c1);
  my_gradient.addColorStop(1, c2);
  ctx.fillStyle = my_gradient;
  ctx.fillRect(0, 0, 256, 256);
}

var color11 = new THREE.Color();
var color12 = new THREE.Color();
var color21 = new THREE.Color();
var color22 = new THREE.Color();
var tmpColor1 = new THREE.Color();
var tmpColor2 = new THREE.Color();

function initColors() {
  color11.set("red");
  color12.set("green");
  color21.set("yellow");
  color22.set("blue");
}

initColors();

function setTween(timeStart){
  return new TWEEN.Tween({
    val: timeStart
  })
  .to({
    val: timeStart === 0 ? 1 : 0
  }, 2000)
  .onUpdate(val => {
    tmpColor1.copy(color11).lerp(color21, val.val);
    tmpColor2.copy(color12).lerp(color22, val.val);

    setGradient("#" + tmpColor1.getHexString(), "#" + tmpColor2.getHexString());
    bkTexture.needsUpdate = true;
  })
  .onComplete(val => {
    val.val = timeStart;
  });
}
var tweenBkGroundThere = setTween(0);
var tweenBkGroundBack = setTween(1);

tweenBkGroundThere.chain(tweenBkGroundBack);
tweenBkGroundBack.chain(tweenBkGroundThere);
tweenBkGroundThere.start();

var animate = function() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  TWEEN.update();

  renderer.render(scene, camera);
};

animate();
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.2.0/Tween.min.js"></script>

Другой вариант: установить прозрачный фон сцены и использовать CSS для задания анимации фона элемента body.

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setClearColor(0x000000, 0); // тут 0 - полная прозрачность фона сцены

Для справки

7
  • а возможно вместо let textureCube = new THREE.CubeTextureLoader().load(urls); scene.background = textureCube; подставить просто какие нибудь цвета? Просто тот пузырь, я так понял, в любом случае должен что нибудь отражать (ru.stackoverflow.com/questions/882780/…). Но вашим методом к сожалению этого сделать не получается(
    – Zenderg
    Commented 19 сент. 2018 в 11:48
  • @Zenderg то есть ответ - не про то, что нужно? Commented 19 сент. 2018 в 12:25
  • @Zenderg нужно чтобы была кубическая текстура с градиентом? я правда не пойму - что именно имеется в виду ) Commented 19 сент. 2018 в 13:01
  • в принципе то, только тут наверное мой косяк, потому что я неправильно вопрос сформулировал. Но все равно спасибо, направили хоть на какие-то мысли
    – Zenderg
    Commented 19 сент. 2018 в 13:04
  • просто думал может можно сделать не текстуру, а просто цвета. Подгружать картинки это же ведь тоже определенная нагрузка
    – Zenderg
    Commented 19 сент. 2018 в 13:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.