我试图在Three.js中编写一个小程序,显示两个球体,一个在另一个内部.球2的半径应该在0.5和1.5之间振荡,而球1的半径总是1.0.每个球体都是透明的(不透明度:0.5),因此可以看到较大球体中包含的较小球体.当然,随着球体2的半径变化,"较小"和"较大"的作用会发生变化.
现在的问题是Three.js使我在程序中定义的第一个球体透明,而不是第二个球体.如果我定义第一个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 …Run Code Online (Sandbox Code Playgroud) 我使用webgl渲染器创建了一个场景,我放置了多个可以选择和移动的3D对象.但是当选择一个对象时,我想绘制它的轴.将线条绘制到对象的中心没有问题,但我希望它们出现在场景中的任何其他内容之前,即使其他对象在前面也可以看到它们 - 就像在Blender中一样.
我尝试使用renderDepth参数,但我不认为我理解如何使用它,我没有得到任何结果.
谢谢您的帮助.
我正在使用Three.js WebGL场景,在缩小时注意到60 FPS,以便可以看到所有观测值(约20,000个三角形),但是在放大时,FPS却很低,因此只有一小部分三角形的子集在视图中。
我想找出造成这种差异的原因。我的直觉是相反的说法是正确的:我假设当用户在近,远剪切平面中缩放时,会从场景中删除许多三角形,这会增加FPS。我想弄清楚为什么在这种情况下这种直觉是错误的。
如何识别在three.js程序中使用的完整调用堆栈?理想情况下,我想确定所有函数/方法调用以及执行该函数所需的时间,以便我可以找出用户正在放大的着色器的哪一部分正在杀死FPS。