当前位置：首页 > news >正文

28. Three.js案例-创建圆角矩形并进行拉伸

news 2025/6/19 20:58:51

28. Three.js案例-创建圆角矩形并进行拉伸

实现效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。

构造器

WebGLRenderer( parameters : Object )

参数	类型	描述
parameters	Object	渲染器的配置参数，可选。

常用参数：

antialias：布尔值，是否开启抗锯齿，默认为 false。
alpha：布尔值，是否允许透明，默认为 false。
precision：字符串，指定着色器的精度，可选值为 low, medium, high。

方法

setSize(width, height): 设置渲染器的尺寸。
setClearColor(color, alpha): 设置渲染器的背景颜色和透明度。

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于创建透视投影相机的对象。

构造器

PerspectiveCamera(fov, aspect, near, far)

参数	类型	描述
fov	Number	视野角度，单位为度。
aspect	Number	相机的宽高比。
near	Number	近裁剪面距离。
far	Number	远裁剪面距离。

方法

position.set(x, y, z): 设置相机的位置。
lookAt(vector): 设置相机的朝向。

Scene (场景)

Scene 是 Three.js 中用于存储和管理所有 3D 对象的容器。

构造器

Scene()

方法

add(object): 向场景中添加对象。
remove(object): 从场景中移除对象。

PointLight (点光源)

PointLight 是 Three.js 中用于创建点光源的对象。

构造器

PointLight(color, intensity, distance, decay)

参数	类型	描述
color	Color	光源的颜色。
intensity	Number	光源的强度，默认为 `1`。
distance	Number	光源的最大影响距离，默认为 `0`，表示无限远。
decay	Number	光源的衰减系数，默认为 `1`。

方法

position.set(x, y, z): 设置光源的位置。

Shape (形状)

Shape 是 Three.js 中用于创建自定义 2D 形状的对象。

构造器

Shape(points)

参数	类型	描述
points	Array	一系列 `Vector2` 点，用于定义形状的轮廓。

方法

moveTo(x, y): 移动到指定点。
lineTo(x, y): 从当前点画直线到指定点。
quadraticCurveTo(cpx, cpy, x, y): 从当前点画二次贝塞尔曲线到指定点。

ExtrudeGeometry (拉伸几何体)

ExtrudeGeometry 是 Three.js 中用于创建拉伸几何体的对象。

构造器

ExtrudeGeometry(shape, options)

参数	类型	描述
shape	Shape	要拉伸的 2D 形状。
options	Object	拉伸选项，可选。

常用选项：

depth: 拉伸深度，默认为 100。
bevelEnabled: 是否启用倒角，默认为 true。
bevelThickness: 倒角厚度，默认为 6。
bevelSize: 倒角大小，默认为 1。
bevelOffset: 倒角偏移，默认为 0。
bevelSegments: 倒角段数，默认为 1。
extrudePath: 拉伸路径，可以是一个 Curve 对象。

Mesh (网格)

Mesh 是 Three.js 中用于创建网格对象的类。

构造器

Mesh(geometry, material)

参数	类型	描述
geometry	Geometry	网格的几何体。
material	Material	网格的材质。

方法

translateX(amount): 沿 X 轴移动指定距离。
translateY(amount): 沿 Y 轴移动指定距离。
translateZ(amount): 沿 Z 轴移动指定距离。
scale.set(x, y, z): 设置网格的缩放比例。

MeshPhongMaterial (网格Phong材质)

MeshPhongMaterial 是 Three.js 中用于创建 Phong 着色材质的对象。

构造器

MeshPhongMaterial(parameters)

参数	类型	描述
parameters	Object	材质的配置参数，可选。

常用参数：

color: 材质的颜色。
specular: 高光颜色，默认为 0x111111。
shininess: 高光强度，默认为 30。

OrbitControls (轨道控制器)

OrbitControls 是 Three.js 中用于控制相机旋转、缩放和平移的控制器。

构造器

OrbitControls(camera, domElement)

参数	类型	描述
camera	Camera	控制的相机对象。
domElement	DOMElement	控制器绑定的 DOM 元素。

方法

update(): 更新控制器状态。

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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(320, 200, 400);myScene.add(myPointLight);// 创建圆角矩形var myShape = new THREE.Shape();var x = 0, y = 0, myWidth = 30, myHeight = 40, myRadius = 6;myShape.moveTo(x, y + myRadius);myShape.lineTo(x, y + myHeight - myRadius);myShape.quadraticCurveTo(x, y + myHeight, x + myRadius, y + myHeight);myShape.lineTo(x + myWidth - myRadius, y + myHeight);myShape.quadraticCurveTo(x + myWidth, y + myHeight, x + myWidth, y + myHeight - myRadius);myShape.lineTo(x + myWidth, y + myRadius);myShape.quadraticCurveTo(x + myWidth, y, x + myWidth - myRadius, y);myShape.lineTo(x + myRadius, y);myShape.quadraticCurveTo(x, y, x, y + myRadius);// 设置拉伸圆角矩形的路径var myCurve = new THREE.CatmullRomCurve3([new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 30, 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(100);myMesh.translateZ(100);myMesh.translateY(0);myScene.add(myMesh);// 渲染圆角矩形animate();var step = 0;function animate() {myRenderer.render(myScene, myCamera);step = step + 0.01;var myScale = 2 * Math.sin(step) + 2;myMesh.scale.y = myScale;myMesh.scale.x = 2;myMesh.scale.z = 2;requestAnimationFrame(animate);}// 创建轨道控制器var myOrbitControls = new THREE.OrbitControls(myCamera);
</script>
</body>
</html>

演示链接

示例链接

28. Three.js案例-创建圆角矩形并进行拉伸

28. Three.js案例-创建圆角矩形并进行拉伸实现效果知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数，可选。 …...

编程日记 2024/12/16 9:12:33

Shopee算法分析 - x-sap-ri

去除干扰项在上篇文章中说到, 我们主动调用了几次,返回结果都是不同的相同参数, 我们主动多次call. 可以看到结果是不同的. 只有一个Key不同. 接下来, 引用龙哥的文章引用自龙哥文章, 我仅仅是对关键信息做加粗 1.1 引言在使用 Unidbg 模拟执行以及辅助算法还原时&#x…...

编程日记 2024/12/16 9:10:32

日志相关的学习记录

Logger.error还不知道怎么传参打印？看完这个你就明白了-CSDN博客日志使用的方式使用e.getMessage()、e .toString() 都不会打印堆栈信息，最好直接打印e。当使用两个参数error(String message, Throwable t)，且第二个参数为Throwable(就是…...

编程日记 2024/12/16 9:09:30

HTML和JavaScript实现商品购物系统

下面是一个更全面的商品购物系统示例，包含新增商品、商品的增加删除以及结算找零的功能。这个系统使用HTML和JavaScript实现。 1.功能说明： 这个应用程序使用纯HTML和JavaScript实现。包含一个商品列表和一个购物车区域。商品列表中有几个示例商品&a…...

编程日记 2024/12/16 9:03:19

深度学习中的激活函数

激活函数(activation function)是应用于网络中各个神经元输出的简单变换，为其引入非线性属性，使网络能够对更复杂的数据进行建模，使其能够学习更复杂的模式。如果没有激活函数，神经元只会对输入进行枯燥的线性数学运算。这意味着&…...

编程日记 2024/12/16 9:01:16

编写php项目所需环境

需要编写php项目，需要看到编写的代码展现的效果，这里我选择用xampp来展现准备工作： https://learncodingfast.com/how-to-install-xampp-and-brackets/#Installing_and_Running_XAMPP xampp下载地址：https://www.apachefriends.…...

编程日记 2024/12/16 8:58:12

华为机试HJ108 求最小公倍数

首先看一下题描述正整数A和正整数B 的最小公倍数是指能被A和B整除的最小的正整数值，设计一个算法，求输入A和B的最小公倍数。数据范围： 1≤a,b≤100000 输入描述： 输入两个正整数A和B。输出描述： 输出A和B的最小公…...

编程日记 2024/12/16 8:55:07

【Python技术】同花顺wencai涨停分析基础上增加连板分析

周末，有读者加我， 说之前的涨停分析是否可以增加连板分析。这个可以加上。先看效果这里附上完整代码： import streamlit as st import pywencai import pandas as pd from datetime import datetime, timedelta import plotly.graph_o…...

编程日记 2024/12/16 8:53:01

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五)

《拉依达的嵌入式\驱动面试宝典》—C/CPP基础篇(五) 你好，我是拉依达。感谢所有阅读关注我的同学支持，目前博客累计阅读 27w，关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析（持续更新）-CSDN博客》已经是 Linux驱动相关内容搜索的推荐首位，感谢大家支持。《拉…...

编程日记 2024/12/16 8:52:00

【LeetCode】3356、零数组变换 II

【LeetCode】3356、零数组变换 II 文章目录一、数据结构-差分-一维差分、二分1.1 数据结构-差分-一维差分、二分1.1.1 题意复述1.1.2 思路1.1.3 手写二分1.1.4 sort.Search() 二分1.1.5 sort.Find() 二分二、多语言解法一、数据结构-差分-一维差分、二分 1.1 数据结构-差分…...

编程日记 2024/12/16 8:50:59

Vue 子组件修改父组件传过来的值的三种方式

方式1：子组件发送emit，触发父组件修改父组件 <template><div><son :count"count" updateCount"updateCount" /></div> </template><script> import son from "./son"; export def…...

编程日记 2024/12/16 8:47:55

4.Python 数字类型

Python 数字类型总结文章目录 Python 数字类型总结1. 数字类型概述特点 2. 数字类型的创建与赋值3. 数字类型转换4. 数学运算与函数math 模块cmath 模块 5. 随机数生成6. 三角函数7. 数学常量总结 Python 提供了多种数字类型来存储和操作数值数据。这些类型包括整数、浮点数、…...

编程日记 2024/12/16 8:45:52

MacOs 日常故障排除troubleshooting

1. 关闭开机自启动 app X macOs 15.1 System settings -> General -> Login Items & Extensions->Open at Login -> Select app X and click -...

编程日记 2024/12/16 8:39:41

（补）算法刷题Day19：BM55 没有重复项数字的全排列

题目链接给出一组数字，返回该组数字的所有排列例如： [1,2,3]的所有排列如下 [1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2], [3,2,1]. （以数字在数组中的位置靠前为优先级，按字典序排列输出。） 思路： 使用回…...

编程日记 2024/12/16 8:38:40

先从一个例子说起 type Counter struct {count int }func (c Counter) Inc() {c.count }func test1() {c : Counter{}do : func() {for i : 0; i < 10; i {c.count}fmt.Println("done")}go do()go do()time.Sleep(3 * time.Second)fmt.Println(c.count) }func te…...

编程日记 2024/12/16 8:36:37

linux部署ansible自动化运维

ansible自动化运维 1，编写ansible的仓库（比赛已经安装，无需关注） 1、虚拟机右击---设置---添加---CD/DVD驱动器---完成---确定 2、将ansible.iso的光盘连接上（右下角呈绿色状态） 3、查看光盘挂载信息 df -h…...

编程日记 2024/12/16 8:33:33

docker—私有仓库搭建

docker—私有仓库搭建 HTTP 部署 docker run -d \-p 5000:5000 \--restartalways \--name registry \-v /opt/data/registry:/var/lib/registry \registry:2使用官方的 registry 镜像来启动私有仓库。默认情况下，仓库会被创建在容器的 /var/lib/registry 目录…...

编程日记 2024/12/16 8:32:30

【SpringAOP】深入浅出SpringAOP从原理到源码

AOP对象是如何创建的对于熟悉Spring IOC流程源码的同学来说，一定了解bean的整个生命周期，也就是从实例化、属性填充、初始化三个过程。那么对于Bean 工厂来说，是如何保证需要创建代理的对象创建代理的呢。从图中可以看到，本质…...

编程日记 2024/12/16 8:30:29

Java 从查询超时到性能提升（实战讲解）

目录 1. 问题所示2. 原理分析3. 解决方法3.1 代码优化3.2 索引优化3.3 删数据 1. 问题所示查询返回速度慢，导致前端页面无数据显示前端和后端均未报错，但后端未能在合理时间内返回结果到前端后端没有报错日志 2. 原理分析单独分析代码中的对算法…...

编程日记 2024/12/16 8:29:27

《C 语言携手 PaddlePaddle C++ API：开启深度学习开发新征程》

在深度学习领域，PaddlePaddle 作为一款强大的深度学习框架，为开发者提供了丰富的功能和高效的计算能力。而 C 语言，凭借其高效性和广泛的应用场景，与 PaddlePaddle 的 C API 相结合，能够为深度学习开发带来独特的优势。…...

编程日记 2024/12/16 8:28:26

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/6/17 5:21:30

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/6/17 6:11:16

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/6/16 17:24:42

dify打造数据可视化图表

一、概述在日常工作和学习中，我们经常需要和数据打交道。无论是分析报告、项目展示，还是简单的数据洞察，一个清晰直观的图表，往往能胜过千言万语。一款能让数据可视化变得超级简单的 MCP Server，由蚂蚁集团 AntV 团队…...

编程新知 2025/6/19 16:29:04

html-＜abbr＞缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。示例&#x…...

编程新知 2025/6/17 1:11:13

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...

编程新知 2025/6/15 18:10:15

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识主要参考博文： 一文入门汽车毫米波雷达基本原理 ：https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2025/6/16 13:31:56

Leetcode33（搜索旋转排序数组）

题目表述整数数组 nums 按升序排列，数组中的值互不相同。在传递给函数之前，nums 在预先未知的某个下标 k（0 < k < nums.length）上进行了旋转，使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/6/16 18:00:55

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像在科研研究中，如何展示好看的实验结果图像非常重要！！！ 1、灰度原始图像灰度图像每个像素点只有一个数值，代表该点的亮度（或…...

编程新知 2025/6/19 12:33:25

基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)

引言在嵌入式系统中，用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例，介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单，执行相应操作，并提供平滑的滚动动画效果。本文设计了一个…...

编程新知 2025/6/19 16:01:39

28. Three.js案例-创建圆角矩形并进行拉伸

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

PointLight (点光源)

构造器

方法

Shape (形状)

构造器

方法

ExtrudeGeometry (拉伸几何体)

构造器

Mesh (网格)

构造器

方法

MeshPhongMaterial (网格Phong材质)

构造器

OrbitControls (轨道控制器)

构造器

方法

代码

演示链接

相关文章：