three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放

smartsmile2012

已于 2024-01-21 07:44:24 修改

阅读量502

点赞数 6

分类专栏： three.js从入门到精通系列教程文章标签： javascript three.js 数字孪生元宇宙开发语言

于 2024-01-21 07:41:46 首次发布

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135718650

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
    <script src="ThreeJS/OrbitControls.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.0);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
        myCamera.position.set(200, 200, 200);
        myCamera.lookAt({ x: 0, y: 0, z: 0 });
        var myScene = new THREE.Scene();
        var myPointLight = new THREE.PointLight('white');
        myPointLight.position.set(20, 200, 30);
        myScene.add(myPointLight);
        //创建矩形
        var myShape = new THREE.Shape();
        //四条直线(线条)绘制一个矩形
        myShape.moveTo(-10, -10);						         //绘制起点
        myShape.lineTo(-10, 10);								//第2个顶点
        myShape.lineTo(10, 10);									//第3个顶点
        myShape.lineTo(10, -10);								//第4个顶点
        myShape.lineTo(-10, -10);								//第5个顶点
        //设置在y轴方向拉伸矩形
        var myCurve = new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 40, 0)]);
        /*
            ExtrudeGeometry 拉伸缓冲几何体
            将一个二维图形拉伸成三维图形。
            new THREE.ExtrudeGeometry(shapes, options) 两个参数：
            shapes 一个或多个形状（THREE.Shape对象）。
            options 拉伸成三维图形的配置参数。
        */
        var myGeometry = new THREE.ExtrudeGeometry(myShape, { extrudePath: myCurve });
        var myMaterial = new THREE.MeshPhongMaterial({ color: 'cyan' });
        //创建多个矩形
        var myArray = [];
        for (var i = 0; i < 6; i++) {
            var myMeshes = [];
            for (var j = 0; j < 6; j++) {
                var myMesh = new THREE.Mesh(myGeometry, myMaterial);
                myScene.add(myMesh);
                myMesh.translateX(-100 + 30 * i);
                myMesh.translateZ(-100 + 30 * j);
                myMesh.translateY(-50);
                myMeshes.push(myMesh);
            }
            myArray.push(myMeshes);
        }
        //渲染图形
        animate();
        var z = 0;
        function animate() {
            myRenderer.render(myScene, myCamera);
            z = z + 0.01;
            for (var u = 0; u < myArray.length; u++) {
                for (var v = 0; v < myArray[u].length; v++) {
                    var myScale = 2 * Math.sin(z + 100 / u - 100 / v) + 2;
                    myArray[u][v].scale.y = myScale;
                }
            }
            requestAnimationFrame(animate);
        }
        var myOrbitControls = new THREE.OrbitControls(myCamera);
        myOrbitControls.enableRotate =true; //启用旋转
        myOrbitControls.enablePan = true; //启用平移
        myOrbitControls.enableZoom =true; //启用缩放
    </script>
</body>

</html>

smartsmile2012

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放

【代码】three.js从入门到精通系列教程023 - three.js利用ExtrudeGeometry创建多个拉伸缓冲几何体支持旋转缩放。
复制链接

扫一扫