런타임에 three.js 머티리얼 텍스처를 변경하면 오류가 발생합니다.

Question

머티리얼에 대한 전체 액세스 권한이 있으므로 런타임에 색상을 변경할 수 있지만지도 텍스처를 변경하려고하면 오류가 발생합니다. 이 그러나 이것은 그것이 내가 노드에서 붙여 넣기를 복사 할 수 없습니다 조금 이상한 변명 경우 (에러가 발생

var materials = mesh.material.materials; 
var texture = new THREE.Texture(myPreloadedImageObject); 
materials[index].map = texture; 
materials[index].needsUpdate = true; 
scene.render(); 

같은 상황에서, 완전히 잘 작동

var materials = mesh.material.materials; 
materials[index].color.setHex(0xb60430); 
materials[index].needsUpdate = true; 
scene.render(); 

예를 들어

-webkit 콘솔)

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

참고 내가 할 수있는 이 물질도 제거하십시오.

materials[index] = 0; 
scene.render(); 

그리고 오류가 발생하지 않습니다. GitHub의 문제 섹션에서

s9k은 내가 한

geometry.buffersNeedUpdate = true; 
geometry.uvsNeedUpdate = true; 

을 제안하고 지금은 오류가 발생하지 않지만, 그냥 아무것도하지 않습니다 ... 재료는 변경되지 않습니다. 다시 색상을 설정하려고하면 작동하지만 색상과 재질을 설정하려고하면 아무 일도 일어나지 않습니다. 나는 재료 후 렌더링 로그인하는 경우

, 그것은 참으로 텍스처로 설정지도를 가지고 않지만, 어떤 이유로 내가

어떤 아이디어를 생각 렌더링되지 않는? 이거 버그 야?

근무 링크 : http://jppresents.net/static/threetexturechange/texturechange.html

코드 :

다음

Answer 1

가 three.js를 상자 형상에 three.js를의 R68 작업 텍스처 변화, 어쩌면 이것은 당신이 당신의 코드에서 문제를 찾을 수 있습니다

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

var geometry = new THREE.BoxGeometry(3,3,3); 
var texture = THREE.ImageUtils.loadTexture("a.png"); 
var texture2 = THREE.ImageUtils.loadTexture("b.png"); 
var material = new THREE.MeshBasicMaterial({color: 0x00ff00, map:texture}); 
var cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 

camera.position.z = 5; 
var frame = 0; 

function render() { 
    frame++; 
    if (frame > 120) { 
     material.map = texture2; 
     material.needsUpdate = true; 
     console.log('texture change') 
    } 
    if (frame > 240) { 
     material.map = texture; 
     material.needsUpdate = true; 
     frame = 0; 
     console.log('texture change') 
    } 

    requestAnimationFrame(render); 
    cube.rotation.x += 0.01; 
    cube.rotation.y += 0.01; 
    renderer.render(scene, camera); 
}; 

render();