Voxel.js文档——用js实现“我的世界”-优快云博客

本文链接：https://blog.youkuaiyun.com/lmmmmmnb/article/details/115193123

用网页实现‘我的世界’，并且可以添加网页的基本功能

已实现网页

小记

本次创作是基于Voxel.js框架实现，但是该框架已发布8年，后期的维护工作并不完善，官网并无文档，并且官网介绍的voxel-hello-world启动文件包已在npm库中失效。作者由于对该框架很感兴趣就制作了该文档。以各个引入文件中的readme文件为主，源代码为辅总结。如有理解不当之处，欢迎批评指教。

Voxel.js官网地址：Voxel.js

文档作者csdn：lmmmmmnb

文档作者：YiDaoDo

简单的开始

1，创建你的web项目：只需要一个js文件（以下称为index.js）与html文件(以下称为index.html)
2，在你创建好的项目中执行

npm install voxel-engine --save-dev
npm install voxel-player --save -dev
npm install voxel-highlight --save -dev

下载好基础的三个包。（当然还有很多别的功能包，后期作者会同步上）
3，

npm install browserify -g

安装browserify为的是可以利用Node.js实现JS模块化加载
4，

var createGame =require('voxel-engine');//引入包
var Highlight = require('voxel-highlight')//引入包
var game=createGame(       //以该函数为基础创造世界 
    { 
    generate: function(x,y,z) {   //generate里面的函数为初始的地图创建函数  
    if (y==0){  
        return x*x+z*z <=55*55? 1:0 
        }else if(y==8&&x==0&&z==0){ 
        return 1    
        } 
    }, 
    texturePath:'textures/',      //引入纹理包。纹理包里面的图片都可以在voxel-engine包里面找到     
    materials: ["grass"]   //添加初始纹理（都是纹理包里面的）

      }
 );

var createPlayer=require('voxel-player')(game);   //引入包

game.appendTo(document.body);       //获得全屏

var substack=createPlayer('skin/shama.png');  //创建你的小人

substack.possess();      //小人获得移动视角

substack.yaw.position.set(3,30,0);    //小人初始位置

在index.js中加入上述代码.