Как использовать Timelinemax / Tween для движущегося объекта? - PullRequest
Новая
       37

Как использовать Timelinemax / Tween для движущегося объекта?

0 голосов
/ 22 марта 2020

Привет Awesome Stackoverflow парни,

Я пытался переместить мой объект в три раза. js до определенной точки. Насколько я знаю, мне нужно использовать Tween. js. Но в уроке я наблюдал, как он импортировал Tween Js, но когда он использовал tween js, он использовал 'timelinemax', который, я думаю, немного не понятен? Кстати.

Мой код такой, как показано ниже. 

var scene = new THREE.Scene();





scene.background = new THREE.Color( 0xf0f0f0 )
var camera = new THREE.PerspectiveCamera(100, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.x = 40;
camera.position.y = 20;
camera.position.z = 1500;

var renderer = new THREE.WebGLRenderer();
var render = function(){
    requestAnimationFrame(render);
    renderer.render(scene,camera)
}
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here




var coord =[{"x":300,"y":10,"z":10},{"x":20,"y":30,"z":30},{"x":30,"y":0,"z":50},
            {"x":40,"y":20,"z":70},{"x":50,"y":100,"z":90},
            {"x":60,"y":30,"z":110},{"x":70,"y":150,"z":90}]


var sphr
var geom
var sphrinfo=[]

function drawsphre(){
    for (let i =0; i<coord.length; i++){

        var mat = new THREE.MeshPhongMaterial( { flatShading: true } )
        geom = new THREE.SphereGeometry( 60, 50, 50);
        sphr = new THREE.Mesh( geom, mat);
        console.log()

        sphr.position.set(coord[i].x,coord[i].y,coord[i].z)
        sphrinfo.push(sphr)

        sphr.tl = new TimelineMax()
        sphr.tl.to(sphr.position.set,.5,{x:100,y:204,z:300})


        scene.add(sphr);
        render()



    }
}
drawsphre();



function movesphr(){
for (let i=0;i<coord.length;i++){
    sphrinfo[i].z=10
}

}



function animate() {


}

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );

Я поставил

TimelineMax, но сферы не движутся вообще. Может ли кто-нибудь помочь мне решить эту проблему?

В конце концов, я пытаюсь создать группу сфер с заданными значениями c x, y, z. И заставляя все сферы упасть на плоскость, которая, я думаю, где координаты z равны нулю.

Я пытаюсь оживить это.

Заранее спасибо.

1 Ответ

3 голосов
/ 22 марта 2020

Подростки работают со свойствами, но вы пытаетесь анимировать sphr.position.set, что является функцией.
Вам нужно просто анимировать значения x, y и z на sphr.position.

Ниже приведена демонстрация, проверьте функцию animateBox. 

var camera, scene, renderer, mesh, material;
init();
renderloop();
// Start the box animating.
animateBox();

function init() {
    // Renderer.
    renderer = new THREE.WebGLRenderer();
    //renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // Add renderer to page
    document.body.appendChild(renderer.domElement);

    // Create camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 800;

    // Create scene.
    scene = new THREE.Scene();

    // Create material
    material = new THREE.MeshPhongMaterial();

    // Create cube and add to scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Create ambient light and add to scene.
    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    // Create directional light and add to scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Add listener for window resize.
    window.addEventListener('resize', onWindowResize, false);

}

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

function animateBox() {
  
  // just use tweens.
  //gsap.to(mesh.position, {x: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {y: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  //gsap.to(mesh.position, {z: Math.floor((Math.random() * 600) - 300), duration: 5, ease: "elastic"});
  
  // use a timeline (and call this function again on complete).
  // This uses GSAP V3
  var timeline = gsap.timeline({onComplete: animateBox});

  // animate mesh.position.x,
  // a random number between -300 and 300,
  // for 2 seconds.
  timeline.to(
    mesh.position,
    {x: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
  
  // animate mesh.position.y
  timeline.to(
    mesh.position,
    {y: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );

  // animate mesh.position.z
  timeline.to(
    mesh.position,
    {z: Math.floor((Math.random() * 600) - 300), duration: 2, ease: "elastic"},
    0
  );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
body {
    padding: 0;
    margin: 0;
}
canvas {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/gsap.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
...