0
Three.js의 r59가있는 캔버스 렌더러를 사용하여 큐브를 만들었습니다. 큐브는 다른면에 다른 질감이 있습니다. 이 렌더링 괜찮아요. 이 큐브의 위치와 회전을 TWEEN 할 수도 있으므로 괜찮습니다.Three.js : r59를 사용하여 런타임에 큐브 텍스처를 업데이트하지 마십시오.
내가 원한다 : 가) 큐브의 앞면에 이미지 텍스처가 있습니다. B) 카메라의 시점에서이 큐브를 이동합니다. C) 큐브에서 이미지 텍스처를 변경합니다. D) 큐브를 다시 원래의 좌표로 이동하여 다시 볼 수있게합니다.
지금까지 단계 A, B 및 D가 작동 중입니다. 그러나 C 단계를 구현하려고하면 작동이 멈 춥니 다. 여기 는
... 내 프로젝트에서<body>
<script src="build/three.min.js"></script>
<script src="js/libs/tween.min.js"></script>
<script>
var container;
var camera, scene, renderer, group, particle;
var cubeMesh;
var MatCollection = [];
var Materials = [];
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 3000);
camera.position.z = 1000;
scene = new THREE.Scene();
var cubeGeometry = new THREE.CubeGeometry(800, 600, 30, 8, 8, 8);
cubeGeometry.dynamic = true;
// creating three textures
var neheTextureSMALL = new THREE.ImageUtils.loadTexture("test3.jpg");
var neheTextureBIG1 = new THREE.ImageUtils.loadTexture("break01.jpg");
var neheTextureBIG2 = new THREE.ImageUtils.loadTexture("break02.jpg");
// putting two different sets of Materials to a material collection array
Materials = [
new THREE.MeshBasicMaterial({
map:neheTextureBIG1,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureBIG1,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureBIG1,
side: THREE.DoubleSide
})
];
MatCollection.push(Materials);
Materials = [
new THREE.MeshBasicMaterial({
map:neheTextureBIG2,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureSMALL,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureBIG2,
side: THREE.DoubleSide
}),
new THREE.MeshBasicMaterial({
map:neheTextureBIG2,
side: THREE.DoubleSide
})
];
MatCollection.push(Materials);
cubeMesh = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial(MatCollection[0]));
cubeMesh.dynamic = true;
cubeMesh.position.set(0, 0, 500);
// Applying the first set of materials on cubeMesh creation works good
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(0x000000, 1);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
TWEEN.update();
camera.lookAt(scene.position);
// rotate the cube - dropped value manipulation
cubeMesh.rotation.set(xRotation, yRotation, zRotation);
renderer.render(scene, camera);
}
// this is NOT WORKING
function changetexture() {
currentMat++;
if (currentMat >= MatCollection.length) {
currentMat = 0;
}
cubeMesh.material = MatCollection[currentMat];
cubeMesh.material.needsUpdate = true;
}
</script>
</body>
줄을 떠나 ...
cubeMesh.material = MatCollection[currentMat];
은 모든 것이 잘 작동합니다. 입방체가 밖으로 나와서 항상 같은 질감을 보여주는보기로 되돌아옵니다.
어떻게 변경해야합니까?
전문 지식을 공유해 주셔서 감사합니다.
올리버