從陣列影片中選擇隨機顏色，重復，從陣列中選擇一個新的隨機顏色？

所以我正在使用 gsap 和三個 js 我的目標是制作燈光影片

我有一系列我想使用的顏色 我設定了代碼，所以這些顏色中的一種是隨機選擇的

現在我可以讓它選擇隨機顏色并重復無窮大......這就是我想要的......

現在當我使用時onCompleteAll: change，這一切都很好但它不會為顏色設定影片它只是在持續時間結束時“跳”到下一個顏色所以沒有影片它只是在時間到了時立即改變

所以我想哦，很容易修復我會使用onComplete: change，而不是現在這永遠不會觸發嗎？所以最終發生的是顏色改變和影片完美但只有陣列中的 2 種顏色因為change();函式永遠不會被觸發所以新的隨機值

Math.floor(Math.random() * std.length)

任何人都可以發現任何明顯的錯誤或知道任何修復方法嗎？

這是我的代碼：

    var std = [new THREE.Color().setHex(0x009dff),
  new THREE.Color().setHex(0x001aff),
  new THREE.Color().setHex(0x4000ff),
  new THREE.Color().setHex(0x7300ff)];

var randomIndex, randomColor, tempColor, camlight3;

randomIndex = Math.floor(Math.random() * std.length); 
     randomColor = std[randomIndex];
     tempColor = randomColor;

// Three.js camera 
    /*  camlight3 = new THREE.PointLight(tempColor, 60, 80, 0.0);
        camlight3.power = 60;
        camlight3.position.x  = 10;
        camlight3.position.y  = 25;
        camlight3.position.z -= 120;
        this._camera.add(camlight3); */


gsap.to(camlight3.color,  

{ 
     
  duration: 2,
  r: tempColor.r, g: tempColor.g, b: tempColor.b,
  onCompleteAll: change,
  yoyo: true,
  repeat: -1,
  repeatRefresh: true,
    
});

function change() {
     randomIndex = Math.floor(Math.random() * std.length); 
     randomColor = std[randomIndex];
     tempColor = randomColor;
     camlight3.color = tempColor;
     console.log(tempColor);
  }
 

謝謝你的幫助

編輯我應該提到我還有其他影片在使用 oncomplete 和 onupdate，如果這與其他影片無關，但呼叫更改或與燈光相關

uj5u.com熱心網友回復：

我使它以遞回方式呼叫補間（不確定這種方法對 GSAP 有多正確）：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls";
import {gsap} from "https://cdn.skypack.dev/[email protected]";

console.clear();

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", (event) => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;

let floor = new THREE.Mesh(
    new THREE.PlaneGeometry(10, 10).rotateX(-Math.PI * 0.5),
    new THREE.MeshStandardMaterial({ color: 0xffffff })
  );
scene.add(floor);

let colors = [0xff00ff, 0x00ffff, 0xffff00, 0xff0000, 0x00ff00, 0x0000ff];
let getColor = () => {return colors[Math.floor(Math.random() * colors.length)]};
let light = new THREE.SpotLight(getColor(), 0.5, 0, Math.PI * 0.1, 0.5);
let nextColor = new THREE.Color(getColor());
light.position.set(5, 7, 0);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let lightHelper = new THREE.SpotLightHelper(light);
scene.add(lightHelper);

(function runSequence(){
  gsap.to(light.color, {
    r: nextColor.r, 
    g: nextColor.g, 
    b: nextColor.b, 
    duration: 0.5,
    onComplete: function(){
      nextColor.set(getColor());
      runSequence();
    }
  });
})(); // random colors

let clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime();
  controls.update();
  light.position.x = Math.sin(t * 0.25) * 5;
  lightHelper.update();
  renderer.render(scene, camera);
});
</script>

標籤：javascript动画三.jsgsap吐温

上一篇：如何使用JS/jQuery.animate({影片元素從最后到第一個/反向影片的函式

下一篇：如何從HTMLElement中洗掉影片