max-mapper/voxel-engine

World won't render on localhost, but renders on voxel creator

Closed this issue · 4 comments

Sorry to post this here, but the three questions on stackoverflow about voxel.js have 0 responses, so I'm hoping I can get help here. I'm doing a really basic setup, with the texture folder there, and I can't get the world to show up. The blue screen of the game is there, but no voxels are rendered. No JS errors and the console just has THREE.WebGLRenderer 56, which from the code, is just the revision number for three.js. bundle.js seems to be bundling correctly (I tested by calling a function that didn't exist, then refreshing, which correctly threw errors). When I paste the code in voxel creator, it works just fine. But of course, I'd love to use it on my own system. WebGL seems to be working fine. Running it on mountain lion. Here is the code:

var createGame = require('voxel-engine');
var game = createGame({
    texturePath: 'textures/'
});

var container = document.body;
game.appendTo(container);

// create a player
var createPlayer = require('voxel-player')(game);
var player = createPlayer('textures/shama.png');
player.yaw.position.set(0, 100, 0);
player.possess();

Super basic. Here is my package.json. Is there some dependency I'm missing?

{
  "name": "voxel-test",
  "version": "0.0.0",
  "description": "ERROR: No README.md file found!",
  "main": "index.js",
  "scripts": {
    "start": "echo \"open localhost:8080/\" && ./node_modules/.bin/browservefy index.js 8080 -- -d"
  },
  "repository": "",
  "author": "",
  "license": "BSD",
  "devDependencies": {
    "voxel-engine": "~0.18.2",
    "voxel-player": "~0.1.0",
    "browservefy": "0.0.10",
    "voxel-texture": "~0.5.6",
    "three": "~0.58.9"
  }
}

Should I use an older version of the engine? I know that this isn't the usual way to submit questions, but I don't really know how else to reach out to someone about it. But I must say, I love this project, and I can't wait to get cranking on it. You guys are doing some awesome work!

Pretty close! You just need to specify some materials. Otherwise it will try to load the default textures. If they dont exist in your texturePath everything will be blank. Try this:

var game = createGame({
  // Enable flat colors and no textures
  materialFlatColor: true,
  // Specify one green material
  materials: ['#00ff00'],
});

Also if you want a even more simple example, try voxel-hello-world.

the simplest possible game now is actually just:

require('voxel-hello-world')()

Thanks, the flat color worked! I do have a textures folder there, with all of the materials I should need. But when I add something simple like texturePath: './textures/', materials: ['grass', 'dirt'] in createGame and all that is displayed is a flat black area under the blue area. I'll figure it out, just wanted to start playing around with it. You can probably go ahead and delete this, as it's not an issue and more likely a deficiency on my end.

@bstubbs let us know if you have any more feedback regarding this issue, e.g. better docs