Question

我尝试通过按钮加载BVH文件。我使用three.js BVHLoader。我可以轻松加载单个文件，但如果我想加载许多不同的文件，它将无法正常工作。以下代码是一个示例。有一个简单的解决方案吗？谢谢！

var url;
		
	BVHclip1.onclick = function url() {		
	url = "Clip000.bvh";		
	}
	BVHclip2.onclick = function url() {		
	url = "Clip002.bvh";
	}
   
var loader = new THREE.BVHLoader();
var path = "three/models/BVH/" +  url;    
//var path = "three/models/BVH/Clip000.bvh";  //< -- this is running
	loader.load( path, function( result ) {
  
//Example 2//

        BVHclip1.onclick = function url() {		
	url = "three/models/BVH/Clip000.bvh";		
	}
	BVHclip2.onclick = function url() {		
	url = "three/models/BVH/Clip002.bvh";
  }
  
var loader = new THREE.BVHLoader();
	loader.load( url, function( result ) {

<button id="BVHclip1" onclick="BVHclip1()">Animation_1</button>   
<button id="BVHclip2" onclick="BVHclip2()">Animation_2</button>

Answer 1

您提供的代码段看起来不完整（尝试运行时请参阅Uncaught SyntaxError），但我认为问题是这样的：请记住，当您写作时...

var url;
el.onclick = function () {
  url = 'hey';
}
console.log(url);

在点击发生之前，

... url实际上并未设置，此时console.log已经打印undefined。你在这里用url犯了同样的错误。

相反，请使用函数：

var loadURL = function (url) {

  var loader = new THREE.BVHLoader();
  loader.load(url, function (result) {
    // ...
  });

};

var clip1El = document.querySelector('#BVHclip1');
clip1El.addEventListener('click', function () {
  loadURL("three/models/BVH/Clip000.bvh");
});

var clip2El = document.querySelector('#BVHclip2');
clip2El.addEventListener('click', function () {
  loadURL("three/models/BVH/Clip002.bvh");
});

使用按钮搜索文件加载器的解决方案

1 个答案: