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

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

news 2026/4/4 16:11:09

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

初创公司 0 代码上线 App：UXbot 全流程实战

非技术背景的初创公司创始人，可以使用 UXbot 这款 AI 无代码应用构建工具，在无需设计师和工程师介入的情况下，独立完成从产品需求描述到 Android APK 真机安装的完整链路。整个过程分为 5 个步骤，核心耗时约半天，输出物…...

编程新知 2026/4/4 16:10:21

OpenCV需要的Numpy知识

图像 NumPy 数组彩色图：(高度, 宽度, 3)灰度图：(高度, 宽度)像素值：0~255，类型 uint8下面所有内容，都围绕这句话。1. 创建数组1.1 np.array () —— 把列表变成数组import numpy as np a np.array([1, 2, 3]) b …...

编程新知 2026/4/4 14:00:28

VS2019下C++与MinIO实战：文件上传下载避坑指南（附编译包）

VS2019下C与MinIO深度集成：从环境配置到高效文件管理的完整实践最近在重构一个企业级文件管理系统时，我面临将Java文件服务迁移到C的技术挑战。经过多轮技术选型，MinIO以其轻量级、高性能的特性成为理想选择。但在实际集成过程中&#xff0c…...

编程新知 2026/4/4 12:20:37

如何快速提升游戏效率：英雄联盟智能工具完整指南

如何快速提升游戏效率：英雄联盟智能工具完整指南【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 还在为英雄联盟游戏中的繁琐操作和…...

编程新知 2026/4/4 12:18:37

OpenClaw智能写作：Qwen3.5-9B根据截图生成技术博客

OpenClaw智能写作：Qwen3.5-9B根据截图生成技术博客 1. 为什么需要截图转技术博客的自动化方案作为一名经常需要写技术文档的开发者和技术博主，我长期被两个问题困扰：一是截取了大量代码片段和报错信息后，整理成文章需要耗费大量…...

编程新知 2026/4/4 12:14:33

华硕笔记本性能控制终极指南：如何用G-Helper替代臃肿的Armoury Crate

华硕笔记本性能控制终极指南：如何用G-Helper替代臃肿的Armoury Crate 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, …...

编程新知 2026/4/4 12:10:26

重构学术文档翻译：PDFMathTranslate如何突破格式保留与公式处理技术瓶颈

重构学术文档翻译：PDFMathTranslate如何突破格式保留与公式处理技术瓶颈【免费下载链接】PDFMathTranslate PDF scientific paper translation with preserved formats - 基于 AI 完整保留排版的 PDF 文档全文双语翻译，支持 Google/DeepL/Ollama/OpenAI…...

编程新知 2026/4/4 11:40:07

个人博客域名迁移说明 www.xiaoming.io

因为之前很多文章和插图都链接到了个人博客，一些读者评论和私信反馈链接有问题，图片不显示，这里特地说明如下：个人博客域名从原先的 www.hainter.com 改成了 www.xiaoming.io。例如文章中有链接 http://www.hainter.com/books 不能…...

编程新知 2026/4/4 10:49:35

FunASR语音识别镜像亲测：支持中英日韩粤语，一键生成字幕和文本

FunASR语音识别镜像亲测：支持中英日韩粤语，一键生成字幕和文本 1. 引言 1.1 为什么选择FunASR 作为一名长期关注语音技术的开发者，我一直在寻找一个既强大又易用的语音识别解决方案。FunASR作为阿里达摩院开源的语音识别工具包&#xff0c…...

编程新知 2026/4/4 10:15:28

Qwen3-0.6B-FP8轻量化部署对比：FP8量化带来的显存与速度优势实测

Qwen3-0.6B-FP8轻量化部署对比：FP8量化带来的显存与速度优势实测最近在折腾一些小模型的部署，发现了一个挺有意思的东西：Qwen3-0.6B的FP8量化版本。你可能听说过FP16，甚至INT8量化，但FP8这个新玩意儿，到底…...

编程新知 2026/4/4 9:39:05

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

PointLight (点光源)

构造器

方法

Shape (形状)

构造器

方法

ExtrudeGeometry (拉伸几何体)

构造器

Mesh (网格)

构造器

方法

MeshPhongMaterial (网格Phong材质)

构造器

OrbitControls (轨道控制器)

构造器

方法

代码

演示链接

相关文章：