学习 WebGL 的开源库 Three.js

时间:2021-08-10 05:55:38

孙广东  2017.3.4

http://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 { width100%height100% }</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.11000);

        

        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(geometrymaterial); scene.add(cube);

        camera.position.z = 5;

        function render() {

            requestAnimationFrame(render);

            cube.rotation.x += 0.1;

            cube.rotation.y += 0.1;

            renderer.render(scenecamera);

        }

        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/

 学习 WebGL 的开源库  Three.js

 

 学习 WebGL 的开源库  Three.js

浏览器打开的这个页面   不用关闭,     每次改动完    刷新就行了!

        另外两个个  依赖库的下载:

  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="/three.js/build/three.js"></script>-->

        <script src="http://cdn.bootcss.com/three.js/r83/three.js"></script>

        <style type="text/css">

            div#canvas-frame {

                bordernone;

                cursorpointer;

                width100%;

                height600px;

                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(widthheight);

                document.getElementById('canvas-frame').appendChild(renderer.domElement);

                renderer.setClearColor(0xFFFFFF1.0);

            }

            var camera;

            function initCamera() {

                camera = new THREE.PerspectiveCamera(45width / height110000);

                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(0xFF00001.00);

                light.position.set(100100200);

                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( -1000100 );

                var p2 = new THREE.Vector3(  1000-100 );

                geometry.vertices.push(p1);

                geometry.vertices.push(p2);

                geometry.colors.pushcolor1color2 );

                var line = new THREE.Line( geometrymaterialTHREE.LinePieces );

                scene.add(line);

            }

            function threeStart() {

                initThree();

                initCamera();

                initScene();

                initLight();

                initObject();

                renderer.clear();

                renderer.render(scenecamera);

            }

        </script>

    </head>

    <body onload="threeStart();">

        <div id="canvas-frame"></div>

    </body>

</html>

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