【WebGL入门】画一个旋转的cube

时间 2019-11-29

标签 WebGL入门一个旋转 cube 繁體版

原文原文链接

最近搜罗了各类资料，发现WebGL中文网特别好用，很适合新手入门：http://www.hewebgl.com/article/getarticle/50html

只须要下载好须要的全部包，而后用notepad 就能够开始写代码了，运行代码我选择的Google Chrome，其实IE也是同样的，纯属我的信仰。前端

而后对于画cube的话，给出的代码已经很是清晰了：web

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);

        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(2,2,2);
        var material = new THREE.MeshBasicMaterial({color: 0xF0F000});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.05;
            cube.rotation.y += 0.05;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>canvas

有写过网站页面的话都知道html的处理就像一个堆栈，看到head就push到栈里，开始处理head的内容，碰到下一个head再pop出来，标志head处理结束。小程序

整体来讲，简单的网站页面包括<html><head><body>格式都是固定的，其中代码里面 document.body.appendChild(renderer.domElement);这句话声明此脚本是挂在body下执行的，若是不写这一句，body是不知道这个脚本是给它用的，所以就不会显示脚本里描述的cube的各类活动。微信小程序

和写unity脚本相似，webgl的图形界面也是须要这三个基本元素构成的。微信

1.sceneapp

2.cameradom

3.renderer工具

而后是声明一个物体对象cube，和new一个变量同样：var cube = new THREE.Mesh(geometry, material); scene.add(cube);其中值得注意的是js喜欢用var来声明变量，由于var和c的（void*）相似，都是能够接收任何类型的，比较灵活。

其中看起来比较奇葩的是color的赋值，用的是16进制，其实0x000000，就至关于0xRGB，每一个颜色用两位来表示。

感受webgl实现和最新的opengl相似，而后如今新兴的微信小程序其实也和H5有着密不可分的关系，因此webgl感受是一个挺适合前端工程的一套工具。

1. WebGL入门教程(三)-webgl动画
2. three.js 画一个旋转的立方体
3. WPF 画一个3D矩形并旋转
4. webgl画个点
5. WebGL入门教程(一)-初识webgl
6. 旋转动画
7. 动画旋转
8. 【入门】（一）旋转向量与旋转矩阵
9. 从Element3入门WebGL Shader（一）
10. webgl入门
更多相关文章...
• PHP imagecharup - 垂直地画一个字符 - PHP参考手册
• Memcached入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用