ThreeJs绘制贝塞尔曲线

简介: 这篇文章介绍了如何利用Three.js绘制贝塞尔曲线,并提供了实现的代码示例与说明。

之前有讲过用ThreeJs绘制曲线,这节讲绘制贝塞尔曲线,之前的曲线只是将多个点用平滑的曲线连接起来,,贝塞尔曲线是经过p1、p3两个点,但是不经过p2点,贝塞尔曲线与直线p12和p23相切。是数学书经常用到的一种曲线。它需要使用的组件是QuadraticBezierCurve3,Threejs中贝塞尔曲线由多种,有二维二次,三维二次,二维三次,三维三次四种,区别就是是否有z轴坐标也就是平面还是立体的,以及是三个点组成的还是四个点组成的。这节讲的是三维二次的,也就是三个点组成的三维贝塞尔曲线,下面是代码,代码上都有注释,为了方便看点的位置,我在每个点的位置放置了一个物体。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入three.js,这是使用three必须的js文件,此处引入的是外网提供的three文件,如果引入有问题可以到官网下载three文件后引入本地的theee.js文件-->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="./ThreeJs/js/OrbitControls.js"></script>

<body>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 相机设置
     */
    //窗口宽度
    var width = window.innerWidth;
    //窗口高度
    var height = window.innerHeight;
    //窗口宽高比
    var k = width / height;
    //三维场景显示范围控制系数,系数越大,显示的范围越大
    var s = 100;
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
    //设置相机位置
    camera.position.set(0, 0, 1000);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 光源设置
     */
        //新建点光源(常用光源分为点光源和环境光,点光源的效果类似灯泡,环境光的效果类似白天的太阳光)
    var point = new THREE.PointLight(0xffffff);
    //设置点光源的位置
    point.position.set(400, 200, 300);
    //将点光源添加到场景中
    scene.add(point);

    /**
     * --建一个范围的物体,一般可以是场景的地板---
     */
    var geometry = new THREE.BoxGeometry(1000, 1000, 1);
    //给几何体创建材质,这里是改为蓝色,材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color: 0xFFFFFF 
    });
    //网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);
    //网格模型添加到场景中,每个模型最终都要添加到场景中才会被渲染
    mesh.name='map'
    scene.add(mesh);


    /** 根据三个点绘制三维二次贝塞尔曲线**/
    // p1、p2、p3表示三个点坐标
    const p1 = new THREE.Vector3(-80, 0, 5);
    const p2 = new THREE.Vector3(20, 80, 5);
    const p3 = new THREE.Vector3(60, 0, 5);

    //给点添加一个圆柱形标记

    const material3 = new THREE.MeshPhongMaterial({
        color: '#FF0000',
    });
    let geometry2 = new THREE.CylinderGeometry(5, 5, 2);
    const cube1 = new THREE.Mesh(geometry2, material3); //网格模型对象Mesh
    cube1.position.set(-80, 0, 5)
    cube1.rotateX(Math.PI/2)
    scene.add(cube1);
    //给点添加一个圆柱形标记
    let geometry3 = new THREE.CylinderGeometry(5, 5, 2);
    const cube2 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    cube2.position.set(20, 80, 5)
    cube2.rotateX(Math.PI/2)
    scene.add(cube2);
    //给点添加一个圆柱形标记
    let geometry4 = new THREE.CylinderGeometry(5, 5, 2);
    const cube3 = new THREE.Mesh(geometry4, material3); //网格模型对象Mesh
    cube3.position.set(60, 0, 5)
    cube3.rotateX(Math.PI/2)
    scene.add(cube3);

    //根据三个点组建贝塞尔组建对象
    const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);
    //贝斯尔曲线由50个点连成的平滑曲线,点数越多越平滑
    let points = curve.getPoints( 50 )
    let geometry1 = new THREE.BufferGeometry().setFromPoints( points );
    const material2 = new THREE.PointsMaterial({
      color: 0xff00ff,
    });
    const line = new THREE.Line(geometry1, material2);
    scene.add(line)

    /**
     * 创建渲染器对象
     */
    //创建渲染器对象(渲染要等所有东西都加进去再渲染场景,创建和3D模型和光源没有先后顺序)
    var renderer = new THREE.WebGLRenderer({ antialias: true });
    //设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
    renderer.setSize(width, height);
    //设置渲染的背景色
    renderer.setClearColor(0xb9d3ff, 1);
    //body元素中插入canvas对象,也可以在页面中添加div,并加上id,通过id指定在某个div中渲染
    document.body.appendChild(renderer.domElement);

    //循环渲染
    function render() {
        //执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        // 使用 requestAnimationFrame 函数安排下一次渲染
        requestAnimationFrame(render);
        //修改正方体网格的x轴旋转角度
    }
    //执行渲染
    render()

    //创建鼠标控制器    
    let controls = new THREE.OrbitControls(camera, renderer.domElement );
    //controls.enableDamping = false;
    //监听控制器,每次拖动后重新渲染画面
    controls.addEventListener('change', function () {
        renderer.render(scene, camera); //执行渲染操作
    });

    //通过射线获取点击位置与第一个接触物体的交点
    function getAddress(evt){
        evt.preventDefault();
        let vector = new THREE.Vector3();//三维坐标对象
        vector.set(
        ((evt.offsetX) / window.innerWidth) * 2 - 1,
        -((evt.offsetY) / window.innerHeight) * 2 + 1,
        0.5);
        vector.unproject(camera);
        let raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
        let intersects = raycaster.intersectObjects(scene.children);
        let selected = intersects[0];//intersects是射线沿着摄像机机镜头的方向穿过的所有物体,这里取第一个物体
        return selected.point;
    }

    document.addEventListener('click', getAddress, false)

</script>
</body>
</html>

效果图 1691898155677.jpg 以上如有问题可以在评论里给我留言

相关文章
|
12月前
Threejs实现动画
这篇文章讲解了如何使用Three.js实现动画效果,并介绍了如何控制动画的时间轴。
258 3
Threejs实现动画
|
12月前
ThreeJs制作管道中水流效果
这篇文章详细介绍了如何在Three.js中创建具有动态水流效果的管道模型,通过纹理贴图的移动来模拟水流的视觉效果。
790 2
ThreeJs制作管道中水流效果
|
12月前
ThreeJs创建球体
这篇文章讲解了如何在Three.js中创建并添加一个球体到场景中,包括定义球体的几何形状、赋予材质以及最终渲染球体的过程。
323 1
|
12月前
Threejs创建正多边体
这篇文章介绍了在Three.js中创建正多边形体(如正四面体、正八面体等)的方法,包括生成多边形几何体、设置表面材质以及将它们添加到场景中的步骤。
243 1
Threejs创建正多边体
|
12月前
threeJs绘制曲线
这篇文章讲解了如何使用Three.js中的CatmullRomCurve3来绘制平滑的曲线,并提供了实现的代码示例。
166 3
threeJs绘制曲线
|
12月前
|
开发者
ThreeJs实现小球自由落体效果
这篇文章详细介绍了如何在Three.js中利用物理引擎Cannon.js实现小球自由落体效果,包括物理世界的创建、物体的添加及同步物理状态到三维场景中的具体实现。
180 3
ThreeJs实现小球自由落体效果
|
12月前
ThreeJs添加拖动辅助线
这篇文章介绍了在Three.js中使用TransformControls组件来添加拖动辅助线,实现对3D模型在不同轴向上进行直观的拖动和平移操作。
387 0
|
12月前
|
图形学
Pixi入门第三章:绘制更多内容
这篇文章作为Pixi.js入门教程的第三章,介绍了如何使用鼠标事件(如mousemove)来实现在画布上绘制线条的功能,并提供了实现动态绘制的代码示例。
200 0
|
12月前
|
图形学
ThreeJs创建管道效果
这篇文章介绍了在Three.js中创建管道(Tube)效果的方法和技术细节。
345 3
ThreeJs创建管道效果
|
12月前
|
存储 JavaScript
ThreeJS创建关键帧动画
这篇文章讲解了如何在Three.js中利用关键帧轨道 (`KeyframeTrack`) 创建动画效果,并提供了详细的步骤和代码示例。
239 0