纪念工作的第一天——Three.js学习笔记

时间：2021-08-01 03:35:43

初次报道，以为纪念。

近期将围绕three.js进行系统的学习啦。

three.js中文学习网站http://www.hewebgl.com、官网：http://threejs.org

three.js是一门基于js的3D图形框架，其源码地址：http://github.com/mrdoob/three.js

three.js框架文件目录具体功能

Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。

Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。

Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。

Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。

Src目录：源代码目录，里面是所有源代码。

Test目录：一些测试代码，基本没用。

Utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。

.gitignore文件：git工具的过滤规则文件，没有用。

CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。

LICENSE文件：版权信息。

README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。

JS开发工具webstorm，下载地址：http://www.ddxia.com/view/129861415446916.html  或者http://pan.baidu.com/s/1o6JQX9S 和 http://pan.baidu.com/s/1tRb4a

JS调试技巧：http://zhangyongbluesky.blog.163.com/blog/static/1831941620113155739840/

three.js遵循右手坐标系，其中屏幕中心点坐标为（0,0,0），z轴坐标指向眼睛这边。

需要了解的知识点：scene、camera、renderer、light、texture（纹理）

经过一天的努力，直接上代码吧！

代码中导入的资源均为本地模式，没有资源的可以在three.js官网中下载js包，在examples\textures\cube\pisa中可以找到天空shy的图件。至于obj和mtl文件，网上应该很多的，替换就行了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>orbitcontrol_camera</title>
    <script src="three.min.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="MTLLoader.js"></script>
    <script src="OBJLoader.js"></script>

    <style type="text/css">
        div#canvas {
            border: none;
            width: 100%;
            height: 800px;
            background-color: #EEEEEE;

        }

    </style>
    <script type="text/javascript">
        var scene;
        function initScene () {
            scene = new THREE.Scene();
            //skybox
            scene.background = new THREE.CubeTextureLoader()
                .setPath( 'sky/' )
                .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] );
        }

        var renderer;
        function initThree () {
            width = document.getElementById('canvas').clientWidth;
            height = document.getElementById('canvas').clientHeight;
            renderer = new THREE.WebGLRenderer( {
                antialias : true
            });
            renderer.setSize(width, height);
            document.getElementById('canvas').appendChild(renderer.domElement);
            renderer.clearColor(0xFFFFFF, 1.0);
        }

        var camera;
        function initCamera () {
            camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
            camera.position.set(1000, 0, 0);
            camera.lookAt(scene.position);
        }

        var light, light1,light2;
        function initLight () {
            light = new THREE.PointLight(0xffffff, 0.5);
            light.position.set(600, 600, 600);
            light1 = new THREE.PointLight(0xffffff, 0.5);
            light1.position.set(-600, -600, -600);
            //light2 = new THREE.AmbientLight(0xffffff);
            scene.add(light);
            scene.add(new THREE.AmbientLight(0x333333));
            scene.add(light1);
            //scene.add(light2);
        }

        var geometryObj;
        function initGeometryObj () {
            var geometry = new THREE.BoxGeometry(100, 100, 100);
            var material = new THREE.MeshLambertMaterial({color:0xff0000});
            //var material = new THREE.MeshLambertMaterial({color:0xff0000, map:THREE.ImageUtils.loadTexture('src')});
            //直接对obj加载贴图
            geometryObj = new THREE.Mesh(geometry, material);
            scene.add(geometryObj);

        }

        //add extener_obj_data
        //obj加载是异步的，直接渲染，由于模型没呀加载完全，无法显示，故需要以animation的方式进行动态渲染
        var loader;
        function initLoader () {
            loader = new THREE.OBJLoader();
            loader.load('baiyuDCport/2032.obj', function(obj){
                obj.scale.set(1, 1, 1);
                obj.position.y = 200;
                scene.add(obj);
            });
        }

        //对三位模型obj加载材质material信息，include：漫射ambient，光泽specular，
        // RGB，反射specularity，折射refraction，透明度transparency等
        var loaderMtl;
        function initMtlloader () {
            loaderMtl = new THREE.MTLLoader();
            loaderMtl.setPath('baiyuDCport/');
            loaderMtl.load('2032.mtl', function(obj1){
                obj1.preload();
                var loaderobj = new THREE.OBJLoader();
                loaderobj.setMaterials(obj1);
                loaderobj.load('baiyuDCport/2032.obj', function(obj2){
                    obj2.scale.set(1, 1, 1);
                    obj2.position.y = -150;
                    scene.add(obj2);
                });
            });
        }



        function render () {
            renderer.render(scene, camera);
        }

        function animation () {
            render();
            requestAnimationFrame(animation);
        }


        function ThreeStart () {
            initScene(); //set scene
            initThree(); //set render parameter
            initLight(); // set light
            initCamera(); // set camera
            initGeometryObj(); //set obj
            initLoader();
            initMtlloader();
            //renderer.clear;
            render();  //begin renderer
            var controls = new THREE.OrbitControls(camera);  //camera control
            controls.addEventListener('change', render);
            animation();
        }


    </script>
</head>
<body onload="ThreeStart ()">
    <div id="canvas">
        <!--<audio src="test.mp3" autoplay loop></audio>-->
        <embed height="50" width="100" src="test.mp3"></embed>
    </div>

</body>
</html>




标签：

相关文章