主页 / 问题 / 882869
Accepted
Zenderg
Asked:2020-09-19 03:22:46 +0000 UTC2020-09-19 03:22:46 +0000 UTC

Threejs场景背景渐变

  • 772

其实问题本身。是否可以使用渐变设置场景的背景，使其随时间平滑变化（例如，从黄蓝到红绿）？

background

1 个回答

  1. Best Answer

    有一个变体 using THREE.CanvasTexture()，该对象使用来自 element 的数据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 - полная прозрачность фона сцены

    以供参考

    • 2

相关问题