Javascript 在三个js中为加载的JSON模型设置颜色动画

有没有一种方法可以在三个js中设置加载的JSON模型颜色的动画

正如您所看到的，我在代码中使用了

ObjectLoader（）

，它渲染了模型，但之后我想对模型的颜色设置动画

        var objectLoader = new THREE.ObjectLoader();
        var model;
        objectLoader.load("path/to/model.json", function ( obj ) {

            object.traverse( function ( child ) {
                if ( child instanceof THREE.Mesh ){

                    model = child.material.color;
                }
            });
            scene.add( obj );
        } );

---

我想使用GSAP制作动画。到目前为止，我知道我可以使用

model.material.color.setRGB（1,1,1）更改
model
的颜色但是有没有办法让它动画化
 我和GSAP合作的不多。我更喜欢使用Tween.js，它是Three.js的发行版，是一个小库；）

但我认为，颜色的概念是一样的


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var colorStart=新的三种颜色（“红色”）；
var colorEnd=新的三种颜色（“蓝色”）；
var框=新的三点网格（新的三点平面几何体（5,5,10,10），新的三点网格基本材质({
线框：正确
}));
box.material.color.copy（colorStart）；
场景。添加（框）；
var tween=新tween.tween（box.material.color）.to（colorEnd，2000）.easing（tween.easing.Bounce.Out）；
tween.start（）；
render（）；
函数render（）{
请求动画帧（渲染）；
TWEEN.update（）；
渲染器。渲染（场景、摄影机）；
}
正文{
溢出：隐藏；
保证金：0；
}
我在GSAP工作的时间不多。我更喜欢使用Tween.js，它是Three.js的发行版，是一个小库；）

但我认为，颜色的概念是一样的


var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,0,10）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var colorStart=新的三种颜色（“红色”）；
var colorEnd=新的三种颜色（“蓝色”）；
var框=新的三点网格（新的三点平面几何体（5,5,10,10），新的三点网格基本材质({
线框：正确
}));
box.material.color.copy（colorStart）；
场景。添加（框）；
var tween=新tween.tween（box.material.color）.to（colorEnd，2000）.easing（tween.easing.Bounce.Out）；
tween.start（）；
render（）；
函数render（）{
请求动画帧（渲染）；
TWEEN.update（）；
渲染器。渲染（场景、摄影机）；
}
正文{
溢出：隐藏；
保证金：0；
}
另一种方法是使用three.js动画系统。我不知道GSAP是否可行，或者GSAP是否专注于HTML属性动画？如果是这样的话，将GSAP与基于HTML的图形框架（如A-Frame）相结合可能会更幸运

从一个-

使用另一个动画库（如tweenjs）也是很常见的，根据您的需要，它可以更容易地使用

three.js r90
另一种方法是three.js动画系统。我不知道GSAP是否可行，或者GSAP是否专注于HTML属性动画？如果是这样的话，将GSAP与基于HTML的图形框架（如A-Frame）相结合可能会更幸运

从一个-

使用另一个动画库（如tweenjs）也是很常见的，根据您的需要，它可以更容易地使用

3.js r90

var colorTrack = new THREE.ColorKeyframeTrack(
  '.material.color',
  [ 0, 1, 2 ], // keyframe times
  [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], // colors: r1, g1, b1, r2, g2, b2...
  THREE.InterpolateLinear
);
var clip = new THREE.AnimationClip( 'myclip', undefined, [ colorTrack ] );
mixer = new THREE.AnimationMixer( mesh );
var clipAction = mixer.clipAction( clip );
clipAction.play();

// in render loop
mixer.update( clock.getDelta() );