将网格放置在具有网格的Three.js场景中

Question

我尝试使用Three.js创建一个VR场景，使用交互式对象（为此目的使用Reticulum）。所以我有这个代码（基本上是一个来自Reticulum页面的例子的复制/粘贴）：

var renderer, element;

renderer = new THREE.WebGLRenderer( { antialias: true } );
element = renderer.domElement;
renderer.setPixelRatio( window.devicePixelRatio );

document.body.appendChild( element );

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.3, 10000);
var controls = new THREE.VRControls( camera );

var effect = new THREE.VREffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );

var manager = new WebVRManager( renderer, effect, {hideButton: false} );

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);

var parent = new THREE.Object3D();
scene.add( parent );

var boxCount = 10;
var boxSize = 1;
var radius = 10;
var boxGeometry = new THREE.BoxGeometry( boxSize, boxSize, boxSize );

for( var i =0; i < boxCount; i++ ) {
    var x = 0 + radius * Math.cos(2 * Math.PI * i / boxCount);
    var z = 0 + radius * Math.sin(2 * Math.PI * i / boxCount);  
    addMesh(boxGeometry, x, 0, z);
}

function addMesh(geo, x, y, z) {
    THREE.ImageUtils.crossOrigin = '';
    var img = new THREE.MeshBasicMaterial({
        map:THREE.ImageUtils.loadTexture('images/logo.png'),
        transparent: true 
    });
    img.map.needsUpdate = true;

    var icon = new THREE.Mesh(new THREE.PlaneGeometry(2, 2),img);
    icon.overdraw = true;

    icon.position.x = x;
    icon.position.y = y;
    icon.position.z = z;

    Reticulum.add( icon, {
        onGazeOver: function(){
            console.log('gaze over');
        },
        onGazeOut: function(){
            console.log('gaze out');
        },
        onGazeLong: function(){
            console.log('gaze long');
        },
        onGazeClick: function(){
            console.log('gaze click');
        }
    });

    parent.add( icon );
}

Reticulum.init(camera, {
    proximity: false,
    reticle: {
        visible: true,
        restPoint: 1000,
        color: 0xcc0000,
        innerRadius: 0.0001,
        outerRadius: 0.003,
        hover: {
            color: 0xcc0000,
            innerRadius: 0.02,
            outerRadius: 0.024,
            speed: 5,
            vibrate: 50
        }
    },
    fuse: {
        visible: true,
        duration: 2.5,
        color: 0x00fff6,
        innerRadius: 0.045,
        outerRadius: 0.06,
        vibrate: 0,
        clickCancelFuse: false
    }
});

scene.add(camera);

function animate(timestamp) {
    var delta = clock.getDelta();
    requestAnimationFrame(animate);

    var elapsed = clock.getElapsedTime()*1000;

    controls.update();
    camera.updateMatrixWorld();
    manager.render(scene, camera, timestamp);   
}
var clock = new THREE.Clock(true);
animate();

这似乎有效。但是，现在我想将另一个对象添加到场景中，成为某种地板。所以，我在scene.add(camera)之后尝试了这个：

var floorTexture = THREE.ImageUtils.loadTexture('images/wood-pattern.jpg');
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat = new THREE.Vector2(50, 50);
floorTexture.anisotropy = renderer.getMaxAnisotropy();

var floorMaterial = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0xffffff,
  shininess: 20,
  shading: THREE.FlatShading,
  map: floorTexture
});

var geometry = new THREE.PlaneBufferGeometry(1000, 1000);

var floor = new THREE.Mesh(geometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);

但是我在场景中看不到任何楼层。我想也许我应该使用一些额外的灯光，所以我在添加地板之前添加了这段代码：

var light = new THREE.PointLight(0x999999, 2, 100);
light.position.set(50, 50, 50);
scene.add(light);

var lightScene = new THREE.PointLight(0x999999, 2, 100);
lightScene.position.set(0, 5, 0);
scene.add(lightScene);

但是，没有。

我做错了什么？如何在场景中添加其他平面/物体？