一个搞技术的人在自己熟知的领域呆久了，知识面就会变得狭隘。
最近研究了一下前端的知识，没有花太多时间在画页面上，因为我认为目前的前端页面开发必将并且已经趋向于类似于小程序的开发模式，一个固定样式表加模版控件插入的开发模式，新意和难度不是很大。所以我研究了下js方面的知识。js的语法和python类似，不需要研究基础语法，直接进行demo代码阅读，可能学习起来更快。
一直对3D建模之类的比较感兴趣，所以这次我选择three.js作为学习js的一个方向。
代码如下：
创建一个运动的立方体
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
// 1、创建场景
var scene = new THREE.Scene();
// 2、创建相机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
// 3、创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 4、 创建几何体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 5、创建材质
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 6、构造器 构造物体
var cube = new THREE.Mesh( geometry, material );
// 7、场景中添加正方体
scene.add( cube );
// 8、将相机的位置设置到高于原点的5个单位处
camera.position.z = 5;
// 9、设置动画效果
var animate = function () {
requestAnimationFrame( animate );
// 10、正方体在x，y方向上旋转0.01
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
运行效果如下：
cube.gif
效果看起来还可以...
也很好玩。可以再加一些交互，添加一些监听事件等等。
显然这个颜色让你绿的发慌。
还需要加点特效
于是我们修改代码，先添加一个键盘事件：
//添加键盘监听事件
document.addEventListener("keydown",onkeyDown,false);
//键盘事件
function onkeyDown(event) {
//初始化新材质对象
material = new THREE.MeshBasicMaterial( { color: randomHexColor() } );
//将立方体的材质更换
cube.material = material;
}
//产生随机色值
function randomHexColor() { //随机生成十六进制颜色
return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}
新的立方体如图：
cube.gif
每当你按下键盘，它就跟着belingbeling的闪，当然beling的速度跟你按键盘的速度有关。
但是这有什么好看的啊
可能背景太黑影响我们的视觉效果了
于是添加代码：
//渲染器背景颜色
renderer.setClearColor(0x4682B4,1.0);
效果图如下：
cube.gif
嗯，还可以
显然我们做到这一步还是不满意。费半天劲就给我看这个？
方块上面就不能贴图片吗？
于是我们又贴了图片
代码如下
//材质导入
var texture = new THREE.TextureLoader().load( 'images/pic.gif' );
//添加材质
var material = new THREE.MeshBasicMaterial( { map: texture } );
效果如下：
鸡太美.gif
好吧，鸡太美的效果还说的过去。
但是这又有什么卵用
我们要发挥聪明才智，做点对社会，对国家，对世界真正有意义的事情！
所以。。。
通过如下步骤：
1、
第一步.gif
2、
第二步.gif
3、
第三步.gif
好了，直接展示效果：
首先页面效果为：
一扇门.png
首先映入眼帘的是一扇门和一面前，墙后面似乎有副鸡太美的壁画。
我们慢慢走进并打开了门：
鸡太美.gif
果然是这鸡太美的壁画，还好老子有心理准备不然就想立刻马上找个篮球拍起来并且嘴上哼起rap。
可惜的是，我还是没控制住我几集，边哼着rap走了进去
卧槽.gif
室内竟然一个鸡太美的台灯在自由的旋转...
无聊写着玩而已，君莫怪。
最后成品整体效果展示：
home.gif
按空格键开关门
😂😂😂😂😂😂😂😂
网友评论