DecalGeometry 버텍스, UV 업데이트,

Question

현재 ThreeJS decals으로 재생 중입니다. 나는 내 영역에 아름다운 얼룩을 남길 수있었습니다.

다음은 내 영역에 데칼을 "적용"하는 데 사용하는 코드입니다. (좀 사용자 정의 클래스를 가지고 있지만, 이것에 대해 걱정하지 마십시오.

// Create sphere 
var mainMesh = new THREE.Mesh(
    new THREE.SphereGeometry(7, 16, 16), 
    new THREE.MeshBasicMaterial({ color: 0x00a1fd }) 
); 

// Declare decal material 
var decalMaterial = new THREE.MeshPhongMaterial({ 
    color    : 0xff0000,  
    specular   : 0x444444, 
    map     : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-diffuse.png'), 
    normalMap   : TextureLoader.instance.getTexture('http://threejs.org/examples/textures/decal/decal-normal.jpg'), 
    normalScale   : new THREE.Vector2(1, 1), 
    shininess   : 30, 
    transparent   : true, 
    depthTest   : true, 
    depthWrite   : false, 
    polygonOffset  : true, 
    polygonOffsetFactor : -4, 
    wireframe   : false 
}); 

// Create decal itself 
var decal = new THREE.Mesh(
    new THREE.DecalGeometry(
     mainMesh, 
     new THREE.Vector3(0, 2.5, 3), 
     new THREE.Vector3(0, 0, 0), 
     new THREE.Vector3(8, 8, 8), 
     new THREE.Vector3(1, 1, 1) 
    ), 
    decalMaterial.clone() 
); 

// Add mesh + decal + helpers 
scene.add(
    mainMesh, 
    new THREE.HemisphereLight(0xffffff, 0, 1), 
    decal, 
    new THREE.WireframeHelper(decal, 0xffff00) 
); 

decal.add(new THREE.BoxHelper(decal, 0xffff00)); 

을 지금, 나는 내 영역에 얼룩을 이동, 따라서, 내 데칼의 형상을 업데이트 할 woud. 불행하게도

내가 decal.geometry.computeDecal()를 호출 할 때, 데칼의 메쉬가 업데이트되지 않습니다. 나는이에 대한 해결책을 찾을 수 없습니다.

function moveDecal() 
    { 
     decal.translateX(1); 
     decal.geometry.computeDecal(); 
    }; 

을 DecalGeometry 클래스에 따르면, 기능 computeDecal 이미 업데이트에 필요한 진정한 다양한 구성원으로 설정 정점, 열 ors, UVs ...

this.computeDecal = function() { 
     // [...] 
     this.verticesNeedUpdate  = true; 
     this.elementsNeedUpdate  = true; 
     this.morphTargetsNeedUpdate = true; 
     this.uvsNeedUpdate   = true; 
     this.normalsNeedUpdate  = true; 
     this.colorsNeedUpdate  = true; 
    }; 

감사합니다. : D

PS : ThreeJS r80

Answer 1

당신은 당신의 형상의 정점을 업데이트하기 위해 노력하고 있습니다.

당신은 정점 componnent의 값을 변경할 수 있습니다

,

geometry.vertices[ 0 ].x += 1; 

하지만 당신은 추가 할 수있는 새로운 veritices

geometry.vertices.push(new THREE.Vector3(x, y, z)); // not allowed 

또는 할당하는 새로운 버텍스 배열

geometry.vertices = new_array; // not allowed 

후 기하학은 최소한 한 번 렌더링되었습니다.

UV와 같은 다른 속성의 경우 Similalry.

자세한 내용은이 답변을 참조하십시오 : verticesNeedUpdate in Three.js.

three.js를 R.80