我正在尝试创建一个透明的圆柱体。我尝试过设置透明、不透明度等，但似乎无法使其工作。有什么办法可以做到这一点吗？我需要加载带有 Alpha 通道的虚拟纹理吗？有没有更简单的方法？
material = new THREE.MeshBasicMaterial({wireframe: true});
material.transparent = true;
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
更新：我已将代码更改为以下内容，但以这种方式使用 ShaderMaterial 似乎是错误的。但它有效...
material = new THREE.ShaderMaterial({wireframe: true, transparent: true});
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
更新：这是图像。
ttp://img692.imageshack.us/img692/6412/shadermaterial.png 使用 ShaderMaterial，您可以看到由透明圆柱体包围的矩形灰色精灵。
http://img855.imageshack.us/img855/3988/opacity00.png 使用具有不透明度 0.0 的 MeshBasicMaterial。
http://img27.imageshack.us/img27/6087/opacity05.png 使用不透明度为 0.5 的 MeshBasicMaterial。
http://img837.imageshack.us/img837/8043/opacity10.png 使用具有不透明度 1.0 的 MeshBasicMaterial。
我对尺寸有疑问:
var geometry = new THREE.PlaneGeometry(50, 50);
var plane = new THREE.Mesh(geometry, material);
plane.doubleSided = true;
plane.tile = tile;
所以问题是:PlaneGeometry的大小,而不是像素吗？当我有500x500的画布时,它到底会不到50x50？
PS>还有一个问题,当元素已经添加到场景中时如何获得元素的大小？谢谢!
一直在寻找如何在任何地方这样做,几乎没有关于three.js的文档.有谁知道如何右键单击鼠标？这就是我现在拥有的:
function onDocumentMouseDown(event)
{
mouseDown = true;
event.preventDefault();
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
document.addEventListener('mouseout', onDocumentMouseOut, false);
}
这对我正在使用它的工作非常有用,但这个事件适用于左键单击,中键单击和右键单击.如何隔离右键单击事件,以便左键单击和右键单击可以产生不同的效果？
我有一个带有地球纹理的球体.我可以绘制球体上的精确点,但需要调整纹理的位置(旋转它)以匹配坐标的放置位置.有没有办法在球体上旋转纹理？
我正在使用THREE.js和WebGL渲染在3D中制作突破性游戏.我想使用THREE.Ray检测弹跳球和底部平台之间的碰撞,这可以由你控制,但我遇到了麻烦.
我已经设法将光线从平台投射到球上(或其他方式)但是一旦我这样做,球就会卡在屏幕中间并且无法动画.
var ray = new THREE.Ray( platform.position, ball.position.subSelf( platform.position ).normalize() );
var intersects = ray.intersectObject( ball );
if ( intersects.length > 0 ) console.log(intersects[0].distance);
我试图消除subSelf和normalize(),但是,打破了检测.
这是游戏和代码可以在script.js中找到:
http://dl.dropbox.com/u/4531743/WebGL/Breakout-3D/index.html
如果您打开控制台,则可以看到如果移动面板,距离值会发生变化,这样做很好.但是球不能被动画,因为在每一帧它被设置到那个位置.
http://dl.dropbox.com/u/4531743/WebGL/Breakout-3D/index.html#disableRay
以上就是我最初的做法,只需计算球和面板的Z位置,看它是否更大并且在面板的宽度(x)坐标内,如果是,则将其反弹.
球的弹跳只是每帧都将固定量的X和Z坐标改变,如果它在任何一个方向上都走得太远,则反转这个数量以使其返回.
我一直在研究一个运行在Three.js库之上的WebGL项目.我正在渲染几个半透明网格,我注意到根据您倾斜相机的角度,一个不同的对象在顶部.
为了说明这个问题,我使用了三个半透明的立方体进行了快速演示.当您将图像旋转过去垂直于屏幕时,最小立方体的后半部分会"跳跃"并且不再可见.但是,它不应该仍然可见吗？我尝试调整一些混合方程式,但这似乎没有什么区别.
我想知道的是,这是否是WebGL/Three中的一个错误,或者我可以解决的问题.任何见解都会非常感激:)
我在尝试使用 OBJLoader 加载模型后获取模型几何的边界框时遇到了问题。到目前为止我有：
var loader = new THREE.OBJLoader();
loader.load( mURL, function ( object ) {
for ( var i = 0, l = object.children.length; i < l; i ++ ) {
geometry = object.children[0].geometry;
bBox = geometry.computeBoundingBox();
console.log("have a box of "+bBox);
}
//...rest of function
但是当我将 bBox 写入控制台时，它是未定义的。在这种情况下，几何图形不是访问的正确属性吗？
我需要将相同的场景几何体添加到多个体素(立方体等于),但每个体素具有不同的纹理.
拥有超过500个体素,我在性能方面存在严重错误.
这是我的代码:
texture = crearTextura(voxel.text,color,voxelSize);
material = new THREE.MeshBasicMaterial({ map: texture });
mesh = new THREE.Mesh(new THREE.CubeGeometry(voxelSize, voxelSize, voxelSize, 1, 1, 1,material),faceMaterial);
scene.add(mesh);