「three.js」研究与学习

一个搞技术的人在自己熟知的领域呆久了，知识面就会变得狭隘。

   最近研究了一下前端的知识，没有花太多时间在画页面上，因为我认为目前的前端页面开发必将并且已经趋向于类似于小程序的开发模式，一个固定样式表加模版控件插入的开发模式，新意和难度不是很大。所以我研究了下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 } );

效果如下：