您的位置：首页 > Web前端 > JavaScript

学习 WebGL 的开源库 Three.js

2017-03-17 09:25 597 查看

孙广东 2017.3.4http://blog.csdn.NET/u010019717

百度第一个词条是： http://hewebgl.com/ 然后就照着学习呗，后面是需要花钱的！
开发环境搭建
VS Code（编辑器） + python（自带的文件服务器） + Three.js（WebGL）库

1、新建一个空的文件夹 “ThreeWebglProject”，然后使用VS Code打开
2、Ctrl + · 启动终端，输入命令： git clone https://github.com/mrdoob/three.js.git 下载Three.js 项目到这个路径下。
3、新建第一个文件： Test1.html

<!DOCTYPE html> <html> <head>     <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="/three.js/build/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(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }         render();
    </script>
</body> </html>

4、在资源管理器中双击这个文件，在浏览器中打开。我这是不会正常运行的！
      你可以在浏览器中 F12   看问题。
5、我解决问题是使用Python自带的文件服务器
          还是在  vscode 的终端内输入：（看你安装了哪个版本就执行哪个命令）
Python2.x   :   python -m SimpleHTTPServer   8000
Python3.x   :   python -m http.server  8000
         在浏览器中输入网址：
http://127.0.0.1:8000/

浏览器打开的这个页面   不用关闭，     每次改动完    刷新就行了！
        另外两个个依赖库的下载：
git clone https://github.com/tweenjs/tween.js.git
git clone https://github.com/mrdoob/stats.js/.git

            其实就是  Stats.js 和 Tween.js 两个文件有用，但是如果你不想破环案例的正常使用，可以把他们单独拷贝出来，而不是移动！

可能会有更好的方式，比如创建一个web 项目？我不知道怎么弄

           可以使用 BootCDN
不下载这三个模块，  使用在线的！  需要什么包，搜索就行了，没有的就没有办法了

http://www.bootcdn.cn/three.js/
<scriptsrc="http://cdn.bootcss.com/three.js/r83/three.js"></script>

http://www.bootcdn.cn/stats.js/
<scriptsrc="http://cdn.bootcss.com/stats.js/r17/Stats.js"></script>

http://www.bootcdn.cn/tween.js/
<scriptsrc="http://cdn.bootcss.com/tween.js/r14/Tween.js"></script>

还是划线的例子：

<!DOCTYPE html> <html>     <head>
        <meta charset="UTF-8">
        <title>ThreeF¶</title>
        
        <script src="http://cdn.bootcss.com/three.js/r83/three.js"></script>
        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 600px;
                background-color: #EEEEEE;
            }         </style>
        <script>
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });                 renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);
            }             var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 1000;
                camera.position.z = 0;
                camera.up.x = 0;
                camera.up.y = 0;
                camera.up.z = 1;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });             }             var scene;
            function initScene() {
                scene = new THREE.Scene();
            }             var light;
            function initLight() {
                light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
                light.position.set(100, 100, 200);
                scene.add(light);
            }             var cube;
            function initObject() {
                var geometry = new THREE.Geometry();
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );
                // ¿P(ïå12¹r³
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );
                var line = new THREE.Line( geometry, material, THREE.LinePieces );
                scene.add(line);
            }             function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
                renderer.clear();
                renderer.render(scene, camera);
            }         </script>
    </head>
    <body onload="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>

当然了，涉及到复杂的话就没有办法了，比如本地的模型资源，声音，纹理，本地其它的脚本，还是要使用一开始介绍的！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航