在加载的JSON模型上以三个js动画颜色

Posted 2021-05-02

有没有办法，在三个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改变model.material.color.setRGB(1,1,1);的颜色但是有什么方法可以动画吗？

答案

我与GSAP合作的不是那么多。我更喜欢使用Tween.js，这是在Three.js的分配中，它是一个小型库;）

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

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 controls = new THREE.OrbitControls(camera, renderer.domElement);

var colorStart = new THREE.Color("red");
var colorEnd = new THREE.Color("blue");

var box = new THREE.Mesh(new THREE.PlaneGeometry(5, 5, 10, 10), new THREE.MeshBasicMaterial({
  wireframe: true
}));
box.material.color.copy(colorStart);
scene.add(box);

var tween = new TWEEN.Tween(box.material.color).to(colorEnd, 2000).easing(TWEEN.Easing.Bounce.Out);
tween.start();


render();

function render() {
  requestAnimationFrame(render);
  TWEEN.update();
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>

另一答案

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

从其中一个official examples -

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() );

使用像tweenjs这样的另一个动画库也很常见，根据你的需要，它可以更容易使用。

three.js r90

以上是关于在加载的JSON模型上以三个js动画颜色的主要内容，如果未能解决你的问题，请参考以下文章

使用三个 JS 和 React JS 加载 GLTF 模型

使用三个 js 无法正常运行 FBX 动画

带有骨骼动画（搅拌机导出）的模型在三个.js 中动画不正确

如何正确加载three.js中的json模型？

三个 js - 你可以克隆从 collada 文件加载的动画吗？

我如何在iOS上以编程方式为图像着色？