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

19. Three.js案例-创建一个带有纹理映射的旋转平面

19. Three.js案例-创建一个带有纹理映射的旋转平面

实现效果

效果

知识点

WebGLRenderer (WebGL渲染器)

WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。

构造器
new THREE.WebGLRenderer(parameters)
参数类型描述
parametersobject可选参数对象,用于配置渲染器的各种属性。常用参数包括:
antialiasbool是否开启抗锯齿,默认为 false。开启后可以提高图像质量,但会增加性能消耗。
方法
  • setSize(width, height): 设置渲染器的尺寸。
  • render(scene, camera): 渲染指定的场景和相机。

Scene (场景)

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

构造器
new THREE.Scene()
属性
  • background: 场景的背景颜色或环境贴图。

PerspectiveCamera (透视相机)

PerspectiveCamera 是 Three.js 中用于模拟人眼视角的相机类。

构造器
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数类型描述
fovfloat视野角度,单位为度。
aspectfloat相机的宽高比,通常设置为 window.innerWidth / window.innerHeight
nearfloat近裁剪面距离,小于该距离的对象不会被渲染。
farfloat远裁剪面距离,大于该距离的对象不会被渲染。
方法
  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向。

AmbientLight (环境光)

AmbientLight 是 Three.js 中用于模拟环境光的光源类。环境光会使场景中的所有物体均匀受光。

构造器
new THREE.AmbientLight(color, intensity)
参数类型描述
colorcolor光源的颜色,可以是十六进制颜色值或颜色名称。
intensityfloat光源的强度,默认为 1。

PlaneGeometry (平面几何体)

PlaneGeometry 是 Three.js 中用于创建平面几何体的类。

构造器
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数类型描述
widthfloat平面的宽度。
heightfloat平面的高度。
widthSegmentsint水平方向上的分段数,默认为 1。
heightSegmentsint垂直方向上的分段数,默认为 1。

Mesh (网格)

Mesh 是 Three.js 中用于组合几何体和材质的类。

构造器
new THREE.Mesh(geometry, material)
参数类型描述
geometryobject几何体对象。
materialobject材质对象。

MeshPhongMaterial (Phong材质)

MeshPhongMaterial 是 Three.js 中用于创建 Phong 照明模型的材质类。

构造器
new THREE.MeshPhongMaterial(parameters)
参数类型描述
maptexture纹理贴图。
sideconstant渲染面的显示方式,可选值为 THREE.FrontSideTHREE.BackSideTHREE.DoubleSide

ImageUtils (图像工具)

ImageUtils 是 Three.js 中用于加载和处理图像的工具类。

方法
  • loadTexture(url): 加载指定 URL 的图像并返回一个 Texture 对象。

动画

requestAnimationFrame 是浏览器提供的 API,用于请求浏览器在下一次重绘之前调用指定的回调函数。

方法
  • requestAnimationFrame(callback): 请求浏览器在下一次重绘之前调用指定的回调函数。

示例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script src="ThreeJS/three.js"></script><script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>// 创建渲染器var myRenderer = new THREE.WebGLRenderer({antialias: true});myRenderer.setSize(window.innerWidth, window.innerHeight);$("#myContainer").append(myRenderer.domElement);// 创建场景var myScene = new THREE.Scene();myScene.background = new THREE.Color('white');// 创建相机var myCamera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 1, 1000);myCamera.position.set(0, 0, 400);myScene.add(myCamera);// 添加环境光myScene.add(new THREE.AmbientLight(0xffffff));// 创建平面var myPlaneGeometry = new THREE.PlaneGeometry(160, 240, 5, 5);var myMap = THREE.ImageUtils.loadTexture("images/img137.jpg");var myPlane = new THREE.Mesh(myPlaneGeometry,new THREE.MeshPhongMaterial({map: myMap, side: THREE.DoubleSide}));myScene.add(myPlane);// 渲染平面animate();function animate() {myRenderer.render(myScene, myCamera);myPlane.rotation.y += 0.01;requestAnimationFrame(animate);}
</script>
</body>
</html>

演示链接

示例链接

http://www.lryc.cn/news/499972.html

相关文章:

  • ASP.NET|日常开发中常用属性详解
  • vscode CMakeLists中对opencv eigen的引用方法
  • 使用Goland对6.5840项目进行go build出现异常
  • Plugin - 插件开发06_开源项目JPom中的插件实现机制
  • 关于成功插入 SQLite 但没有数据的问题
  • 单片机+Qt上位机
  • C++ 类和对象(中)
  • 在做题中学习(79):最小K个数
  • spark3 sql优化:同一个表关联多次,优化方案
  • JavaWeb学习(4)(四大域、HttpSession原理(面试)、SessionAPI、Session实现验证码功能)
  • Ubuntu22.04系统源码编译OpenCV 4.10.0(包含opencv_contrib)
  • 【Unity高级】在编辑器中如何让物体围绕一个点旋转固定角度
  • 2024.11.29——[HCTF 2018]WarmUp 1
  • AGameModeBase和游戏模式方法
  • Swift 扩展
  • 【NebulaGraph】官方查询语言nGQL教程1 (四)
  • 阿里云负载均衡SLB实践
  • 鸿蒙技术分享:❓❓[鸿蒙应用开发]怎么更好的管理模块生命周期?
  • 深度解析 Ansible:核心组件、配置、Playbook 全流程与 YAML 奥秘(上)
  • LabVIEW气缸摩擦力测试系统
  • Leetcode. 688骑士在棋盘上的概率
  • TCP/IP 协议栈高效可靠的数据传输机制——以 Linux 4.19 内核为例
  • Ubuntu22.04搭建LAMP环境(linux服务器学习笔记)
  • 鸿蒙面试---1208
  • java基础教程第16篇( 正则表达式)
  • Docker部署的gitlab升级的详细步骤(升级到17.6.1版本)
  • 【如何制定虚拟货币的补仓策略并计算回本和盈利】
  • 给图像去除水印攻
  • Linux之封装线程库和线程的互斥
  • PH热榜 | 2024-12-08