在加载的JSON模型上以三个js动画颜色
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在加载的JSON模型上以三个js动画颜色相关的知识,希望对你有一定的参考价值。
有没有办法,在三个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动画颜色的主要内容,如果未能解决你的问题,请参考以下文章