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

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

news 2026/2/10 9:02:10

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

使用VSCode开发Django指南

使用VSCode开发Django指南一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

Unity3D中Gfx.WaitForPresent优化方案

前言在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制您好，我是鹤九日！ 回顾在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。我们简单讲…...

编程新知 2026/1/30 12:10:19

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录一、SQL注入二、insert注入三、报错型注入四、updatexml函数五、源码审计六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

Redis：现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...

编程新知 2025/11/15 1:41:43

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解一、事务的核心概念（ACID） 事务是…...

编程新知 2025/9/19 22:12:36

人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent

安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集描…...

编程新知 2026/2/5 8:48:10

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2026/1/23 18:15:21

云原生安全实战：API网关Envoy的鉴权与限流详解

🔥「炎码工坊」技术弹药已装填！ 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】一、基础概念 1. API网关作为微服务架构的统一入口，负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2026/2/10 5:10:12

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

实现效果

知识点

WebGLRenderer (WebGL渲染器)

构造器

方法

PerspectiveCamera (透视相机)

构造器

方法

Scene (场景)

构造器

方法

PointLight (点光源)

构造器

方法

Shape (形状)

构造器

方法

ExtrudeGeometry (拉伸几何体)

构造器

Mesh (网格)

构造器

方法

MeshPhongMaterial (网格Phong材质)

构造器

OrbitControls (轨道控制器)

构造器

方法

代码

演示链接

相关文章：