![]() This was done because of the information in the next two links:įor what it's worth I could not solve the same problem using the methods above but found that having: scene = new THREE.Scene() In your code I've set sortObjects to false and then changed the order that the spheres were added to the scene. Var sphere1 = new THREE.Mesh(geometry1, material1) Var material2 = new THREE.MeshLambertMaterial() Var geometry2 = new THREE.SphereGeometry(0.8,32,24) tSize(window.innerWidth, window.innerHeight) ĭ(renderer.domElement) Var renderer = new THREE.WebGLRenderer() Var light = new THREE.DirectionalLight( 0xffffff ) Var ambient = new THREE.AmbientLight( 0x555555 ) Var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000) Ĭamera.lookAt(new THREE.Vector3(0, 0, 0)) ![]() ![]() Is there a way to make both spheres transparent? var scene = new THREE.Scene() Changing sphere 2's radius to 1.2 will then hide sphere 1. If I define sphere 1 before sphere 2 then sphere 1 becomes transparent, but sphere 2 is no longer transparent. In its current state only sphere 1 is visible and it is not transparent. I include a minimal program below that shows what is going on (without the animation). The order of adding them to the scene plays no role. If I first define sphere 2 then this is the transparent one. If I first define sphere 1 then it becomes transparent, but then sphere 2 is completely opaque. I define in my program but not the second one. ![]() The problem now is that Three.js makes the first sphere transparent. Of course the roles of "smaller" and "larger" change as the radius of sphere 2 varies. Each sphere is transparent (opacity: 0.5) so that it would be possible to see the smaller sphere contained in the larger one. The radius of sphere 2 is supposed to oscillate between 0.5 and 1.5 while the radius of sphere1 is always 1.0. I am trying to write a small program in Three.js that displays two spheres, one inside the other. ![]()
0 Comments
Leave a Reply. |