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

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

news 2025/9/17 13:04:53

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/9/15 5:20:27

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码思路进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...

编程新知 2025/9/16 1:45:49

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

剑指offer20_链表中环的入口节点

链表中环的入口节点给定一个链表，若其中包含环，则输出环的入口节点。若其中不包含环，则输出null。数据范围节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。节点 val 值各不相同。链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/8/22 22:30:54

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。二、服务端模块设计目标高内聚低耦合：各模块职责清晰，便于独立开发…...

编程新知 2025/9/13 8:23:57

2025季度云服务器排行榜

在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...

编程新知 2025/9/16 11:56:01

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...

编程新知 2025/9/2 5:09:11

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。步骤如下： 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载，下载地址：https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2025/9/4 22:48:54

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

PointLight (点光源)

构造器

方法

Shape (形状)

构造器

方法

ExtrudeGeometry (拉伸几何体)

构造器

Mesh (网格)

构造器

方法

MeshPhongMaterial (网格Phong材质)

构造器

OrbitControls (轨道控制器)

构造器

方法

代码

演示链接

相关文章：