无法呈现 jQuery $.get 请求函数中添加到场景中的三个 js 对象

Question

我是 three.js 初学者。我正在尝试使用从 JavaScript get 请求返回的位置坐标向场景中添加一个球体。

正确渲染 get 请求之前创建的球体，但未渲染在回调函数中创建并添加到场景中的球体 - 尽管如果我调试和检查场景，这两个球体都作为其子级存在。

我的代码：

var sphere = new THREE.Mesh(
  new THREE.SphereGeometry(radius),
  sphereMaterial);
sphere.position.set(-20,-20,-20);
scene.add(sphere); // this sphere shows

sphere2 = sphere.clone();
sphere2.position.set(50,50,50); // testing initializing outside 

$.get("{% /graph %}",function(data,status){
  scene.add(sphere2); // this sphere does not show
});

renderer.render(scene, camera);

我尝试在回调内外初始化第二个球体，我尝试创建新球体而不是克隆，我不确定还能尝试什么，我不知道我错过了什么。

Answer 1

jQuery get 请求是一个异步请求。在渲染调用之后才会调用回调函数。这意味着对象将被添加到场景中，但不会被绘制。

您需要在 get 处理程序中调用渲染函数。

$.get("{% /graph %}",function(data,status){
  scene.add(sphere2);
  renderer.render(scene, camera);
});

或者，如果您为动画等内容创建渲染循环，则这是不必要的。

无法呈现 jQuery $.get 请求函数中添加到场景中的三个 js 对象

Cannot render Three js objects added to the scene within a jQuery $.get request function

javascript

jquery

three.js