three.js从入门到精通系列教程009 - three.js创建球体和圆柱体

发布时间：2024年01月20日
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程009 - three.js创建球体和圆柱体</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        var myWidth = 480, myHeight = 320;
        myRenderer.setSize(myWidth, myHeight);
        myRenderer.setClearColor("white", 1);
        $("#myContainer").append(myRenderer.domElement);
        var myScene = new THREE.Scene();
        var myLight = new THREE.PointLight("white");
        myLight.position.set(400, 800, 300);
        myScene.add(myLight);
        var k = myWidth / myHeight, s = 120;
        var myCamera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        myCamera.position.set(400, 300, 200);
        myCamera.lookAt(myScene.position);
        //创建球体
        /*
            THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
            radius：是半径；
            segmentsWidth：经度上的切片数，相当于经度被切成了几瓣；
            segmentsHeight：纬度上的切片数，相当于纬度被切成了几层；
            phiStart：经度开始的弧度；
            phiLength：经度跨过的弧度；
            thetaStart：纬度开始的弧度；
            thetaLength：纬度跨过的弧度。
        */
        var mySphereGeometry = new THREE.SphereGeometry(60, 40, 40);
        var mySphereMaterial = new THREE.MeshLambertMaterial({ color: "blue" });
        var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);
        mySphereMesh.translateY(-120);  //y轴平移
        mySphereMesh.translateX(-180);  //x轴平移
        myScene.add(mySphereMesh);
        //创建圆柱体
        //50,50表示圆柱上下两个底面的半径，参数三100表示圆柱高度，参数四100表示圆柱圆周方向细分数即光滑度
        var myCylinderGeometry = new THREE.CylinderGeometry(50, 50, 100, 100);
        var myCylinderMaterial = new THREE.MeshLambertMaterial({ color: "green" });
        var myCylinderMesh = new THREE.Mesh(myCylinderGeometry, myCylinderMaterial);
        myCylinderMesh.translateY(120);
        myCylinderMesh.translateX(200);
        myScene.add(myCylinderMesh);
        //渲染球体和圆柱体
        myRenderer.render(myScene, myCamera);
    </script>
</body>

</html>

文章来源:https://blog.csdn.net/smartsmile2012/article/details/135710893
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章