`

three.js开发指南（第一章）

 
阅读更多

-Three.js开发指南---用three.js创建你的第一个三维场景（第一章）

Posted on 2016-12-08 17:54 Amy-lover 阅读(838) 评论(0) 编辑 收藏

本章主要做了下面的工作

　　1 生成一个简单的场景，该场景的物体只有平面和坐标轴

　　2 在第一个demo的基础上添加光源和方块物体，并生成阴影

　　3 在第二个demo的基础上，增加动画，使得方块进行旋转

　　4 在第三个demo的基础上，增加图形操作界面，改变方块旋转的速度

　　5 在第四个demo的基础上，我们使用ascII效果(这个没有做出来，不知道为什么asciieffect没有定义)

在下面的demo中，

　　1 生成了场景，相机，渲染器，几何体（平面），材质（几何体和材质进行组合，组成物体），坐标轴，

　　2 将相机，渲染器，物体都添加到场景中，

　　3 然后再对场景和相机进行渲染

复制代码
<!DOCTYPE html>

<html>

<head>
    <title>1</title>
    <script type="text/javascript" src="three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

   function init() {
        var scene=new THREE.Scene();//生成一个场景
        //生成一个相机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//视场，长宽比，近面，远面
        camera.position.x=-20;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        //生成一个渲染器
        var render=new THREE.WebGLRenderer();
        render.setClearColorHex(0xEEEEEE);
        render.setSize(window.innerWidth,window.innerHeight);
        //生成一个坐标轴，辅助线，坐标轴的参数
        var axes=new THREE.AxisHelper(20);
        //生成一个平面
        var planeGeometry=new THREE.PlaneGeometry(60,20,10,10);//注意参数
        //生成一个材质，设置材质的颜色，同时显示线框
        var planeMaterial=new THREE.MeshBasicMaterial({color:0xcccccc,wireframe:true});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=15;
        plane.position.y=0;
        plane.position.z=0;
        
        //将相机，渲染器，坐标轴，平面都追加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(axes);
        scene.add(plane);
        render.render(scene,camera);
        document.getElementById("WebGL-output").append(render.domElement);
    };
    window.onload = init;

</script>
</body>
</html>
复制代码

 在下面的demo中，我们添加光源和设置物体阴影

　　1 three.js中有两种材质可以对光源产生反应，MeshLambertMaterial和MeshPhongMaterial，所以我们将上面demo中的MeshBasicMaterial替换为另外一个材质MeshLambertMaterial

　　2 我们设置点光源SpotLight

　　3 由于阴影需要大量的计算资源，所以three.js默认是不生成阴影的，需要进行设置

　　　　首先是渲染器，render.shadowMapEnabled=true

　　　　其次是允许物体投射阴影，cube.castShadow=true;

　　　　再其次是允许某些物体接受阴影，plane.receiveShadow=true

　　　　最后是光源也要投射阴影，spot.castShadow=true

 

复制代码




复制代码


<!DOCTYPE html>

<html>

<head>
    <title>1</title>
    <script type="text/javascript" src="three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

   function init() {
        var scene=new THREE.Scene();//生成一个场景
        //生成一个相机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//视场，长宽比，近面，远面
        camera.position.x=-20;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        //生成一个渲染器
        var render=new THREE.WebGLRenderer();
        render.setClearColorHex(0xEEEEEE);
        render.setSize(window.innerWidth,window.innerHeight);
        render.shadowMapEnabled=true;//允许阴影映射，渲染阴影需要大量的资源，因此我们需要告诉渲染器我们需要阴影
        
        
        //生成一个坐标轴，辅助线
        var axes=new THREE.AxisHelper(20);
        //生成一个平面
        var planeGeometry=new THREE.PlaneGeometry(60,20,10,10);//平面
        //生成一个材质
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=0;
        plane.receiveShadow=true;//平面进行接受阴影
        
        var cubeGeometry=new THREE.CubeGeometry(10,10,10);
        var planeMaterial1=new THREE.MeshLambertMaterial({color:0xff0000});
        var cube=new THREE.Mesh(cubeGeometry,planeMaterial1);
        //plane1.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;
        cube.castShadow=true;//需要阴影，方块进行投射阴影
        
        
        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        //将相机，渲染器，坐标轴，平面都追加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(axes);
        scene.add(plane);
        scene.add(cube);
        scene.add(spotLight);
        render.render(scene,camera);
        document.getElementById("WebGL-output").append(render.domElement);
    };
    window.onload = init;

</script>
</body>
</html>


复制代码




 


复制代码




在下面demo中，我们引入动画


　　让场景每隔一段时间进行一次渲染，setInterval方法会指定时间进行一次函数调用，


　　但是该方法并不考虑浏览器发生的事情，即使你正在浏览其他页面，该方法仍然会每隔固定的时间进行一次调用，


　　另外该方法并没有跟显示器的重新绘制同步，这将导致较高的cpu使用率


　　现在的浏览器有了requestAnimationFrame方法




复制代码


<!DOCTYPE html>

<html>

<head>
    <title>1</title>
    <script type="text/javascript" src="three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

   function init() {
        var scene=new THREE.Scene();//生成一个场景
        //生成一个相机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//视场，长宽比，近面，远面
        camera.position.x=-20;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        //生成一个渲染器
        var render=new THREE.WebGLRenderer();
        render.setClearColorHex(0xEEEEEE);
        render.setSize(window.innerWidth,window.innerHeight);
        render.shadowMapEnabled=true;//允许阴影映射，渲染阴影需要大量的资源，因此我们需要告诉渲染器我们需要阴影
        
        
        //生成一个坐标轴，辅助线
        var axes=new THREE.AxisHelper(20);
        //生成一个平面
        var planeGeometry=new THREE.PlaneGeometry(60,20,10,10);//平面
        //生成一个材质
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=0;
        plane.receiveShadow=true;//平面进行接受阴影
        
        var cubeGeometry=new THREE.CubeGeometry(10,10,10);
        var planeMaterial1=new THREE.MeshLambertMaterial({color:0xff0000});
        var cube=new THREE.Mesh(cubeGeometry,planeMaterial1);
        //plane1.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;
        cube.castShadow=true;//需要阴影，方块进行投射阴影
        
        
        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        //将相机，渲染器，坐标轴，平面都追加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(axes);
        scene.add(plane);
        scene.add(cube);
        scene.add(spotLight);
        
        document.getElementById("WebGL-output").append(render.domElement);
         renderScene();

        function renderScene(){
            cube.rotation.x+=0.02;
            cube.rotation.y+=0.02;
            cube.rotation.z+=0.02;
            requestAnimationFrame(renderScene);
            render.render(scene,camera);
        }
        
        
    }
    window.onload = init;

</script>
</body>
</html>


复制代码




 




 


我们使用google创建的dat.GUI库创建一个简单的界面，来控制方块旋转的速度


　　 1 首先引入google的dat.gui.js文件


　　2 生成一个gui对象


　　3 定义一个js对象controls，然后再将controls对象传递给dat.gui对象




复制代码


<!DOCTYPE html>

<html>

<head>
    <title>1</title>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

   function init() {
        var scene=new THREE.Scene();//生成一个场景
        //生成一个相机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//视场，长宽比，近面，远面
        camera.position.x=-20;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        //生成一个渲染器
        var render=new THREE.WebGLRenderer();
        render.setClearColorHex(0xEEEEEE);
        render.setSize(window.innerWidth,window.innerHeight);
        render.shadowMapEnabled=true;//允许阴影映射，渲染阴影需要大量的资源，因此我们需要告诉渲染器我们需要阴影
        
        
        //生成一个坐标轴，辅助线
        var axes=new THREE.AxisHelper(20);
        //生成一个平面
        var planeGeometry=new THREE.PlaneGeometry(60,20,10,10);//平面
        //生成一个材质
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=0;
        plane.receiveShadow=true;//平面进行接受阴影
        
        var cubeGeometry=new THREE.CubeGeometry(10,10,10);
        var planeMaterial1=new THREE.MeshLambertMaterial({color:0xff0000});
        var cube=new THREE.Mesh(cubeGeometry,planeMaterial1);
        //plane1.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;
        cube.castShadow=true;//需要阴影，方块进行投射阴影
        
        
        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        //将相机，渲染器，坐标轴，平面都追加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(axes);
        scene.add(plane);
        scene.add(cube);
        scene.add(spotLight);
        
        document.getElementById("WebGL-output").append(render.domElement);
        renderScene();
        
        function renderScene(){
            cube.rotation.x+=controls.rotationSpeed;
            cube.rotation.y+=controls.rotationSpeed;
            cube.rotation.z+=controls.rotationSpeed;
            requestAnimationFrame(renderScene);
            render.render(scene,camera);
        }
    }
    var controls=new function(){
            this.rotationSpeed=0.02;
    };
    var gui=new dat.GUI();
    gui.add(controls,"rotationSpeed",0,0.5);
    window.onload = init;

</script>
</body>
</html>


复制代码




 


 


 




 


 ASCII效果


　　1 引入AsciiEffect.js


　　2 生成一个ascii效果


　　3 页面追加的domElement由渲染器的domElement改成ascii效果的domelement


　　4 render的话就使用effect的render进行渲染






复制代码


<!DOCTYPE html>

<html>

<head>
    <title>1</title>
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="dat.gui.js"></script>
    <script type="text/javascript" src="AsciiEffect.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

   function init() {
        var scene=new THREE.Scene();//生成一个场景
        //生成一个相机
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);//视场，长宽比，近面，远面
        camera.position.x=-20;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);
        //生成一个渲染器
        var render=new THREE.WebGLRenderer();
        render.setClearColorHex(0xEEEEEE);
        render.setSize(window.innerWidth,window.innerHeight);
        render.shadowMapEnabled=true;//允许阴影映射，渲染阴影需要大量的资源，因此我们需要告诉渲染器我们需要阴影
        
        
        //生成一个坐标轴，辅助线
        var axes=new THREE.AxisHelper(20);
        //生成一个平面
        var planeGeometry=new THREE.PlaneGeometry(60,20,10,10);//平面
        //生成一个材质
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        //生成一个网格，将平面和材质放在一个网格中，组合在一起，组成一个物体
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=0;
        plane.receiveShadow=true;//平面进行接受阴影
        
        var cubeGeometry=new THREE.CubeGeometry(10,10,10);
        var planeMaterial1=new THREE.MeshLambertMaterial({color:0xff0000});
        var cube=new THREE.Mesh(cubeGeometry,planeMaterial1);
        //plane1.rotation.x=-0.5*Math.PI;//将平面沿着x轴进行旋转
        cube.position.x=-4;
        cube.position.y=3;
        cube.position.z=0;
        cube.castShadow=true;//需要阴影，方块进行投射阴影
        
        
        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        //将相机，渲染器，坐标轴，平面都追加到场景中，然后对场景和相机进行渲染
        scene.add(camera);
        scene.add(render);
        scene.add(axes);
        scene.add(plane);
        scene.add(cube);
        scene.add(spotLight);
        var effect=new THREE.AsciiEffect(render);
        effect.setSize(window.innerWidth,window.innerHeight);
        document.getElementById("WebGL-output").append(effect.domElement);
        renderScene();
        
        function renderScene(){
            cube.rotation.x+=controls.rotationSpeed;
            cube.rotation.y+=controls.rotationSpeed;
            cube.rotation.z+=controls.rotationSpeed;
            requestAnimationFrame(renderScene);
            effect.render(scene,camera);
        }
        
        
    }
    var controls=new function(){
            this.rotationSpeed=0.02;
    };
    var gui=new dat.GUI();
    gui.add(controls,"rotationSpeed",0,0.5);
    window.onload = init;

</script>
</body>
</html>


复制代码








 




  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      THREE.JS中常用的3种材质
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      Three.js入门指南（Three.js教程） Three.js开发指南
                    
                  
    
                  
    第 1 章介绍 Three.js 和 WebGL 的背景资料，并通过简单的例子帮助读者实现第一个Three.js 应用。 第 2 章介绍照相机的设定。 第 3、4、5 章分别介绍几何形状、材质和网格，即如何在场景中添加物体。 第 6 章介绍...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      threeJS开发指南pdf版，内有git下载素材地址
                    
                  
    
                  
    第1章 用Three.js创建你的第一个三维场景 1.1　使用Three.js的前提条件 1.2　获取源代码 1.3　创建HTML页面框架 1.4　渲染并展示三维对象 1.5　添加材质、灯光和阴影 1.6　用动画扩展你的首个场景 1.7　使用dat.GUI...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Three.js 入门指南(中文)
                    
                  
    
                  
    - **定义**：Three.js 是一款基于 WebGL 的 JavaScript 3D 库，它简化了 WebGL 复杂的操作流程，使开发者能够更加专注于创意与功能实现。  - **应用场景**：适用于网页端的 3D 图形应用开发，如游戏、可视化展示、...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      THREE.JS开发指南
                    
                  
    
                  
    首部全面讲解Three.js开发的实用指南，循序渐进讲解Three.js的各种功能，通过大量交互示例，深入探索使用开源...到这章结束的时候，你就可以创建出第一个Three.js场景。你可以直接在浏览器中创建三维场景，并制作动画。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Three.js 入门指南pdf
                    
                  
    
                  
    - **第1章**：介绍 Three.js 和 WebGL 的基础知识，并通过示例帮助读者完成第一个 Three.js 应用。 - **第2章**：探讨如何设置照相机，包括不同类型照相机的使用场景。 - **第3、4、5章**：详细介绍如何创建和操作...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Three_js_入门指南1
                    
                  
    
                  
    第一章介绍了Three.js 和 WebGL 的基础概念，并通过一个简单的示例帮助读者快速入门，例如创建一个黑色背景上的白色正方形和三角形。这个示例展示了Three.js 的基本用法，如创建渲染器、场景和几何形状。  第二章...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      WEBGL英文原版教程
                    
                  
    
                  
    第2章则是通过Three.js这一JavaScript 3D引擎，引导读者快速入门WebGL。Three.js提供了一个更高级别的接口来操作WebGL，简化了许多复杂的细节，使得开发WebGL程序更加方便快捷。本章中，作者演示了如何建立Three.js...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      14.2-锋芒游戏网页.zip
                    
                  
    
                  
    "14.2" 可能代表课程或者章节编号，表示这是系列教程中的第14章的第二个部分，专注于游戏网页的开发或设计。".zip" 后缀表明这是一个压缩文件，里面包含了与游戏网页相关的多种文件。  【描述解析】 描述中的 "14.2-...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Pragmatic_Ajax.pdf
                    
                  
    
                  
    本书的第一章通过一个故事的形式引入了Ajax的概念及其发展历程。这一章节主要分为三个部分： - **Act I: Web 1.0时代** —— 在这个阶段，网页是静态的，用户与服务器之间的交互非常有限，通常是通过表单提交等方式...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics