时间戳

首页 > 解决方案 > (Three.JS) 如何循环 lerp 场景背景颜色？

javascript - (Three.JS) 如何循环 lerp 场景背景颜色？

问题描述

正如标题所说，我正在尝试在多种颜色之间平滑过渡。（白天、日出/日落和夜晚），并将这些颜色作为场景的背景，本质上，我正在尝试制作日/夜循环。这可能吗？如果是这样，怎么做？我也想知道，是否可以将 GUI 添加到 Three.JS 中？顺便说一下，我说的是Three.JS Editor。谢谢！这是测试代码，以及到目前为止我尝试过的所有内容。显然，这些都没有奏效。

var day = new THREE.Color(0xB8F4FF);
var duskdawn = new THREE.Color(0xFF571F);
var night = new THREE.Color(0x17012D);

//scene.background = new THREE.Color(0xB8F4FF);



/*
//cycleloop();
function cycleloop(){
    var day = new THREE.Color(0xB8F4FF);
    var duskdawn = new THREE.Color(0xFF571F);
    var night = new THREE.Color(0x17012D);
    var clock = new THREE.Clock();
    clock.start();
    var speed = 10;
    var delta = 0;
    delta = clock.getDelta();
    var col = new THREE.MathUtils.lerp(day, duskdawn, 0.1);
    //scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, delta));
    scene.background = new THREE.Color(new THREE.MathUtils.lerp(day, duskdawn, delta));
    requestAnimationFrame(cycleloop);
    //renderer.render(scene, camera);
}

cycleloop();
*/
function cycletime() {
  var time;
  //scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, time));
  scene.background = new THREE.Color(new THREE.MathUtils.lerp(day, duskdawn, time));
}
for (i = 0; i < 100; i++) {
  cycletime();
}

/*
let then = 0;
function animate(now) {
  now *= 0.001;  // make it seconds

  const delta = now - then;
  then = now;

  object.position.z += delta * speedInUnitsPerSecond;

  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
*/

//vartween = new TWEEN.Tween(day).to(duskdawn, 5000).start();

//scene.background.setColor(new THREE.MathUtils.lerp(day, duskdawn, 0.1));
//scene.background.setColor(tween);

如果有人需要更多信息，请告诉我！谢谢！

标签： javascriptloopscolorsthree.jslerp

解决方案

您没有正确执行线性插值。请改用以下代码尝试：

let camera, scene, renderer;

let t = 0;

const day = new THREE.Color(0xB8F4FF);
const duskdawn = new THREE.Color(0xFF571F);

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 1;

  scene = new THREE.Scene();
  scene.background = new THREE.Color();

  const geometry = new THREE.BoxBufferGeometry(0.2, 0.2, 0.2);
  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  t += 0.01;

  scene.background.copy(day).lerp(duskdawn, 0.5 * (Math.sin(t) + 1));

  renderer.render(scene, camera);

}
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.123/build/three.js"></script>

推荐阅读