three.js从入门到精通系列教程024 - three.js通过自定义曲线和自定义形状绘制面具

smartsmile2012

于 2024-01-21 07:42:17 发布

阅读量360

点赞数 9

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

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

版权

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

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程024 - three.js通过自定义曲线和自定义形状绘制面具</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 myScene = new THREE.Scene();
        var myPointLight = new THREE.PointLight('white');
        myPointLight.position.set(320, 200, 400);
        myScene.add(myPointLight);
        var myCamera = new THREE.PerspectiveCamera(45, 1, 1, 1000);
        myCamera.position.set(200, 200, 200);
        myCamera.up.x = -1;
        myCamera.up.y = 1;
        myCamera.up.z = -1;
        myCamera.lookAt({ x: 0, y: 0, z: 0 });
        //绘制自定义平面图形
        var myShape = new THREE.Shape();
        //设置起点位置
        myShape.moveTo(20, 10);
        //从起点绘制直线到(20, 40)
        myShape.lineTo(20, 40);
        //绘制贝塞尔曲线
        myShape.bezierCurveTo(15, 25, -5, 25, -30, 40);
        //绘制曲线通过指定的三个点
        myShape.splineThru([new THREE.Vector2(-22, 30),
        new THREE.Vector2(-18, 20), new THREE.Vector2(-20, 10),]);
        //绘制二次曲线
        myShape.quadraticCurveTo(0, -15, 20, 10);
        //绘制椭圆(眼睛)
        var myAbsellipse1 = new THREE.Path();
        myAbsellipse1.absellipse(6, 20, 2, 3, 0, Math.PI * 2, true);
        myShape.holes.push(myAbsellipse1);
        //绘制椭圆(眼睛)
        var myAbsellipse2 = new THREE.Path();
        myAbsellipse2.absellipse(-10, 20, 2, 3, 0, Math.PI * 2, true);
        myShape.holes.push(myAbsellipse2);
        //绘制半圆弧(嘴巴)
        var myAbsarc = new THREE.Path();
        myAbsarc.absarc(0, 5, 2, 0, Math.PI, true);
        myShape.holes.push(myAbsarc);
        //设置在y轴方向拉伸图形
        var myCurve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 1, 0)]);
        //创建拉伸之后的平面图形
        var myGeometry = new THREE.ExtrudeGeometry(myShape, { extrudePath: myCurve });
        var myMaterial = new THREE.MeshPhongMaterial({ color: 'cyan' });
        var myMesh = new THREE.Mesh(myGeometry, myMaterial);
        myMesh.translateX(-50);
        myMesh.translateZ(-200);
        myMesh.translateY(-150);
        myMesh.scale.y = 6;
        myMesh.scale.x = 6;
        myMesh.scale.z = 6;
        myScene.add(myMesh);
        //渲染自定义平面图形
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
        var myOrbitControls = new THREE.OrbitControls(myCamera);
        myOrbitControls.enableRotate =true; //启用旋转
        myOrbitControls.enablePan = true; //启用平移
        myOrbitControls.enableZoom =true; //启用缩放
    </script>
</body>

</html>