blocks|key|3823614|text|请注意，.setHSL,+.setHex,+&+.setRGB是all+methods函数。你不能把一个方法作为TweenMax的第一个参数，它必须是一个属性。你需要这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3823615|tl.to(light3.color,+1,+{r:+0.3,+g:0.7,+b:0.5},+1,);，以便时间线可以访问它。|3823616|此外，请记住，颜色.rgb重视are+in+the+[0,+1]+range，而不是[0,+255]。如果需要补间到特定的HSL值，只需使用临时颜色变量：|3823617|//+Create+temp+variable+to+extract+RGB+values
var+tempColor+=+new+THREE.Color().setHSL(1,+0.4,+0.58);
tl.to(light.color,+1,+{+r:+tempColor.r,+g:+tempColor.g,+b:+tempColor.b+});

//+Extract+RGB+values+from+tempColor+again
tempColor.setHex(0x69BE94);
tl.to(light2.color,+1,+{+r:+tempColor.r,+g:+tempColor.g,+b:+tempColor.b+});|code-block|syntax|javascript|3823618|.setHex+takes+an+integer,+not+a+string|3823619|entityMap|0|LINK|mutability|MUTABLE|url|https://threejs.org/docs/#api/en/math/Color.setHSL|1|https://threejs.org/docs/#api/en/math/Color.r|2|https://threejs.org/docs/#api/en/math/Color.setHex^0|4|R|W|B|0|0|0|1F|0|9|4|Q|6|16|8|F|N|1|0|0|0|12|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|J|3|K|5|L|7|1L|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|Q|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

<p>Notice that <code>.setHSL, .setHex, &amp; .setRGB</code> are <a href="https://threejs.org/docs/#api/en/math/Color.setHSL" rel="nofollow noreferrer">all methods</a>, AKA functions. You can't point to a method as the first argument of TweenMax, it has to be a property. You'll need to do something like this:</p>

<p><code>tl.to(light3.color, 1, {r: 0.3, g:0.7, b:0.5}, 1,);</code> So the timeline can access it. </p>

<p>Also, keep in mind that color <code>.rgb</code> values <a href="https://threejs.org/docs/#api/en/math/Color.r" rel="nofollow noreferrer">are in the <code>[0, 1]</code> range</a>, not <code>[0, 255]</code>. If you need to tween to a specific HSL value, just use a temporary color variable:</p>

<pre class="lang-js prettyprint-override"><code>// Create temp variable to extract RGB values
var tempColor = new THREE.Color().setHSL(1, 0.4, 0.58);
tl.to(light.color, 1, { r: tempColor.r, g: tempColor.g, b: tempColor.b });

// Extract RGB values from tempColor again
tempColor.setHex(0x69BE94);
tl.to(light2.color, 1, { r: tempColor.r, g: tempColor.g, b: tempColor.b });
</code></pre>

<p><a href="https://threejs.org/docs/#api/en/math/Color.setHex" rel="nofollow noreferrer">.setHex takes an integer, not a string</a></p>


blocks|key|364093|text|@Marquizzo的答案是有效的，但如果你真的想在HSL和RGB之间进行补间，那么你需要一个不同的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|364094|正如所指出的，tweenmax调整属性，这样您就可以创建一个使用getter和setter的对象，这样它就有了tweenmax要调整的属性，但最终还是设置了颜色。|364095|class+HSLHelper+{
++constructor(color)+{
++++this.color+=+color;
++++this.temp+=+{h:+0,+s:+0,+l:+0};
++}
++get+h()+{+return+this.color.getHSL(this.temp).h;+}
++set+h(h)+{
++++const+{s,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+s()+{+return+this.color.getHSL(this.temp).s;+}
++set+s(s)+{
++++const+{h,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+l()+{+return+this.color.getHSL(this.temp).l;+}
++set+l(l)+{
++++const+{h,+s}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
}|code-block|syntax|javascript|364096|现在你可以使用它了，例如。|364097|const+p+=+new+THREE.PointLight(+0x69be94,+1,+15,+2+);
const+helper+=+new+HSLHelper(p.color);

var+tl+=+new+TimelineMax();
tl.to(helper,+1,+{+h+:+1,+s+:+0.4,+l+:+0.58+});|364098|比较结果:左边的立方体使用RGB补间，右边的立方体使用HSL补间|364099|​|364100|class+HSLHelper+{
++constructor(color)+{
++++this.color+=+color;
++++this.temp+=+{h:+0,+s:+0,+l:+0};
++}
++get+h()+{+return+this.color.getHSL(this.temp).h;+}
++set+h(h)+{
++++const+{s,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+s()+{+return+this.color.getHSL(this.temp).s;+}
++set+s(s)+{
++++const+{h,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+l()+{+return+this.color.getHSL(this.temp).l;+}
++set+l(l)+{
++++const+{h,+s}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
}

function+main()+{
++const+canvas+=+document.querySelector('#c');
++const+renderer+=+new+THREE.WebGLRenderer({canvas});

++const+fov+=+75;
++const+aspect+=+2;++//+the+canvas+default
++const+near+=+0.1;
++const+far+=+5;
++const+camera+=+new+THREE.PerspectiveCamera(fov,+aspect,+near,+far);
++camera.position.z+=+2;

++const+scene+=+new+THREE.Scene();

++const+boxWidth+=+1;
++const+boxHeight+=+1;
++const+boxDepth+=+1;
++const+geometry+=+new+THREE.BoxGeometry(boxWidth,+boxHeight,+boxDepth);

++const+material1+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});
++const+material2+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});

++const+cube1+=+new+THREE.Mesh(geometry,+material1);
++scene.add(cube1);
++cube1.position.x+=+-1;
++const+cube2+=+new+THREE.Mesh(geometry,+material2);
++scene.add(cube2);
++cube2.position.x+=+1;


++const+tl1+=+new+TimelineMax();
++tl1.fromTo(material1.color,+{r:+1,+g:+0,+b:+0},+{duration:+2,+r:+0,+g:+0,+b:+1,+ease:Linear.easeNone});
++tl1.repeat(-1);
++
++const+helper2+=+new+HSLHelper(material2.color);
++const+tl2+=+new+TimelineMax();
++tl2.fromTo(helper2,+{h:+0,+s:+1,+l:+0.5},+{duration:+2,+h:+0.66,+s:+1,+l:+0.5,+ease:Linear.easeNone});
++tl2.repeat(-1);
++
++function+render()+{
++++renderer.render(scene,+camera);
++++requestAnimationFrame(render);
++}
++requestAnimationFrame(render);
}

main();|364101|<script+src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"></script>
<script+src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
<canvas+id="c"></canvas>|364102|364103|还要注意，HSL中的H(色调)是无界的0=红色，0.33+=绿色，0.66+=蓝色，1=红色，1.33+=绿色，1.66+=蓝色，依此类推。例如，如果我将h设置为在5秒内从0到10，它将在5秒内遍历所有颜色10次|364104|364105|class+HSLHelper+{
++constructor(color)+{
++++this.color+=+color;
++++this.temp+=+{h:+0,+s:+0,+l:+0};
++}
++get+h()+{+return+this.color.getHSL(this.temp).h;+}
++set+h(h)+{
++++const+{s,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+s()+{+return+this.color.getHSL(this.temp).s;+}
++set+s(s)+{
++++const+{h,+l}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
++get+l()+{+return+this.color.getHSL(this.temp).l;+}
++set+l(l)+{
++++const+{h,+s}+=+this.color.getHSL(this.temp);
++++this.color.setHSL(h,+s,+l);
++}
}

function+main()+{
++const+canvas+=+document.querySelector('#c');
++const+renderer+=+new+THREE.WebGLRenderer({canvas});

++const+fov+=+75;
++const+aspect+=+2;++//+the+canvas+default
++const+near+=+0.1;
++const+far+=+5;
++const+camera+=+new+THREE.PerspectiveCamera(fov,+aspect,+near,+far);
++camera.position.z+=+2;

++const+scene+=+new+THREE.Scene();

++const+boxWidth+=+1;
++const+boxHeight+=+1;
++const+boxDepth+=+1;
++const+geometry+=+new+THREE.BoxGeometry(boxWidth,+boxHeight,+boxDepth);

++const+material1+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});
++const+material2+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});

++const+cube1+=+new+THREE.Mesh(geometry,+material1);
++scene.add(cube1);
++cube1.position.x+=+-1;
++const+cube2+=+new+THREE.Mesh(geometry,+material2);
++scene.add(cube2);
++cube2.position.x+=+1;


++const+helper1+=+new+HSLHelper(material1.color);
++const+tl1+=+new+TimelineMax();
++tl1.fromTo(helper1,+{h:+0,+s:+1,+l:+0.5},+{duration:+5,+h:+1,+s:+1,+l:+0.5,+ease:Linear.easeNone});
++tl1.repeat(-1);
++
++const+helper2+=+new+HSLHelper(material2.color);
++const+tl2+=+new+TimelineMax();
++tl2.fromTo(helper2,+{h:+0,+s:+1,+l:+0.5},+{duration:+5,+h:+10,+s:+1,+l:+0.5,+ease:Linear.easeNone});
++tl2.repeat(-1);
++
++function+render()+{
++++renderer.render(scene,+camera);
++++requestAnimationFrame(render);
++}
++requestAnimationFrame(render);
}

main();|364106|<script+src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"></script>
<script+src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
<canvas+id="c"></canvas>|364107|364108|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|18|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|F|7|1D|8|@]|9|@]|A|$G|H]]|$1|U|3|P|5|6|7|1E|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1F|8|@]|9|@]|A|$]]|$1|X|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|12|3|P|5|6|7|1J|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|14|$]]

<p>@Marquizzo's answer works but if you actually want to tween HSL and not RGB then you need a different solution.</p>

<p>As pointed out tweenmax adjust properties so you can make an object that uses getters and setters so it has properties for tweenmax to adjust but ends up setting the color.</p>

<pre><code>class HSLHelper {
  constructor(color) {
    this.color = color;
    this.temp = {h: 0, s: 0, l: 0};
  }
  get h() { return this.color.getHSL(this.temp).h; }
  set h(h) {
    const {s, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get s() { return this.color.getHSL(this.temp).s; }
  set s(s) {
    const {h, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get l() { return this.color.getHSL(this.temp).l; }
  set l(l) {
    const {h, s} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
}
</code></pre>

<p>And now you can use it, example. </p>

<pre><code>const p = new THREE.PointLight( 0x69be94, 1, 15, 2 );
const helper = new HSLHelper(p.color);

var tl = new TimelineMax();
tl.to(helper, 1, { h : 1, s : 0.4, l : 0.58 });
</code></pre>

<p>Compare the results: the cube on the left is using RGB tweening, the cube on the right is using HSL tweening</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class HSLHelper {
  constructor(color) {
    this.color = color;
    this.temp = {h: 0, s: 0, l: 0};
  }
  get h() { return this.color.getHSL(this.temp).h; }
  set h(h) {
    const {s, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get s() { return this.color.getHSL(this.temp).s; }
  set s(s) {
    const {h, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get l() { return this.color.getHSL(this.temp).l; }
  set l(l) {
    const {h, s} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
}

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const material1 = new THREE.MeshBasicMaterial({color: 0xFF0000});
  const material2 = new THREE.MeshBasicMaterial({color: 0xFF0000});

  const cube1 = new THREE.Mesh(geometry, material1);
  scene.add(cube1);
  cube1.position.x = -1;
  const cube2 = new THREE.Mesh(geometry, material2);
  scene.add(cube2);
  cube2.position.x = 1;


  const tl1 = new TimelineMax();
  tl1.fromTo(material1.color, {r: 1, g: 0, b: 0}, {duration: 2, r: 0, g: 0, b: 1, ease:Linear.easeNone});
  tl1.repeat(-1);
  
  const helper2 = new HSLHelper(material2.color);
  const tl2 = new TimelineMax();
  tl2.fromTo(helper2, {h: 0, s: 1, l: 0.5}, {duration: 2, h: 0.66, s: 1, l: 0.5, ease:Linear.easeNone});
  tl2.repeat(-1);
  
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"&gt;&lt;/script&gt;
&lt;canvas id="c"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>

<p>Also note that the H (hue) in HSL is unbounded 0 = red, 0.33 = green, 0.66 = blue, 1 = red, 1.33 = green, 1.66 = blue, etc.. So for example if I set h to go from 0 to 10 over 5 seconds it will go through all the colors 10 times over 5 seconds</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class HSLHelper {
  constructor(color) {
    this.color = color;
    this.temp = {h: 0, s: 0, l: 0};
  }
  get h() { return this.color.getHSL(this.temp).h; }
  set h(h) {
    const {s, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get s() { return this.color.getHSL(this.temp).s; }
  set s(s) {
    const {h, l} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
  get l() { return this.color.getHSL(this.temp).l; }
  set l(l) {
    const {h, s} = this.color.getHSL(this.temp);
    this.color.setHSL(h, s, l);
  }
}

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const material1 = new THREE.MeshBasicMaterial({color: 0xFF0000});
  const material2 = new THREE.MeshBasicMaterial({color: 0xFF0000});

  const cube1 = new THREE.Mesh(geometry, material1);
  scene.add(cube1);
  cube1.position.x = -1;
  const cube2 = new THREE.Mesh(geometry, material2);
  scene.add(cube2);
  cube2.position.x = 1;


  const helper1 = new HSLHelper(material1.color);
  const tl1 = new TimelineMax();
  tl1.fromTo(helper1, {h: 0, s: 1, l: 0.5}, {duration: 5, h: 1, s: 1, l: 0.5, ease:Linear.easeNone});
  tl1.repeat(-1);
  
  const helper2 = new HSLHelper(material2.color);
  const tl2 = new TimelineMax();
  tl2.fromTo(helper2, {h: 0, s: 1, l: 0.5}, {duration: 5, h: 10, s: 1, l: 0.5, ease:Linear.easeNone});
  tl2.repeat(-1);
  
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"&gt;&lt;/script&gt;
&lt;canvas id="c"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


blocks|key|3683542|text|虽然Marquizzo和gman都在正确的方向上，但在GSAP中实际上更简单！您可以将.color动画化为您设置的值(使用新的THREE.Color对象是最简单的)。例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3683543|//+The+new+colors+in+whatever+format+you+want
const+newColor1+=+new+THREE.Color("hsl(120,+100%25,+50%25)");
const+newColor2+=+new+THREE.Color("blue");

const+tl1+=+gsap.timeline({repeat:+-1});
tl1.to(material1.color,+{duration:+5,+r:+newColor1.r,+g:+newColor1.g,+b:+newColor1.b,+ease:"none"});

const+tl2+=+gsap.timeline({repeat:+-1});
tl2.to(material2.color,+{duration:+5,+r:+newColor2.r,+g:+newColor2.g,+b:+newColor2.b,+ease:"none"});|code-block|syntax|javascript|3683544|​|3683545|function+main()+{
++const+canvas+=+document.querySelector('#c');
++const+renderer+=+new+THREE.WebGLRenderer({canvas});

++const+fov+=+75;
++const+aspect+=+2;++//+the+canvas+default
++const+near+=+0.1;
++const+far+=+5;
++const+camera+=+new+THREE.PerspectiveCamera(fov,+aspect,+near,+far);
++camera.position.z+=+2;

++const+scene+=+new+THREE.Scene();

++const+boxWidth+=+1;
++const+boxHeight+=+1;
++const+boxDepth+=+1;
++const+geometry+=+new+THREE.BoxGeometry(boxWidth,+boxHeight,+boxDepth);

++const+material1+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});
++const+material2+=+new+THREE.MeshBasicMaterial({color:+0xFF0000});

++const+cube1+=+new+THREE.Mesh(geometry,+material1);
++scene.add(cube1);
++cube1.position.x+=+-1;
++const+cube2+=+new+THREE.Mesh(geometry,+material2);
++scene.add(cube2);
++cube2.position.x+=+1;


++//+The+new+colors+in+whatever+format+you+want
++const+newColor1+=+new+THREE.Color("hsl(120,+100%25,+50%25)");
++const+newColor2+=+new+THREE.Color("blue");

++const+tl1+=+gsap.timeline({repeat:+-1});
++tl1.to(material1.color,+{duration:+5,+r:+newColor1.r,+g:+newColor1.g,+b:+newColor1.b,+ease:"none"});
++
++const+tl2+=+gsap.timeline({repeat:+-1});
++tl2.to(material2.color,+{duration:+5,+r:+newColor2.r,+g:+newColor2.g,+b:+newColor2.b,+ease:"none"});
++
++function+render()+{
++++renderer.render(scene,+camera);
++++requestAnimationFrame(render);
++}
++requestAnimationFrame(render);
}

main();|3683546|<script+src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"></script>
<script+src="https://cdn.jsdelivr.net/npm/gsap@3.2.1/dist/gsap.min.js"></script>
<canvas+id="c"></canvas>|3683547|3683548|entityMap^0|17|6|1R|B|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|Q|3|L|5|6|7|12|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|S|$]]

<p>While both Marquizzo and gman are in the right direction, it's actually even more simple in GSAP! You can just animate the <code>.color</code> to values that you set (it's easiest to use a new <code>THREE.Color</code> object). For example:</p>

<pre><code>// The new colors in whatever format you want
const newColor1 = new THREE.Color("hsl(120, 100%, 50%)");
const newColor2 = new THREE.Color("blue");

const tl1 = gsap.timeline({repeat: -1});
tl1.to(material1.color, {duration: 5, r: newColor1.r, g: newColor1.g, b: newColor1.b, ease:"none"});

const tl2 = gsap.timeline({repeat: -1});
tl2.to(material2.color, {duration: 5, r: newColor2.r, g: newColor2.g, b: newColor2.b, ease:"none"});
</code></pre>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  const material1 = new THREE.MeshBasicMaterial({color: 0xFF0000});
  const material2 = new THREE.MeshBasicMaterial({color: 0xFF0000});

  const cube1 = new THREE.Mesh(geometry, material1);
  scene.add(cube1);
  cube1.position.x = -1;
  const cube2 = new THREE.Mesh(geometry, material2);
  scene.add(cube2);
  cube2.position.x = 1;


  // The new colors in whatever format you want
  const newColor1 = new THREE.Color("hsl(120, 100%, 50%)");
  const newColor2 = new THREE.Color("blue");

  const tl1 = gsap.timeline({repeat: -1});
  tl1.to(material1.color, {duration: 5, r: newColor1.r, g: newColor1.g, b: newColor1.b, ease:"none"});
  
  const tl2 = gsap.timeline({repeat: -1});
  tl2.to(material2.color, {duration: 5, r: newColor2.r, g: newColor2.g, b: newColor2.b, ease:"none"});
  
  function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://threejsfundamentals.org/threejs/resources/threejs/r113/build/three.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.jsdelivr.net/npm/gsap@3.2.1/dist/gsap.min.js"&gt;&lt;/script&gt;
&lt;canvas id="c"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>
</p>


<p>I would like to change my threeJS lights colors with a tweenmax timeline but it doesn't seems to work.
Here is kind of what I tried. Am I doing something wrong?</p>

<pre><code>
var light  = new THREE.HemisphereLight( "hsl(0,0%,87%);", 0xFFFFFF, 1);
var light2 = new THREE.PointLight( 0x69be94, 1, 15, 2 );
var light3 = new THREE.SpotLight( 0xFFFFE0, 1, 30, Math.PI/14, 1 );

...

var tl = new TimelineMax();
tl.to(light.color.setHSL, 1, { h : 1, s : 0.4, l : 0.58 });
tl.to(light2.color.setHex, 1, { hex: "#69BE94" });
tl.to(light3.color.setRGB, 1, { r: 105, g:190 ,b:148 }, 1,);
</code></pre>


Animate threeJS light color with tweenmax

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想改变我的threeJS灯的颜色与补间最大时间线，但它似乎不起作用。这是我尝试过的。我做错了什么吗？var light  = new THREE.HemisphereLight( "hsl(0,0%,87%);", 0xFFFFFF, 1);var light2 = new THREE.PointLight( 0x6...

问使用补间最大值设置threeJS灯光颜色的动画
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用补间最大值设置threeJS灯光颜色的动画EN