런타임에 three.js 표시 등 추가 및 제거

Question

런타임시 서로 다른 표시 유형을 추가하고 제거하는 방법은 무엇입니까?

각각 조명 유형을 나타내는 일부 체크 상자가 있는데 확인란을 선택하면 장면에 특정 조명 유형을 추가하고 선택하지 않으면 조명을 제거하고 싶습니다.

시도 : scene.remove(light) 및 light.visible = false 시도했지만 작동하지 않았습니다.

Answer 1

WebGLRenderer으로 조명 수 또는 조명 유형을 변경하면 material.needsUpdate = true을 설정해야합니다.

더 좋은 옵션은 광도를 0으로 설정하는 것입니다.

자세한 내용은 위키 문서 How to Update Things with WebGLRenderer을 참조하십시오.

three.js를 r.58

Answer 2

그것은 다음과 같이 나와 함께 일한 :

render(){ 
    // some other code .... 


    //light 
    if($('#dLight').is(':checked')){ 
     dLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')).normalize(); 
     dLight.intensity = $('#light-intensity-id').slider('value'); 
     dLight.color.setHex('0x' + $('#light-color').val()); 
      scene.add(dLight); 
     }else{ 
      scene.remove(dLight); 
     } 

     if($('#pLight').is(':checked')){ 
      pLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')); 
      pLight.intensity = $('#light-intensity-id').slider('value'); 
      pLight.color.setHex('0x' + $('#light-color').val()); 
      scene.add(pLight); 
     }else{ 
      scene.remove(pLight); 
     } 

     if($('#sLight').is(':checked')){ 
      sLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')); 
      sLight.intensity = $('#light-intensity-id').slider('value'); 
      sLight.color.setHex('0x' + $('#light-color').val()); 
      scene.add(sLight); 
     }else{ 
      scene.remove(sLight); 
     } 

     if($('#aLight').is(':checked')){ 
      aLight.position.set($('#light-x').slider('value'),$('#light-y').slider('value'),$('#light-z').slider('value')); 
      aLight.color.setHex('0x' + $('#light-color').val()); 
      scene.add(aLight); 
     }else{ 
      scene.remove(aLight); 
     } 
    } 

Answer 3

숨길/표시 등 사용 : = false를 light.visible; // 또는 true

및 모든 자료가 필요하면 needsUpdate를 설정하십시오.

material.needsUpdate = true;

속성이 재료 객체 인 모든 객체가 하나의 객체 안에 있습니다.

for (var material in materials) { 
     if (materials.hasOwnProperty(material)) { 
      materials[material].needsUpdate = true; 
     } 
    } 

이렇게하면 모든 업데이트를 볼 수 있습니다. needsUpdate 트릭을하기 전에 대부분의 경우 아무것도 볼 수 없습니다.