1

我正在尝试使用 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;
4

1 回答 1

2

看起来你在混淆你的动画模块（命名约定可能会与这么多相似的名称混淆）。您安装了@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)
于 2019-10-04T02:45:03.857 回答