three.js探索笔记一

Posted 2020-10-23 baidog

 

 

 

　　

前言

“哈？要搞3D？”

“恩，之后一个项目要建造一栋楼，要靠你了少年！”

于是我默默的打开了 webgl新手入门手册 http://www.hewebgl.com/article/getarticle/27

后来，我成功的完成了这个这个3d楼层。http://wisdom.pppppc.com/home/index/threes.html

这个过程中，我经历了很多。接下来我将分享我过程中的心得。

第一步：新手教程

方法一：进入webgl官网   three.js新手教程。（我就是这样干的，花了3-4天通了遍基础）

方法二：找之前大神的基础教程。

方法三：加webgl相关QQ群，假扮萌妹，求帮助~~

以下是个画网格的例子，通过这个例子，我给大家分析画一个3d的需要（不是导入模型~）

        var renderer,camera,scene,light;
        var width,height;
        //物体
        var cube;
        //初始化渲染器函数
        function initThree(){
            width = document.getElementById("canvas3d").clientWidth;
            height = document.getElementById("canvas3d").clientHeight;
            //初始化渲染器  （花括号里面为：锯齿优化）
            renderer = new THREE.WebGLRenderer({antialias:true});    
            //大小
            renderer.setSize(width,height);            
            document.getElementById("canvas3d").appendChild(renderer.domElement);
            //背景颜色
            renderer.setClearColor(0xFFFFFF,1.0);
        }
        //初始化相机函数
        function initCamera(){
            camera = new THREE.PerspectiveCamera(45,width/height,1,5000);
            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});
        }
        //初始化场景函数
        function initScene(){
            scene = new THREE.Scene();
        }
        //初始光函数
        function initLight(){
            light = new THREE.DirectionalLight(0xff0000,1.0,0);
            light.position.set(200,200,200);
            scene.add(light);
        }
        //初始化物体函数        
        function initObj(){
            var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial({vertexColors:true});
            var color1 = new THREE.Color("#444444"),color2= new THREE.Color("#ff0000");
        
            var p1 = new THREE.Vector3(-500,0,0);
            var p2 = new THREE.Vector3(500,0,0);
            
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push(color1,color2);
            
            for(var i=0;i<21;i++){
                var line = new THREE.Line(geometry,material,THREE.LinePieces);
                line.position.z=(i*50)-500;                
                scene.add(line);
                
                var line = new THREE.Line(geometry,material,THREE.LinePieces);
                line.position.x=(i*50)-500;    
                line.rotation.y=90*Math.PI/180;        
                scene.add(line);
            }                        
        }                    
        //整体初始化
        function threeStart(){
            initThree();      
            initScene();
            initLight();
            //对象
            initObj();

　　　　　　　initCamera();

　　　　　　　　renderer.clear();
 　　　　　　renderer.render(scene, camera);
 }

对应着代码，我解释一下：

1，变量：renderer   渲染器

　　首先我们的最终目标是要将我们代码画的物体渲染到网页上！

　　渲染的实现就是 ：

renderer.render(scene, camera);

2. 变量 ： camera   相机  （废话，我们tm要你翻译？）

　　这玩意叫相机，就相当于我们的眼睛。它是代替我们在3D世界里面看的东西。它有视野大小，视野最近/最远，位置坐标的定义。一般情况，我们移动它位置和方向来控制我们的视野。

3.变量：scene    场景 （这就是我们看到的一切）

　　场景里面主要有2个东西，

　　①物体，用three画的\加载的模型等，一般情况，我会将所要的物体全部放到initObj()里面。

　　②光，没有光，那么物体确实存在在那儿，但是你看不到~~

　　这些物体和光都需要在渲染前放到场景内。

　　scene.add(light);
　　scene.add(line);　　

总结：

　　一个3d效果的流程：

　　①初始化渲染器 

　　initThree();

 

　　②初始化场景

 

　　initScene();

 

　　③初始化物体、光 add到场景中

 

　　initLight();

　　initObj();

 

　　④把我们的眼睛（相机）给放好位置（初始化）（相机初始位置最终渲染前就行）

　　initCamera();

 

　　⑤最后把场景和相机放到渲染器中，咔咔咔咔咔咔~~噗    页面就出来了。

 

　　renderer.render(scene, camera);

 

　　哈哈哈哈哈哈哈，详细的那些相机~~光啊~~~什么的建议看webgl官网或者这个大神的博客：http://blog.csdn.net/birdflyto206/article/category/6132005

　　下一次，我主要这个楼宇项目的起步。