有没有办法在 three.js 中更改 WebGL 渲染器的 setClearColor 时应用过渡？

Question

var glRenderer = new THREE.WebGLRenderer({抗锯齿: true, alpha:true}); glRenderer.setClearColor(0x000000);

我想应用从旧颜色到新颜色的过渡或补间 setClearColor

Answer 1

是的，有办法。例如，像这样：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var color1 = new THREE.Color("red");  // start color
var color2 = new THREE.Color("blue"); // end color

var tween = new TWEEN.Tween(color1).to(color2, 3000).onUpdate(function() {
  renderer.setClearColor(color1);
}).start();

render();

function render() {
  requestAnimationFrame(render);
  TWEEN.update(); // don't forget to add this line when you use Tween.js
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>

有没有办法在 three.js 中更改 WebGL 渲染器的 setClearColor 时应用过渡？

Is there a way to apply transition on change of the setClearColor of WebGL Renderer in three.js?

javascript

tween

three.js

tween.js