清除 WebGL 畫布，Three.JS

Question

我正在使用three.js 中的WebGLRenderer，但無法清除畫布。 基本上，我有一種方法可以不斷向場景中添加另一個對象，但在添加之前清除子項。 例如

group = new THREE.Object3D();

function add(object){
    group.children = [];//clears the group children first
    group.add(object);
}

我想這會讓事情變得清楚，但我錯了。 我習慣於畫布渲染為我做這件事。 有人知道我應該如何清除 WebGL 畫布嗎？

Answer 1

清除畫布和清除場景圖的子樹是兩件事。

清除畫布可以通過renderer.clear()完成，假設您的THREE.WebGLRenderer被命名為renderer 。

清除場景圖的子樹可以通過group.remove.apply(group, group.children)或（在現代 JavaScript 中） group.remove(...group.children) 。 不建議僅僅為group.children分配一個新數組，因為這會group.children內部結構。 添加使用group.add(object) ，並使用刪除group.remove(object) 。