前端 3d开发怎么操作，什么流程？

我们都知道现今社会复合型人才是企业刚需，只会一项本领难以在企业中立足，即便是前端工程师，如果你只会敲代码改网页也是不行了，要多方面拓展自己的才能。比如研究可视化方向的3D开发。这就需要借助可视化pass平台平台来完成。

接下来了解一下开发流程吧：

HelloWorld.js

/**

* 说明：创建App，url为场景地址（可选）

*/

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址

});

创建立方体.js

/**

* 说明：创建一个Box，并在app的update事件中旋转Box，摄像机看Box

*/

var app = new THING.App();

// 创建Box

var box = app.create({

type: 'Box',

position: [-4, 0, 0],

});

// update事件

app.on('update', function () {

box.rotateY(30 * app.deltaTime * 0.001); // 箱子自转

});

// 看Box

app.camera.lookAt(box);

创建几何体.js

/**

* 说明：创建多种几何体

* 教程：ThingJS教程——>对象创建——>创建物体

* 难度：★★☆☆☆

*/

var app = new THING.App();

// 创建平面

var plane = app.create({

type: 'Plane',

width: 8,

height: 8,

position: [0, 0, 0]

});

// 平面旋转90度

plane.rotateX(-90);

// 创建箱子

var box = app.create({

type: 'Box',

position: [2, 2, 0], // 箱子坐标

});

// 创建球体

var sphere = app.create({

type: 'Sphere',

radius: 0.5, // 半径

widthSegments: 16, // 节数

heightSegments: 16,

position: [4, 4, 0], // 球体坐标

});

// 创建圆柱体

var cylinder = app.create({

type: 'Cylinder',

radius: 0.3,

height: 1.6,

position: [0, 2, 2]

});

// 创建四面体

var tetrahedron = app.create({

type: 'Tetrahedron',

radius: 1,

position: [0, 2, 0]

});

// update事件

app.on('update', function () {

// 箱子自转

box.rotateY(app.deltaTime * 30 * 0.001);

// 移动球体（上下移动）

sphere.y = Math.cos(app.elapsedTime * 0.001) * 2;

// 移动圆柱体(左右移动)

cylinder.x = Math.cos(app.elapsedTime * 0.001) * 2;

});

// 设置最佳观看位置

app.camera.fit();

// 设置主灯光 开启阴影

var mainLight = {

shadow: true

};

app.lighting = { mainLight };