Three.js で、2 つの球体を表示する小さなプログラムを作成しようとしています。sphere1 の半径は常に 1.0 ですが、sphere2 の半径は 0.5 から 1.5 の間で振動するはずです。各球体は透明 (不透明度: 0.5) であるため、大きな球体に含まれる小さな球体を見ることができます。もちろん、sphere2 の半径が変わると、「小さい」と「大きい」の役割も変わります。
ここでの問題は、Three.js が、プログラムで定義した最初の球体を透明にしますが、2 番目の球体を透明にしないことです。最初に sphere1 を定義すると透明になりますが、sphere2 は完全に不透明になります。最初に sphere2 を定義すると、これが透明になります。それらをシーンに追加する順序は重要ではありません。
何が起こっているかを示す最小限のプログラムを以下に含めます (アニメーションなし)。現在の状態では、sphere1 のみが表示され、透明ではありません。sphere2 の前に sphere1 を定義すると、sphere1 は透明になりますが、sphere2 は透明ではなくなります。sphere2 の半径を 1.2 に変更すると、sphere1 が非表示になります。
両方の球体を透明にする方法はありますか?
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 3);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
var ambient = new THREE.AmbientLight( 0x555555 );
scene.add(ambient);
var light = new THREE.DirectionalLight( 0xffffff );
light.position = camera.position;
scene.add(light);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Definition 2
var geometry2 = new THREE.SphereGeometry(0.8,32,24);
var material2 = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0.5});
var sphere2 = new THREE.Mesh(geometry2, material2);
// Definition 1
var geometry1 = new THREE.SphereGeometry(1.0,32,24);
var material1 = new THREE.MeshLambertMaterial({color: 0x00ff00, transparent: true, opacity: 0.5});
var sphere1 = new THREE.Mesh(geometry1, material1);
scene.add(sphere1);
scene.add(sphere2);
renderer.render(scene, camera);