Difference between revisions of "Threejs"

From Wasya Wiki
Jump to: navigation, search
 
(4 intermediate revisions by the same user not shown)
Line 15: Line 15:
 
== Picking ==
 
== Picking ==
 
* https://sbcode.net/threejs/mousepick/
 
* https://sbcode.net/threejs/mousepick/
 +
 +
== destroy scene ==
 +
<pre>
 +
    cancelAnimationFrame(this.id);// Stop the animation
 +
    this.renderer.domElement.addEventListener('dblclick', null, false); //remove listener to render
 +
    this.scene = null;
 +
    this.projector = null;
 +
    this.camera = null;
 +
    this.controls = null;
 +
    empty(this.modelContainer);
 +
</pre>
 +
 +
<pre>
 +
  function removeObject3D(object3D) {
 +
    if (!(object3D instanceof THREE.Object3D)) return false;
 +
 +
    // for better memory management and performance
 +
    if (object3D.geometry) object3D.geometry.dispose();
 +
 +
    if (object3D.material) {
 +
        if (object3D.material instanceof Array) {
 +
            // for better memory management and performance
 +
            object3D.material.forEach(material => material.dispose());
 +
        } else {
 +
            // for better memory management and performance
 +
            object3D.material.dispose();
 +
        }
 +
    }
 +
    object3D.removeFromParent(); // the parent might be the scene or another Object3D, but it is sure to be removed this way
 +
    return true;
 +
  }
 +
</pre>
 +
 +
<pre>
 +
function clearThree(obj){
 +
  while(obj.children.length > 0){
 +
    clearThree(obj.children[0]);
 +
    obj.remove(obj.children[0]);
 +
  }
 +
  if(obj.geometry) obj.geometry.dispose();
 +
 +
  if(obj.material){
 +
    //in case of map, bumpMap, normalMap, envMap ...
 +
    Object.keys(obj.material).forEach(prop => {
 +
      if(!obj.material[prop])
 +
        return;
 +
      if(obj.material[prop] !== null && typeof obj.material[prop].dispose === 'function')                                 
 +
        obj.material[prop].dispose();                                                     
 +
    })
 +
    obj.material.dispose();
 +
  }
 +
 +
 +
clearThree(scene);
 +
</pre>
 +
 +
 +
= Recipes =
 +
== octree helper, sparse octree ==
 +
* https://www.npmjs.com/package/octree-helper

Latest revision as of 10:56, 20 October 2022

Develop

Perspective Camera

    /**
     * PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
     *
     * fov — Camera frustum vertical field of view.
     * aspect — Camera frustum aspect ratio.
     * near — Camera frustum near plane.
     * far — Camera frustum far plane.
    */

Picking

destroy scene

    cancelAnimationFrame(this.id);// Stop the animation
    this.renderer.domElement.addEventListener('dblclick', null, false); //remove listener to render
    this.scene = null;
    this.projector = null;
    this.camera = null;
    this.controls = null;
    empty(this.modelContainer);
  function removeObject3D(object3D) {
    if (!(object3D instanceof THREE.Object3D)) return false;

    // for better memory management and performance
    if (object3D.geometry) object3D.geometry.dispose();

    if (object3D.material) {
        if (object3D.material instanceof Array) {
            // for better memory management and performance
            object3D.material.forEach(material => material.dispose());
        } else {
            // for better memory management and performance
            object3D.material.dispose();
        }
    }
    object3D.removeFromParent(); // the parent might be the scene or another Object3D, but it is sure to be removed this way
    return true;
  }
function clearThree(obj){
  while(obj.children.length > 0){ 
    clearThree(obj.children[0]);
    obj.remove(obj.children[0]);
  }
  if(obj.geometry) obj.geometry.dispose();

  if(obj.material){ 
    //in case of map, bumpMap, normalMap, envMap ...
    Object.keys(obj.material).forEach(prop => {
      if(!obj.material[prop])
        return;
      if(obj.material[prop] !== null && typeof obj.material[prop].dispose === 'function')                                  
        obj.material[prop].dispose();                                                      
    })
    obj.material.dispose();
  }
}   

clearThree(scene);


Recipes

octree helper, sparse octree