javascript - 用网格填充 three.js 场景

Question

我在找什么

在 three.js 场景中显示填充整个场景的网格。在这种情况下，场景是整个窗口。

这个网格代表一个 3D 表面，可以使用 THREE.TrackballControls 用鼠标四处移动 这个网格面向相机，所以最初它看起来像一个平面 (2D) 表面，直到轨迹球被移动用鼠标四处移动。

网格线的宽度应等于渲染器的宽度。

我做了什么

我已经设置了一个工作 jsFiddle对于我到目前为止所做的。

首先我找到场景的边界(所有这些都在 jsFiddle 中)，

App = function(sceneContainerName) {
   this.sceneContainerName = sceneContainerName;

   this.SCREEN_WIDTH = window.innerWidth;
   this.SCREEN_HEIGHT = window.innerHeight;

   this.MAX_X = this.SCREEN_WIDTH / 2;
   this.MIN_X = 0 - (this.SCREEN_WIDTH / 2);
   this.MAX_Y = this.SCREEN_HEIGHT / 2;
   this.MIN_Y = 0 - (this.SCREEN_HEIGHT / 2);

   this.NUM_HORIZONTAL_LINES = 50;

   this.init();

};

设置三.js

init: function() {
   // init scene
   this.scene = new THREE.Scene();

   // init camera
   // View Angle, Aspect, Near, Far
   this.camera = new THREE.PerspectiveCamera(45, this.SCREEN_WIDTH / this.SCREEN_HEIGHT, 1, 10000);
   // set camera position
   this.camera.position.z = 1000;
   this.camera.position.y = 0;

   // add the camera to the scene
   this.scene.add(this.camera);

   this.projector = new THREE.Projector();

   // init renderer
   this.renderer = new THREE.CanvasRenderer();
   // start the renderer
   this.renderer.setSize(this.SCREEN_WIDTH, this.SCREEN_HEIGHT);

   this.drawGrid(this.NUM_HORIZONTAL_LINES);

   this.trackball = new THREE.TrackballControls(this.camera, this.renderer.domElement);
   this.trackball.staticMoving = true;

   var me = this;

   this.trackball.addEventListener('change', function() {
       me.render();
   });

   // attach the render-supplied DOM element
   var container = document.getElementById(this.sceneContainerName);
   container.appendChild(this.renderer.domElement);

   this.animate();
},

这些函数为每个屏幕 Angular 提供了一个向量，

getNWScreenVector: function() {
    return new THREE.Vector3(this.MIN_X, this.MAX_Y, 0);
},

getNEScreenVector: function() {
    return new THREE.Vector3(this.MAX_X, this.MAX_Y, 0);
},

getSWScreenVector: function() {
    return new THREE.Vector3(this.MIN_X, this.MIN_Y, 0);
},

getSEScreenVector: function() {
    return new THREE.Vector3(this.MAX_X, this.MIN_Y, 0);
},

我创建了一些几何体来表示屏幕最顶部的一条线，并尝试从屏幕顶部开始绘制线，然后向下延伸到屏幕底部。

// drawGrid will determine blocksize based on the 
// amount of horizontal gridlines to draw
drawGrid: function(numHorizontalGridLines) {

    // Determine the size of a grid block (square)
    this.gridBlockSize = this.SCREEN_HEIGHT / numHorizontalGridLines;

    var geometry = new THREE.Geometry();
    geometry.vertices.push(this.getNWScreenVector());
    geometry.vertices.push(this.getNEScreenVector());

    var material = new THREE.LineBasicMaterial({
        color: 0x000000,
        opacity: 0.2
    });

    for (var c = 0; c <= numHorizontalGridLines; c++) {
        var line = new THREE.Line(geometry, material);
        line.position.y = this.MAX_Y - (c * this.gridBlockSize);
        this.scene.add(line);
    }
}

问题

此方法不起作用，在 jsFiddle 中，第一行从屏幕开始，并且行的宽度不填满屏幕宽度。

Answer 1

从 ThreeJS r57 开始，有一个名为 GridHelper 的助手，您可以使用它轻松绘制漂亮的网格，就像任何其他几何对象一样。

GridHelper 有两个参数。第一个是网格的大小，第二个是两条线之间的步长

下面是在场景中绘制网格的代码，size = 100，step = 10

var grid = new THREE.GridHelper(100, 10);
scene.add(grid);

在您的情况下，您可以避免使用名为 drawGrid 的方法并直接将其替换为以上两行代码，或者您可以在 drawgrid 方法中添加以上两行代码。

以下链接中提供了一个实例

Grid Helper Example