threejs之圆弧

news2024/11/13 15:34:54

文章目录

  • 弧线
    • 相关方法
      • getPoints
      • setFromPoints
  • 直线
  • 样条曲线与贝塞尔曲线
    • 样条曲线
    • 贝塞尔曲线

专栏目录请点击

弧线

  • 一般我们绘制弧线都会使用ArcCurve来进行绘制,他是EllipseCurve的别名,关于他的所有的方法,我们都可以看EllipseCurve 官网
  • 例子
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建线条模型
         */
        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
        //参数:0, 0圆弧坐标原点x,y  100:圆弧半径    0, 2 * Math.PI:圆弧起始角度
        var arc = new THREE.ArcCurve(0, 0, 100, 0, 2 * Math.PI);
        //getPoints是基类Curve的方法,返回一个vector2对象作为元素组成的数组
        var points = arc.getPoints(50);//分段数50,返回51个顶点
        // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
        geometry.setFromPoints(points);
        console.log(geometry.vertices);
        // 如果几何体是BufferGeometry,setFromPoints方法改变的是.attributes.position属性
        // console.log(geometry.attributes.position);
        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0x000000
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line); //线条对象添加到场景中
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化,改变相机对象的属性
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果
        controls.addEventListener('change', render);
    </script>
</body>

</html>

渲染出来的效果如下

在这里插入图片描述

相关方法

getPoints

  • 他是基类Curve的方法,而EllipseCurve的基类就是Curve
  • 他的作用是圆弧线按照一定的细分精度返回相应的顶点坐标,细分数越高,返回的顶点就越多,自然的轮廓就越接近圆形
  • 他返回的是一个由二维向量或者三维向量组成的数组
var points = arc.getPoints(50);//分段数50,返回51个顶点

setFromPoints

  • 他是几何体Geometry的方法,通过该方法就可以把数组points的顶点数据提取出来复制给几何体的顶点位置属性geometry.vertices
  • 同样缓冲几何体也有setFromPoints方法,不过他是将顶点数据赋值给geometry.attributes.position

直线

  1. 当我们进行话直线的时候,首先要确定两点
var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
//顶点坐标添加到geometry对象
geometry.vertices.push(p1, p2);
  1. 然后我们给他材质,然后添加到场景中
var material = new THREE.LineBasicMaterial({
  color: 0xffff00,
});//材质对象
//线条模型对象
var line = new THREE.Line(geometry, material);
scene.add(line); //线条对象添加到场景中
  1. 为了能看清楚两端,我们还可以给他添加点模型
// 点模型
var material = new THREE.PointsMaterial({
  color: 0xff00ff,
  size:5,
});
//点模型对象
var points = new THREE.Points(geometry, material);
scene.add(points); //点模型对象添加到场景中

渲染出来是这样的

在这里插入图片描述
此外还有三维直线和二维直线

样条曲线与贝塞尔曲线

样条曲线

样条曲线一般用于不规则的曲线

在threejs中已经有相应的接口CatmullRomCurve3,供我们创建一条平滑的曲线,他是利用Catmull-Rom算法来绘制的平滑的曲线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建线条模型
         */
        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
        // 三维样条曲线  Catmull-Rom算法
        var curve = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-50, 20, 90),
            new THREE.Vector3(-10, 40, 40),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(60, -60, 0),
            new THREE.Vector3(70, 0, 80)
        ]);
        // var box = new THREE.BoxGeometry(100, 100, 100);
        // var curve = new THREE.CatmullRomCurve3(box.vertices);
        //getPoints是基类Curve的方法,返回一个vector3对象作为元素组成的数组
        var points = curve.getPoints(100); //分段数100,返回101个顶点
        // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
        geometry.setFromPoints(points);
        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0x000000
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line); //线条对象添加到场景中
        // scene.add(new THREE.Line(box));//线条模式渲染立方体
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化,改变相机对象的属性
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果
        controls.addEventListener('change', render);
    </script>
</body>

</html>

渲染如图
在这里插入图片描述

  • 在代码中我们只给了五个点,然后就他就可以通过算法渲染出一条曲线

贝塞尔曲线

贝塞尔曲线与样式曲线不同的是贝塞尔曲线会有控制点的概念

在这里插入图片描述
四个控制点会形成这样一条曲线,代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建线条模型
         */
        var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

        var p1 = new THREE.Vector3(-80, 0, 0);
        var p2 = new THREE.Vector3(-40, 100, 0);
        var p3 = new THREE.Vector3(40, 100, 0);
        var p4 = new THREE.Vector3(80, 0, 0);
        // 三维三次贝赛尔曲线
        var curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);
        //getPoints是基类Curve的方法,返回一个vector3对象作为元素组成的数组
        var points = curve.getPoints(100); //分段数100,返回101个顶点
        // setFromPoints方法从points中提取数据改变几何体的顶点属性vertices
        geometry.setFromPoints(points);
        //材质对象
        var material = new THREE.LineBasicMaterial({
            color: 0x000000
        });
        //线条模型对象
        var line = new THREE.Line(geometry, material);
        scene.add(line); //线条对象添加到场景中

        // 点模型
        var geometry2 = new THREE.Geometry();
        geometry2.vertices.push(p1, p2, p3, p4)
        var material2 = new THREE.PointsMaterial({
            color: 0xff00ff,
            size: 10,
        });
        //点模型对象
        var points = new THREE.Points(geometry2, material2);
        scene.add(points); //点模型对象添加到场景中
        scene.add(new THREE.Line(geometry2, material2));
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数,系数越大,显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        // camera.position.set(200, 300, 200); //设置相机位置
        camera.position.set(0, 0, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化,改变相机对象的属性
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //监听鼠标事件,触发渲染函数,更新canvas画布渲染效果
        controls.addEventListener('change', render);
    </script>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/99324.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Linux网络协议之UDP协议(传输层)

Linux网络协议之UDP协议(传输层) 文章目录Linux网络协议之UDP协议(传输层)1.深入理解传输层1.1 对于端口号的理解1.2 端口号范围1.3 常用的知名端口号1.4 进程和端口号的两个问题1.5 查看网络状态命令(netstat)2.UDP协议2.1 UDP协议格式2.2 UDP的特点2.3 面向数据报2.4 UDP的缓…

基于nodejs仿京东商城系统的设计与实现.zip(论文+源码+ppt文档+视频录制)

第一章绪论 3 1.1项目开发的背景和意义 3 1.2国内外研究的现状 3 1.3研究的主要内容 4 第2章系统相关技术介绍 4 2.1 相关技术介绍 4 2.2 系统环境开发条件 5 第三章系统分析 6 3.1可行性分析 6 3.1.1技术性可行性 6 3.1.2经济性可行性 6 3.1.3操作性可行性 7 3.2功能需求分析 …

(Java)【深基9.例1】选举学生会

【深基9.例1】选举学生会 一、题目描述二、输入格式三、输出格式四、样例输入五、样例输出六、失败经历七、正确代码八、正确思路及易错点&#xff08;1&#xff09;题目分析&#xff08;2&#xff09;思路分析&#xff08;3&#xff09;StringBuffer: 线程安全的可变字符串①S…

二十四、CANdelaStudio深入-ExtData编辑

本专栏将由浅入深的展开诊断实际开发与测试的数据库编辑,包含大量实际开发过程中的步骤、使用技巧与少量对Autosar标准的解读。希望能对大家有所帮助,与大家共同成长,早日成为一名车载诊断、通信全栈工程师。 本文介绍CANdelaStudio的ExtData编辑,欢迎各位朋友订阅、评论,…

推荐系统学习笔记-deep crossing

由来 2016年由微软提出&#xff0c; 完整的解决了特征工程、稀疏向量稠密化&#xff0c; 多层神经网络进行优化目标拟合等一系列深度学习在推荐系统的应用问题。 这个模型涉及到的技术比较基础&#xff0c;在传统神经网络的基础上加入了embedding&#xff0c; 残差连接等思想&…

K8s CICD实战

K8s Network之Ingress PDF路径: 链接&#xff1a;https://pan.baidu.com/s/17DxUD8KN7pU1UKIR1Ejemg 提取码&#xff1a;dwf5 一、如果项目需要修改某些代码&#xff0c;怎么办&#xff1f; &#xff08;1&#xff09;重新打成jar包 &#xff08;2&#xff09;重新制作Dockerf…

javaSE - 异常(Exception 或 RuntimeException)

一、异常的背景 1.1、初识异常 其实在我们开发中&#xff0c;就是代码出现意外状况。影响到程序的运行。 其实&#xff0c;在我们接触代码开始&#xff0c;就一直在接触异常&#xff0c;只是从来没有分类。 这点在java中&#xff0c;更加明显。 现在我们就来基本了解一下异常。…

web靶场搭建之帝国cms7.5

目录 一、漏洞描述 二、漏洞环境 三、环境搭建 四、漏洞复现 后台getshell(CVE-2018-18086) 漏洞原理&#xff1a; 漏洞复现&#xff1a; 源码审计&#xff1a; 代码注入 (CVE-2018-19462) 漏洞原理&#xff1a; 漏洞复现&#xff1a; 源码审计&#xff1a; 后台X…

Innodb存储引擎-表(逻辑存储结构、行记录格式、数据页结构)

文章目录表索引组织表InnoDB逻辑存储结构表空间(tablespace)段(segment)区(extent)页(page)行(record)行记录格式compactRedundant行溢出数据Compressed 和 Dynamic 行记录格式CHAR的行结构存储数据页结构File Header & Page Header & File TrailerInfimum 和 Supremum…

springboot《1》

map的映射 package com.kob.backend.controller.pk;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import java.util.HashMap; import java.util.Map;RestControllerRequestMapping("…

国产软件的「硬替代」与「软着陆」之辨

作者 | 曾响铃 文 | 响铃说 疫情倒逼、政策驱动、市场化博弈、国际形势拉锯等等一系列的因素正在综合影响国产软件的走势。在国内&#xff0c;国产软件替代化进程持续加速&#xff0c;国产软件正迎来逆势增长的“窗口期”。 与此同时&#xff0c;从中央到地方&#xff0c;政…

项目中pom.xml文件变灰且中间有横杠改怎么解决?

目录 问题描述: 问题解决&#xff1a; &#x1f49f; 创作不易&#xff0c;不妨点赞&#x1f49a;评论❤️收藏&#x1f499;一下 问题描述: 项目中的部分pom.xml文件是没问题的&#xff0c;部分pom.xml文件没有被识别&#xff0c;变灰且有横杠。 原因&#xff1a;操作的时…

力扣(LeetCode)163. 缺失的区间(C++)

模拟 将 lowerlowerlower 和 upperupperupper 加入数组&#xff0c;避免边界判断。 一次遍历&#xff0c;相邻元素差 111 &#xff0c;无缺失&#xff1b;相邻元素差 222 &#xff0c;缺失中间的一个数&#xff1b;相邻元素相差大于 222 &#xff0c;缺失中间一段数。根据格式…

Less知识点整理

Less 官方文档 在线Less编译工具 Less主要语法 1、变量xxx 2、嵌套 规则嵌套和冒泡 规则&#xff08;例如 media 或 supports&#xff09;可以与选择器以相同的方式进行嵌套。 规则会被放在前面&#xff0c;同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡&#xff08…

计算机毕设Python+Vue新能源汽车销售管理系统(程序+LW+部署)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Oracle21C:Windows版本的安装、卸载、环境变量配置、避坑指南|ORA-12514|为什么安装目录没有bin目录

前言 1、适读对象 安装Oracle21C过程中&#xff0c;被各种报错反复折磨&#xff0c;终不得其法&#xff0c;难以正常使用Oracle。 2、各种工具下载 1&#xff09;Oracle下载地址&#xff1a;官网下载页面 2&#xff09;navecat下载地址&#xff1a;navecate 2&#xff09;sqlp…

基于JAVAWEB的湛江海鲜批发选购系统

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a;

1W字文:什么是 回表查询、索引覆盖、最左匹配原则?聚集索引、非聚集索引的区别?

文章很长&#xff0c;而且持续更新&#xff0c;建议收藏起来&#xff0c;慢慢读&#xff01;疯狂创客圈总目录 博客园版 为您奉上珍贵的学习资源 &#xff1a; 免费赠送 :《尼恩Java面试宝典》 持续更新 史上最全 面试必备 2000页 面试必备 大厂必备 涨薪必备 免费赠送 经典…

超市进销存系统的设计与实现

开发工具(eclipse/idea/vscode等)&#xff1a; 数据库(sqlite/mysql/sqlserver等)&#xff1a; 功能模块(请用文字描述&#xff0c;至少200字)&#xff1a; 该小型超市进销存系统主要针对模块管理&#xff0c;用户管理&#xff0c;进货管理&#xff0c;销售管理&#xff0c; 库…

HTTP 协议详解

目录 前言 1、HTTP 介绍 2、URL介绍 1&#xff09;了解 URL 和 URI 2&#xff09;URL 格式 3&#xff09;URL encode 3、HTTP 协议格式 1&#xff09;请求报文格式 2&#xff09;响应报文格式 3&#xff09;协议格式总结 4、HTTP 请求&#xff08;Request&#xff0…