three.js从入门到精通系列教程013 - three.js创建多次旋转连接的圆环结

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

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程013 - 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 });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor("white", 1);
        $("#myContainer").append(myRenderer.domElement);
        var k = window.innerWidth / window.innerHeight;
        var myCamera = new THREE.OrthographicCamera(-4 * k, 4 * k, -3 * k, 3 * k, 1, 500);
        myCamera.position.set(0, 0, 200);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));
        var myScene = new THREE.Scene();
        /*        
            THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
            圆环节和圆环很相似，只是多了一些参数。
            radius ： 圆环的半径，默认值为1。
            tube ： 管道的半径，默认值为0.4。
            tubularSegments ： 管道的分段数量，默认值为64。
            radialSegments ： 横截面分段数量，默认值为8。
            p ： 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
            q ： 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。
        */
        //创建多次旋转的圆环结
        var myGeometry = new THREE.TorusKnotGeometry(2, 0.5, 100, 12, 3, 4);
        var myMaterial = new THREE.MeshBasicMaterial({ color: 'green' });
        //创建线框材质
        myMaterial.wireframe = true;
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myScene.add(myMesh);
        //渲染圆环结
        myRenderer.render(myScene, myCamera);
    </script>
</body>

</html>

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