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