three.js从入门到精通系列教程051 - 制作立体桃心图形

最新推荐文章于 2024-04-26 16:47:03 发布

smartsmile2012

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量407

点赞数 7

分类专栏： three.js从入门到精通系列教程文章标签： javascript 开发语言 ecmascript three.js 3D 数字孪生前端

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

版权

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

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程051 - 制作立体桃心图形</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.setClearColor('white', 1.0);
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 0.1, 1000);
        myCamera.position.set(0, -100, -130);
        var myScene = new THREE.Scene();
        myScene.add(new THREE.AmbientLight(0xffffff, 0.9));
        //渲染桃心图形
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
        //创建桃心图形
        var myShape = new THREE.Shape();
        var x = 0, y = 0;
        myShape.moveTo(x + 5, y + 5);
        myShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
        myShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
        myShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
        myShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
        myShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
        myShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);
        var myOptions = {
            depth: 4, bevelEnabled: true, bevelThickness: 1,
            bevelSize: 1, bevelSegments: 24,
        };
        var myGeometry = new THREE.ExtrudeBufferGeometry(myShape, myOptions);
        var myMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00, wireframe: true });
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myMesh.scale.set(5, 5, 5);
        myMesh.position.y = 30;
        myMesh.position.x = -30;
        myMesh.rotation.x = 60;
        myScene.add(myMesh);
        //创建轨道控制器(旋转、缩放桃心图形)
        var myOrbitControls = new THREE.OrbitControls(myCamera);
    </script>
</body>

</html>