Füllen three.js die Szene mit dem Gitter

, Was ich bin auf der Suche nach

Anzeigen eines Rasters innerhalb eines three.js Szene, füllt die ganze Szene. In diesem Fall, die Szene ist das ganze Fenster.

Dieser raster stellt eine Oberfläche in 3D und kann verschoben werden, um mit der Maus mit THREE.TrackballControls Dieses Gitter ist direkt in die Kamera also zunächst sieht es aus wie eine Ebene (2D) Fläche, bis auf den trackball gezogen wird, um mit der Maus.

Die Breite der Rasterlinien sollte gleich der Breite des Renderers.

, Was ich Tat

Ich habe setup eine funktionierende jsFiddle für das, was ich bisher getan habe.

Ersten finde ich die Grenzen der Szene (dies alles ist in der 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();

};

Setup three.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();
},

Diese Funktionen stellen einen Vektor für jedes Bildschirm-Ecke,

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);
},

Ich einige geometrie, wird eine Linie an der Spitze des Bildschirms, und versuchen, Linien zu zeichnen, von oben beginnend und hinunter an den unteren Rand des Bildschirms.

//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);
    }
}

Das problem

Diese Methode nicht funktioniert, in der jsFiddle die erste Zeile startet den Bildschirm und die Breite der Linien nicht füllen den Bildschirm-Breite.

InformationsquelleAutor cs_brandt | 2012-06-19
Schreibe einen Kommentar