有没有办法在三个.js中对WebGL渲染器的setClearColor进行更改时应用过渡

Question

var glRenderer = new THREE.WebGLRenderer({antialiasing： 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>