Попытка импортировать ошибку: «обновление» не экспортируется из «@ createjs / tweenjs» (импортируется как «TWEEN») - PullRequest
Новая
       35

Попытка импортировать ошибку: «обновление» не экспортируется из «@ createjs / tweenjs» (импортируется как «TWEEN»)

1 голос
/ 04 октября 2019

Я пытаюсь создать бесконечный цикл для анимации, используя tween.js, но это дает мне эту ошибку, связанную с TWEEN.update (time), я также пробовал TWEEN.default.update (), но я получаю эту Попытку ошибки импорта: «@ createjs / tweenjs» не содержит экспорт по умолчанию (импортируется как «TWEEN»). Если я удаляю TWEEN.update (time), анимация работает, но останавливается после одного оборота. Как мне заставить это работать? Есть ли другая библиотека, которая должна быть импортирована?

вот соответствующий код: 

import React, {Component} from 'react';
import * as THREE from "three";
import './App.css';
import './style.css'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import * as TWEEN from '@createjs/tweenjs' 



class App extends Component{

  componentDidMount() {
    var scene, camera, renderer;
    var controls;

    init();
    animate();

    function createPlanet(radius, distance, tilt, color, speed) {
      var orbitContainer = new THREE.Object3D();
        //orbitContainer.rotation.x = tilt;

        var orbit = new THREE.Object3D();

        var geometry = new THREE.CircleGeometry(distance, 100);
        geometry.vertices.shift();
        var line = new THREE.Line(
          geometry,
           new THREE.LineBasicMaterial({color: 'aqua'})
        );

        //ring movement
        line.rotation.x = Math.PI * 0.5;

        var planet = new THREE.Mesh(
          new THREE.SphereGeometry(radius, 32, 32),
            new THREE.MeshPhongMaterial({color: color})
        );
        // initial position
        // distance away from the center

        planet.position.set(distance, 0.0, 0.0);

        //orbit.add(line);
        orbit.add(planet);

        new TWEEN.Tween(orbit.rotation).to({y:  //'+' or '-' for rotation direction
        '+' + (Math.PI * 2)}, 4000 / speed);




        orbitContainer.add(orbit);
        scene.add(orbitContainer);

        return orbitContainer;
    }

    function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x202020);

        camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 10000.0);
        camera.position.set(20.0, 20.0, 20.0);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        renderer = new THREE.WebGLRenderer({antialias: false});

        controls = new OrbitControls(camera, renderer.domElement);

        var ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

//light emission will be the icon with a line connecting to the logo (sun) and will light up the line and icon when selected 

        var solar = new THREE.Mesh(
            new THREE.SphereGeometry(1.0, 32, 32),
            new THREE.MeshPhongMaterial({emissive: 0xff5800, emissiveIntensity: 0.5})
        );
        var pointLight = new THREE.PointLight(0xffffff, 1.0, 300.0);
        solar.add(pointLight);
        scene.add(solar);

        createPlanet(0.5, 3.2, 0.25, 'yellow', 1.0);
        createPlanet(0.6, 7.0, 0.1, 'red', 2.0);
        createPlanet(1.0, 11.0, 0.0, 'blue', 0.4);
        createPlanet(0.7, 14.2, 0.25, 'green', 0.9);
        createPlanet(0.4, 20.0, 0.0, 0, 'pink', 3.0);

        window.addEventListener('resize', onWindowResize, false);
        onWindowResize();

        document.body.appendChild(renderer.domElement);
    }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate(time) {
   TWEEN.update(time);

        controls.update();

        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }



  }
render(){

  return (

<div>




</div>



)}}

export default App;

1 Ответ

2 голосов
/ 04 октября 2019

Похоже, вы путаете ваши анимационные модули (соглашение об именах может быть очень запутанным с таким количеством похожих имен). Вы установили @createjs/tweenjs, но вы следите за документацией для чего-то другого. Если вы устанавливаете @createjs/tweenjs, вы должны следовать документации для этого конкретного модуля . Вы обнаружите, что его документы не предполагают, что вы импортируете в метод, который вы используете: import * as TWEEN from '@createjs/tweenjs', и при этом он не требует TWEEN.update(time); в каждом кадре.

Однако, @tweenjs/tween.js, предлагает в руководстве пользователя использовать его следующим образом: 

const TWEEN = require('@tweenjs/tween.js');
// Can probably be substituted with: 
import * as TWEEN from '@tweenjs/tweenjs' 


TWEEN.update(currentTime)
...