THREE.JS 场景中永无止境的地板 [英] Never-ending floor in THREE.JS scene

问题描述

在我的画布 Three.js 场景中创建一个在每个方向上连续的地板的最佳方法是什么?

What would be the best way to create a continuous-in-every-direction floor in my canvas three.js scene?

最好将一个 THREE.PlaneGeometry 附加到相机位置，以便它与相机一起移动.

Would it be better to attach a THREE.PlaneGeometry to the camera position, so that it travels with the camera.

或者是否有另一种使用纹理对场景地板进行纹理处理的方法.

Or is there another way of texturing the floor of the scene with a texture.

我的 PlaneGeometry 的可见性有些问题，出于某种原因，我必须与它保持一定的距离才能看到它.

I'm having some trouble with the visibility of my PlaneGeometry, for some reason I have to be a certain distance from it to see it.

/* Floor  */    
var geometry = new THREE.PlaneGeometry( 1000, 1000, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
var floor = new THREE.Mesh( geometry, material );
floor.material.side = THREE.DoubleSide;
floor.rotation.x = de2ra(90);
scene.add( floor );

对所有技术开放！

推荐答案

在我的自上而下的游戏中，我有一个无限的海底.我将它重新定位到相机的 xy 坐标(与 z 保持距离).然后我修改纹理的offset属性，这样即使地板粘在相机上，它看起来也在移动.

I have an infinite ocean floor in my top-down game. I reposition it to the camera's xy-coordinates (keeping a distance with z). I then modify the texture's offset property so that it appears the floor is moving even though it's glued to the camera.

关于我的 PlaneGeometry 的可见性问题"，您可能遇到了相机的近或远投影平面(距离) - 任何比 near 更近或比 far 更远的物体被剪裁，即剔除，即不可见.您可以在相机的构造函数中对其进行配置.

Regarding "trouble with the visibility of my PlaneGeometry", you probably hit the camera's near or far projection planes (distances) - anything closer than near or further than far is clipped, i.e. culled, i.e. invisible. You can configure it in the camera's constructor.

这篇关于THREE.JS 场景中永无止境的地板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！