Select Form 要素からオプションを選択して、実行時にキューブ イメージを変更しようとしています。コードを実行すると、選択後に画像が変更されますが、以前の立方体と画像はシーンに残ります。
マテリアル/イメージ/テクスチャを変更するときに、シーンを適切にクリア/リフレッシュ/更新する方法。
<div id = "container"></div>
<form id = "changesForm">
Cube Image:
<br>
<select id = "cubeImage">
<option value = "random">Random</option>
<option value = "image1">First Image</option>
<option value = "Image2">Second Image</option>
</select>
<br>
</form>
<script type = "text/javascript">
window.onload = windowLoaded;
function windowLoaded(){
if (window.addEventListener){
init();
animate();
//document.getElementById('container').addEventListener('mousemove', containerMouseover, false);
window.addEventListener( 'resize', onWindowResize, false );
var cubeImage = document.getElementById('cubeImage');
cubeImage.addEventListener("change", changeCubeImage, false);
}
else if (window.attachEvent){
//init();
//animate();
//document.getElementById('container').attachEvent('onmousemove', containerMouseover);
//window.attachEvent( 'onresize', onWindowResize);
}
function changeCubeImage(e){
//e.preventDefault();
var target = e.target;
cubeImageCheck = target.value;
createCube();
}
// rest code .....
function createCube(){
//image
var cubeImg;
switch (cubeImageCheck){
case 'random': {
// should load the 2 images random - to do
cubeImg = new THREE.ImageUtils.loadTexture("img1.jpg");
break;
}
case 'image1': {
cubeImg = new THREE.ImageUtils.loadTexture("image1.jpg");
break;
}
case 'image2': {
cubeImg = new THREE.ImageUtils.loadTexture("image2.jpg");
break;
}
}
cubeImg.needsUpdate = true;
// geometry
var cubeGeometry = new THREE.CubeGeometry(200,200,200);;
// material
var cubeMaterial = new THREE.MeshPhongMaterial({
map: cubeImg,
side:THREE.DoubleSide,
transparent: true,
opacity:1,
shading: THREE.SmoothShading,
shininess: 90,
specular: 0xFFFFFF
});
cubeMaterial.map.needsUpdate = true;
//mesh
cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial);
cubeMesh.needsUpdate = true;
scene.add(cubeMesh);
}
// rest ....