Thrimjs，Animejs，可以在卷轴上进行动画。导入GLTF文件。只有原语

Question

我正在尝试三个JJ，动画（动漫J）和滚动事件。 是一个工作codepen：

这 30我将立方体添加到场景中：

function addCube () {
    cube = new THREE.Mesh( new THREE.BoxGeometry( 50, 50, 50 ), new THREE.MeshNormalMaterial() );
    cube.position.y = 5
    cube.position.z = -100
    scene.add(cube);
}

在第37行上，我启动并设置时间表

function initTimeline() {
  timeline = anime.timeline({
    autoplay: false,
    duration: 4500,
    easing: 'easeOutSine'
  });
  timeline.add({
    targets: cube.position,
    x: 100,
    y: 25,
    z: -50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  timeline.add({
    targets: cube.position,
    x: 0,
    y: 0,
    z: 50,
    duration: 2250,
    update: camera.updateProjectionMatrix()
  })
  var value = new THREE.Color(0xFFFCFC)
  var initial = new THREE.Color(0x161216)
  timeline.add({
    targets: initial,
    r: [initial.r, value.r],
    g: [initial.g, value.g],
    b: [initial.b, value.b],
    duration: 4500,
    update: () => {
      renderer.setClearColor(initial);
    }
  }, 0);
}

，所以这是完美的，唯一的问题是它仅适用于原语（盒，圆柱，球形等） 每当我尝试通过gltfloader加载自定义的GLTF时，即使我认为我要调试问题，我也真的无法解决它。

我正在尝试加载这样的另一个模型：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();

var something;
function addSomething() {

  loader.load("./assets/something.gltf", function(gltf) {
    something = gltf.scene;
    scene.add(something);

  });
}

一切看起来都不错（如果我留在此功能中） 但是，只要我走出功能，无论我做什么，错误都会发生。 但同时又什么也没有发生”。

没有显示错误， 我尝试了不同的事情来解决这个问题，但是现在我必须“放弃”并寻求帮助，但是我非常有信心修复是一件容易的事，我现在只是脑脱水。.

如果您可以告诉我如何这可以解决，我将非常感谢。谢谢

Answer 1

我通过使用此问题解决了：

const gltf = await loader.loadAsync("./assets/mymodel.gltf")

然后

var mymodel = gltf.scene
scene.add(mymodel)

这样做，我可以在时间轴上称为“ mymodel”