码迷,mamicode.com
首页 > Web开发 > 详细

three.js探索笔记一

时间:2018-02-02 18:35:14      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:can   highlight   cube   color   height   背景   存在   doc   代码   

 

 

 

  

前言

“哈?要搞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

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

 

three.js探索笔记一

标签:can   highlight   cube   color   height   背景   存在   doc   代码   

原文地址:https://www.cnblogs.com/baiDog/p/8406173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!