three.js基础几何体：立方体，球，圆柱的绘制

妖狐艹你老母 2022-06-05 05:20 359阅读 0赞

## **学习交流欢迎加群：789723098，博主会将一些demo整理共享**        ##

作为three.js的学习入门，一直在思考要怎样写才可以更符合初学者，对于我自己来说，本身也不是资深的玩家，也是入门不久的菜鸟，但我愿意与大家分享我的经验。我觉得three.js不应对一些基础性的东西介绍太多，因为其是基于WenGL开发的第三方库，如果延伸下去那就会没完没了，这也违背了three.js开发的初衷(为喜欢前端图形学开发，却没有良好的webgl和js基础的人群准备，使三维图形的开发变得更加容易)，所以接下来就从绘制基础的几何体开始吧，结合实际例子，这样更加简单粗暴。如果大家喜欢原生WebGL开发可以关注我另外的博客分栏：[点击打开链接][Link 1]。

在开始代码实例以前，先讲讲几种几何体的代码实现方式：

**(1) 平面**

new THREE.PlaneGeometry(100,100,10,10)

括号里的内容分别对应平面的长，宽，长方向等分量，宽方向等分量，第三第四个参数这么形容可能不太恰当，但实在找不出更恰当的形容，这里的意思是这样的，沿着长的方向将其分为10等分，沿着宽的方向将其分为10等分，参数可以根据大家的需要自己设置哈。

**(2) 立方体**

创建立方体的代码为：

new THREE.CubeGeometry(20, 20, 20, 10, 10, 10);

这里括号里的参数分别对应：长、宽、高、长方向等分量、宽方向等分量、高方向等分量；参数可以根据自己需要调整。

**(3) 球体**

创建球体的代码如下：

new THREE.SphereGeometry(16, 40, 40);

括号里的参数分别对应：半径、经度、纬度；参数的大小可以按照自己的需求设置。

**(4) 圆柱体**

创建圆柱体的代码为：

new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40)

括号里的参数分别对应：顶圆半径、底圆半径、圆柱体高度、经度、纬度；参数的大小可以根据自身需求设置。

在创建好几何体后，还需要对其进行材料属性的添加，这些在接下来的程序代码里都有注释和体现，先看看程序实现的效果图：

![Center][]

再看看将其设置为网格形式的效果，开启网格模式的命令为:**wrieframe:true**。

![Center 1][]

接下来把本例的完整程序代码附上，里面有详细的注释哈：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>threejs-basic-geometry</title>
        <style>
            body{
                font-family: Monospace;
                background: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript" src="build/three.js"></script>
    <script type="text/javascript" src="js/Detector.js"></script>
    <script type="text/javascript">
    
        //检测webgl的支持情况
        if(!Detector.webgl) {Detector.addGetWebGLMessage();}
        var container;
        var camera, scene, renderer;
        main();
        render();
        //主函数
        function main(){
            //添加一个div元素
            container = document.createElement('div')
            document.body.appendChild(container);
            scene = new THREE.Scene();//创建一个新场景
            //添加一个透视相机
            camera = new THREE.PerspectiveCamera(30,
                          window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.set(100, 300, 100);//设置相机位置
            camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
            //渲染
            //antialias:true增加抗锯齿效果
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑
            renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
            //将renderer关联到container，这个过程类似于获取canvas元素
            container.appendChild(renderer.domElement);
            //给场景添加光源
            //自然光
            var ambientLight = new THREE.AmbientLight( 0x606060 );
            scene.add( ambientLight );
            //平行光源
            var directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
            scene.add( directionalLight );
            plane();
            cube();
            sphere();
            cylinder();
        }
        //创建一个平面
        function plane(){
            var planeGeo = new THREE.PlaneGeometry(100,100,10,10);//创建平面
            var planeMat = new THREE.MeshLambertMaterial({  //创建材料
                color:0x666666,
                wireframe:false
            });
            var planeMesh = new THREE.Mesh(planeGeo, planeMat);//创建网格模型
            planeMesh.position.set(0, 0, -20);//设置平面的坐标
            planeMesh.rotation.x = -0.5 * Math.PI;//将平面绕X轴逆时针旋转90度
            scene.add(planeMesh);//将平面添加到场景中
        }
        //创建一个立方体
        function cube(){
            var cubeGeo = new THREE.CubeGeometry(20, 20, 20, 5, 5, 5);//创建立方体
            var cubeMat = new THREE.MeshLambertMaterial({//创建材料
                color:0x003300,
                wireframe:false
            });
            var cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
            cubeMesh.position.set(20, 10, 0);//设置立方体的坐标
            scene.add(cubeMesh);//将立方体添加到场景中
        }
        //创建一个球
        function sphere(){
            var sphereGeo = new THREE.SphereGeometry(16, 40, 40);//创建球体
            var sphereMat = new THREE.MeshLambertMaterial({//创建材料
                color:0x0000FF,
                wireframe:false
            });
            var sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);//创建球体网格模型
            sphereMesh.position.set(-25, 10, 0);//设置球的坐标
            scene.add(sphereMesh);//将球体添加到场景
        }
        //创建圆柱体
        function cylinder(){
            //创建圆柱体
            var cylinderGeo = new THREE.CylinderGeometry(15, 15 ,40 ,40 ,40);
            var cylinderMat = new THREE.MeshLambertMaterial({//创建材料
                color:0xFF6600,
                wireframe:false
            });
            //创建圆柱体网格模型
            var cylinderMesh = new THREE.Mesh(cylinderGeo, cylinderMat);
            cylinderMesh.position.set(0, 20, -40);//设置圆柱坐标
            scene.add(cylinderMesh);//向场景添加圆柱体
        }
        //渲染
        function render(){
            renderer.render(scene, camera);
        }
    
    </script>
    </body>
    </html>

做为入门，介绍了一个three.js实例的开发，后续将继续介绍three.js里面一些基本的组件。three.js的优势在于开发相同的三维场景，代码量要比用原生webgl少的多，因为很多底层的东西和功能three.js已经封装好了，你只需要去调用即可。现在有没有觉得three.js其实不是特别难呢？

[Link 1]: http://blog.csdn.net/qq_37338983/article/category/7292745
[Center]: /images/20220605/07207ce2fdc44e1b891dffcbb51d4acd.png
[Center 1]: /images/20220605/7a1e7c6a44f24e6f804fae42e1b05fe5.png