Question

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

Answer 1

看起来像您在混淆动画模块（命名约定对于这么多相似的名称可能非常混乱）。您已经安装了INSERT IGNORE INTO users (UID, SID) VALUES ('aa721910fe51', '6811112')，但是您正在阅读文档中的其他内容。如果安装@createjs/tweenjs，则应遵循文档for that specific module。您会发现其文档不建议您使用所使用的方法导入：@createjs/tweenjs，也不需要在每一帧上都使用import * as TWEEN from '@createjs/tweenjs'。

但是，@tweenjs/tween.js确实在其user guide中建议您按以下方式使用它：

TWEEN.update(time);

尝试导入错误：未从“ @ createjs / tweenjs”（导入为“ TWEEN”）导出“更新”

1 个答案: