查看内容

web端可视化的3D编辑器--大瞳引擎

首先我们来看一下要在web端完成的需求:创建一个可以绕自己的Y轴与X轴的绿色柱体对象。
分析:项目建立在web端,如何在web端添加场景Scene,光照Light,摄像机Camera,以及对象相信对于使用行业游戏引擎与,three.js的开发人员来说并不陌生,
下面以three.js为例代码如下:
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8"/>
<title>online install</title>
<script type="text/javascript" src="./js/three.js"></script>
<script type="text/javascript" src="./js/stats.min.js"></script>
<style type = "text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height:600px;
background-color: #EEEEEE
}
</style>
<script type="text/javascript">
var renderer;
var stats;
function initThree(){
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({antialias:true});//antialias 生成渲染器对象(属性:抗锯齿效果为设置有效)
renderer.setSize(width,height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF,1.0);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.right = '0px';
document.getElementById('canvas-frame').appendChild(stats.domElement);
}
var camera;
function initCamera(){

camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 0;
camera.lookAt({
x:0,
y:0,
z:0

});
}
var scene;
function initScene(){
scene = new THREE.Scene();
}

var light;
function initLight(){

light = new THREE.PointLight(0x00FF00);
light.position.set(0,0,3000);
scene.add(light);
}

var cube;
var mesh;
function initObject(){
var geometry = new THREE.CylinderGeometry(10,15,40);
var material = new THREE.MeshLambertMaterial({color:0x00FF00});
mesh = new THREE.Mesh(geometry,material);
mesh.position.x = 100;
mesh.position.y = 100;
mesh.position.z = 100;
scene.add(mesh);


}
function threeStart(){
initThree();
initScene();
initCamera();
initLight();
initObject();
animation();

}
function animation(){

mesh.rotation.z+=0.01;
mesh.rotation.y+=0.01;
renderer.render(scene,camera);
requestAnimationFrame(animation);
stats.update();
}



</script>
<body onload="threeStart()">
可以看出,代码很清晰,但是代码量不少,完成这个简单的模型如果需要这么多代码的话花费的时间与精力来说真的是太不值当了,再来让我们看看大瞳引擎的处理方式:
1.打开tong3d.com,添加光照;
2.添加对象,为对象添加脚本控制;
代码如下:

var mesh = this.getObjectByName("Object");
function update( event ) {
    mesh.rotation.z+=0.01;
    mesh.rotation.y+=0.01;


}
其中对象的颜色与形状都可以通过编辑器进行控制,用以上的几行代码就可以完美解决刚开始我们提出的需求,怎么样是不是很方便了。
使用行业引擎的朋友可以对比一下开发效率与运行效率,欢迎大家使用大瞳引擎,有不足之处请联系:tongworld@tongworld.cn



分享: