jquery加载函数问题

我正在尝试使用jquery加载函数将按下按钮时转换为.DAE文件的3D模型加载到目标div中。 但是，当按下按钮时，屏幕上会出现与文件相关的数字，而不是模型…

这是问题的屏幕截图

如果不可能这样做，我还想知道是否可以使用jquery加载function简单地替换单击按钮时页面中心显示的模型，如屏幕截图所示？

任何帮助都是非常有吸引力的。 我的代码可以在下面看到。

     $(document).ready(function() { $('#LBC').click(function() { $('#target').load('bloodexternalcontent.DAE'); }); });           var controls = new THREE.OrbitControls( camera ); controls.addEventListener( 'change', render );   var width = window.innerWidth; var height = window.innerHeight; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.01, 500 ); camera.position.z = 0.16; camera.position.x = 0; camera.position.y = 0; scene.add(camera); var renderer=new THREE.WebGLRenderer(); renderer.setSize(width,height); document.body.appendChild(renderer.domElement); renderer.render(scene,camera); renderer.setClearColor("rgb(181,181,181)"); light = new THREE.DirectionalLight(0xffffff); light.position.set(1, 1, 1); scene.add(light); light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 0, 0.14); scene.add(light); var loader = new THREE.ColladaLoader(); loader.load('egg2.DAE', function (collada) { object = collada.scene; object.position.x = 0; object.position.y = 0; object.position.z = 0; object.updateMatrix(); scene.add(object); } ); document.addEventListener('keydown', function(event) { console.log("Up Arrow Pressed"); console.log(camera.position.z); if (event.keyCode == 38) { if (camera.position.z >= 0.1) { camera.position.z = camera.position.z - 0.01; } } else if (event.keyCode == 40) { console.log("Down Arrow Pressed") if (camera.position.z < 0.2) { camera.position.z = camera.position.z + 0.01; } } }, true); render = function () { requestAnimationFrame(render); object.rotation.x += 0.0; object.rotation.y += 0.0; renderer.render(scene, camera); controls.update(); }; render();  
 Load Red Blood Cell Load Egg Cell 
 
 
 
 
 
 
Visualising Microscopic Cells
 
 
 
 
 
 
 
Instructions
 
 
 
 
 
 
Zoom In: Up Arrow 
Zoom Out: Down Arrow
 
 
 
   

Answer 1

您可以通过将.dae数据加载到可配置的THREE.ColladaLoader()对象中来替换页面中心显示的模型，这与在原始代码中使用loader.load方式非常相似。

在下面的示例中，单击事件绑定到两个按钮。 这些触发了一个删除当前模型的函数。 然后加载相关的.dae文件，并将所需的模型添加到场景中。 （请注意，我在标记中保留了HTML问题，例如未关闭的div。）

              
 Load Red Blood Cell Load Egg Cell 
 
 
 
 
 
 
Visualising Microscopic Cells
 
 
 
 
 
 
 
Instructions
 
 
 
 
 
 
Zoom In: Up Arrow 
Zoom Out: Down Arrow