three.js 基础

这篇具有很好参考价值的文章主要介绍了three.js 基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.Three三要素相机,场景,几何体初始化

1.引入Three.js

 import * as THREE from "three";

2.创建场景

 // 1.创建一个场景
 const scene = new THREE.Scene();

3.初始化一个相机

 // 1.创建一个相机
 const camera = new THREE.PerspectiveCamera(75, window, innerWidth / window.innerHeight, 0.1, 1000); // 角度,长宽比.可视近端,可视远端
 // 2.相机的位置设置(x,y,z)坐标位置
 camera.position.set(0,0,100);
 // 3.相机放在场景当中
 scene.add(camera);

4.初始化一个几何体

 // 1.场景添加物体
 // 1.1 创建 长宽高 值为1 的立方体  几何
 const geometry = new THREE.BoxGeometry( 10, 10, 10 );
 // 1.2 给几何体设定材质
 const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
 // 1.3 根据几何体和材质创建物体
 const cube = new THREE.Mesh( geometry, material );
 // 1.4 物体添加到场景中
 scene.add( cube );

5.初始化一个渲染器, 用来通过相机把画面渲染到

 // 7.初始化渲染器
 const renderer = new THREE.WebGL1Renderer();
 // 8.设置渲染的尺寸大小
 renderer.setSize(window.innerWidth,window.innerHeight);
 // 9.将webgl渲染的canvas内容添加到body上
 document.body.appendChild(renderer.domElement);
 // 10.使用渲染器,通过相机将场景渲染出来
 // renderer.render(scene,camera);

6.创建渲染函数,每一帧渲染,

 // 创建渲染函数,每一帧渲染
 function render(){
     renderer.render(scene,camera);
     // 请求动画帧,JavaScript会请求上次函数执行的结果继续执行这个函数
     requestAnimationFrame(render)
 }
 render()

2.几何体的移动,旋转,缩放

移动

 // 修改物体的位置
 cube.position.set(5,0,0)
 cube.position.x = 5
 cube.position.y = 5
 cube.position.z = 5

缩放

 // 物体的缩放
 cube.scale.set(3,2,1)
 cube.scale.x= 5
 cube.scale.y = 2.5
 cube.scale.z = 5

旋转

 // 物体的旋转
 cube.rotation.set(40,0,0,"XYZ")

3. Group概念 容器

引入概念

如果你要实现一个机器人在跑步,那么机器人的头、四肢、躯干等都是要整体移动的,group可以将一系列的mesh模型组成一个整体,这样就可以实现整体移动了。

 // 创建group容器
 const group = new THREE.Group()
 // 创建每一个物体
 const cube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xfff000 }))
 const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff0000 }))
 const cube3 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xf00ff0 }))
 // 将每一个物体添加到group容器当中
 group.add(cube1,cube2,cube3)
 // 将容器添加到场景当中
 scene.add(group)
 // 所以我们只需要移动group 就可以实现容器里面每个物体的移动,缩放,旋转
 group.position.set(2,0,0)
 group.scale.set(2,2,2)
 group.rotation.set(Math/2,0,0,"XYZ")

4. GSAP动画库

4.1 什么是“GSAP”?

GreenSock 动画平台 (GSAP) 是一套行业知名的工具套件,用于超过 1100 万个网站,其中包括超过 50% 的获奖网站!你可以在任何框架中使用GSAP来制作 JavaScript*可以触及的几乎所有东西。 *无论您是想为 UI、SVG、Three 还是 React 组件制作动画.js - GSAP 都能满足您的需求。

核心库包含创建超快、跨浏览器友好动画所需的一切。这就是我们将在本文中逐步介绍的内容。

除了核心,还有各种各样的插件。您无需学习它们即可开始使用** ,但它们可以帮助解决特定的动画挑战,例如基于滚动的动画、可拖动的交互、变形等。

4.2 使用

下载:

 npm i gasp

引入:

 // 导入动画库
 import { gsap } from 'gsap'

使用:

 // 设置动画
 // 哪个元素(物体),移动哪个轴 多少距离,所用时间 间隔多长时间
 var animation = gsap.to(cube.position, {
     // x轴移动10距离
     x: 5,
     // 完成动画所需时间
     duration: 3,
     // 往返运动
     yoyo: true,
     // 延迟开启动画 单位S
     delay: 3,
     // 动画移动速率
     // ease: "elastic.out(1, 0.3)", // 动画重复次数,无限次:-1
     repeat: -1,
     // 动画完成之后的回调
     onComplete: () => {
         console.log("动画完成");
     },
     // 动画开始之后的回调
     onStart: () => {
         console.log("动画开始");
     }
 })
 gsap.to(cube.rotation, { x: 180, duration: 3 })// 点击停止动画
 window.addEventListener('dblclick', () => {
     console.log(animation);
     if (animation.isActive()) {
         // 暂停动画
         animation.pause();
     } else {
         // 恢复动画
         animation.resume()
     }})

5.二维平面PlaneGeometry

1.PlaneGeometry几何体介绍

PlaneGeometry可以用来创建非常简单的矩形,创建这种几何体非常简单,

 const geom = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments) 

按照如上语句便可以创建

建一个简单的二维矩形平面,接下来介绍一下它的常用属性

属性 必须 描述
width 该属性指定矩形的宽度
height 该属性指定矩形的高度
widthSegments 该属性指定矩形的宽度应该分成几段
heightSegments 该属性指定矩形的高度应该分成几段
  • 通过width属性调整平面的宽度
  • 通过height属性调整平面的高度
  • 通过widthSegments属性调整平面宽度分的段数
  • 通过heightSegments属性调整平面高度分的段数>

6. 轨道控制器

初始化镜头轨道控制器 OrbitControls ,通过它可以对三维场景用鼠标 🖱 进行缩放、平移、旋转等操作,本质上改变的不是场景,而是相机的位置参数。可以选择通过设置 controls.enableDamping 为 true 来开启控制器的移动惯性,这样在使用鼠标交互过程中就会感觉更加流畅和逼真

第一步:

 //导入控制器
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

第二步:

 // 实例化控制器
 const controls = new OrbitControls(camera, renderer.domElement);
 // 阻尼开启
 controls.enableDamping = true;

7.TextGeometry文本几何体

TextGeometry文本几何体介绍

TextGeometry可以用来创建三维文本。其实是通过指定字体创建字符,然后像拉伸几何体那样把文字拉伸,继而得到三维文本。创建TextGeometry文本几何体有很多参数与ExtrudeGeometry几何体一样,具体如下:

属性 必须 描述
size 该属性指定文本大小,默认值是100
height 该属性指定文本可以厚度,默认值是50
font 该属性指定文本的字体,是一个THREE.Font对象
bevelEnabled 该属性指定文本拉伸时是否启用斜角,默认false
bevelThickness 该属性指定文本拉伸体斜角厚度,默认值是10
bevelSize 该属性指定文本拉伸体斜角的高度。默认值是8
bevelSegments 该属性指定文本拉伸体斜角的分段数,段数越多斜角越光滑,默认值是3
curveSegments 该属性指定文本拉伸时拉伸曲线的分段数,段数越多曲线越光滑,默认值是4

TextGeometry文本几何体使用

字体文件引入

示例中使用的是helvetiker字体,通过文件 helvetiker_regular.typeface.js导入字体,将字体文件helvetiker_regular.typeface.js 放在public/font目录下,字体文件可以在这里下载helvetiker_regular.typeface.js引入过程如下:

 const publicPath = process.env.BASE_URL
 const textLoader = new THREE.FontLoader()
 //导入字体
 textLoader.load(
   `${publicPath}font/helvetiker_regular.typeface.js`,
   font => {
     // 这里可以获取到font就是创建文本几何体需要的字体
 })
3D字体对象的创建
 // 创建几何体    
 const geometry = new TextGeometry( 'Hello three.js!', {
         font: font,
         size: 80,
         height: 5,
         curveSegments: 12,
         bevelEnabled: true,
         bevelThickness: 10,
         bevelSize: 8,
         bevelSegments: 5
 } );
 // 创建材质
 const meshMaterial = new THREE.MeshStandardMaterial({
   color: 0xeeffff
 })
 // 创建文字网格对象
 this.mesh = new THREE.Mesh(geometry, meshMaterial)
 // 网格对象添加到场景中
 scene.add(this.mesh)

8. 阴影

阴影的基本使用
  1. 材质要满足能够对光照有反应
  2. 设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;
  3. 设置光照投射阴影 directionalLight.castShadow = true;
  4. 设置物体投射阴影 sphere.castShadow = true;
  5. 设置物体接收阴影 plane.receiveShadow = true;

只有三种光可以支持阴影

  • PointLight 点光源
  • DirectionalLight 方向光
  • SpotLight 聚光灯

1.设置渲染器开启阴影的计算

 // 告诉我们的渲染器处理阴影映射
 renderer.shadowMap.enabled = true

2.设置物体投射阴影

  // 设置物体投射阴影
 sphere.castShadow = true;

3.设置物体接收阴影

 // 设置物体接收阴影 
 plane.receiveShadow = true;

4.设置光照投射阴影

 // 设置光照投射阴影 
 directionalLight.castShadow = true;
优化阴影

设置阴影贴图的分辨率

 // 设置阴影贴图的分辨率 -- 提高流畅度
 directionalLight.shadow.mapSize.set(4096, 4096);

定向光摄像机助手

 // 创建定向光相机助手
 const directionalLightHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
 scene.add(directionalLightHelper)

关闭定向光摄像机助手

 directionalLightHelper.visible = false

修改物体距离光相机的距离

 // 修改定向光相机 距离物体的距离
 directionalLight.shadow.camera.near = 0.5;
 // 光所到达的最远距离
 directionalLight.shadow.camera.far = 16;
 // 这下面四个值的正数一定要相等且对称
 directionalLight.shadow.camera.top = 2;
 directionalLight.shadow.camera.bottom = -2;
 directionalLight.shadow.camera.left = -2;
 directionalLight.shadow.camera.right = 2;

设置阴影贴图模糊度

 // 设置阴影贴图模糊度
 directionalLight.shadow.radius = 20;

设置阴影贴图的类型 这里采用的是PCF软阴影(边缘更好看-更丝滑)文章来源地址https://www.toymoban.com/news/detail-690138.html

 // 设置阴影贴图的类型 这里采用的是PCF软阴影
 renderer.shadowMap.type = THREE.PCFShadowMap

聚光灯-SpotLight

 // 环境光
 const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
 scene.add(light);
 //直线光源
 const spotLight = new THREE.SpotLight(0xffffff, 1);
 spotLight.position.set(5, 5, 5);
 spotLight.castShadow = true;
 spotLight.intensity = 2;
 // 添加光相机助手
 const spotLightHelper = new THREE.CameraHelper(spotLight.shadow.camera)
 scene.add(spotLightHelper)
 // 设置阴影贴图模糊度
 // spotLight.shadow.radius = 20;
 // 设置阴影贴图的分辨率
 spotLight.shadow.mapSize.set(1024, 1024);// console.log(directionalLight.shadow);
 spotLight.target = sphere;
 // 角度
 spotLight.angle = Math.PI / 6;
 // 距离
 spotLight.distance = 0;
 // 明暗交界处
 spotLight.penumbra = 0;
 // 光的强弱
 spotLight.decay = 0;
 scene.add(spotLight);
 ​
 gui.add(sphere.position, "x").min(-5).max(5).step(0.1);
 gui
   .add(spotLight, "angle")
   .min(0)
   .max(Math.PI / 2)
   .step(0.01)
   .name('角度');
 gui.add(spotLight, "distance").min(0).max(10).step(0.01).name('距离');
 gui.add(spotLight, "penumbra").min(0).max(1).step(0.01).name('明暗交界处');
 gui.add(spotLight, "decay").min(0).max(5).step(0.01).name('光的强弱');

到了这里,关于three.js 基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web3d-three.js场景设计器-天空包围盒-TWEEN.js

    THREE.JS 实现场景天空包围盒,为了让场景背景更具体,而不是呆板的纯色,可以给厂家添加围绕的包围盒。 这里使用球体来实现,球体中央则是场景 给球体添加天空的渐变色 加入场景 代码如下 function createSky( hemiLight) {   const vertexShader = `varying vec3 vWorldPosition;     void main

    2024年01月23日
    浏览(49)
  • web3d-three.js场景设计器-sprite广告牌

    three.js使用Sprite精灵实现文字或者图片广告牌 1.将文字绘制到Canvas,调整对应宽高。 2.作为Cavans材质绑定到Sprite 3.加载到场景调整适当的scale function createLabel({ text, fontSize, textColor, color, imageUrl }) {     return new Promise((resolve, reject) = {         let canvas = document.createElement(\\\'canvas\\\')

    2024年02月02日
    浏览(54)
  • 17个WebGL框架及Web3D图形库

    WebGL是基于OpenGL的JavaScript API库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安装额外的插件、桌面应用程序。WebGL允许通过浏览器使用机器GPU将3D图形渲染成HTML页面。WebGL目前在大多数浏览器(如Google Chrome,Mozilla Firefox和Safari)中都受支持。WebGL可以通过浏览器设置或使用

    2024年02月06日
    浏览(64)
  • 纯干货!最全WebGL框架及Web3D图形库

    WebGL 是一个 JavaScript API,用于在 Web 浏览器中呈现交互式 2D 和 3D 图形。它基于 OpenGL ES,这是一种广泛使用的嵌入式系统图形渲染标准。 WebGL 通常用于各种应用程序,包括: 3D 图形: WebGL 允许开发人员在 Web 浏览器中创建和显示 3D 图形,从而实现沉浸式体验、游戏、模拟和

    2024年02月21日
    浏览(57)
  • 智慧大棚Web3D可视化系统 构建高效农业场景

    农业的发展离不开农作物的生长,而农作物的生长会受到多方面的限制,主要是外界因素,因此,智慧农业便将传统农业与科技结合起来,衍生出智慧大棚,从而让农业得以快速发展。 我国农业的基本现状是“大国小农”,农业产业发展仍然受限于农业从业人员匮乏、年龄老

    2023年04月19日
    浏览(85)
  • threejs项目 :GLTF格式简介 (Web3D领域JPG)

    参考资料:threejs中文网 threejs qq交流群:814702116 本节课算是科普介绍,不用掌握具体的知识细节,大概有个印象即可。 gltf格式的重要性 GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的

    2024年01月24日
    浏览(49)
  • web3d-three.js场景设计器-mesh网格添加多模型-模型描述随动

    给场景中的模型加上广告牌描述,可以在模型的MESH里添加Sprite,配上相应的文字, 描述Sprite的位置则是在mesh中的相对位置,比如模型高10,那么我们可以给一个y等于10 来进行适配,这样在移动模型mesh网格时可以整体移动。 function createBox(data) {   const geometry = new THREE.BoxGeom

    2024年02月21日
    浏览(50)
  • ThreeJS-VUE-3DMax 实现Web3D(简单测试)

            今天使用3DMax建模软件进行3D模型的制作,并且加入动画,通过threejs将模型及其动画部署在VUE框架上。         1. VUE:3.3.4         2. threejs:0.158.0         3. vite:4.4.11         4. 3DMax2021         5. pycharm2021专业版         简单制作一个小植物和一个水壶,实现浇

    2024年02月03日
    浏览(51)
  • 智慧垃圾焚烧发电厂Web3D可视化管理系统

    随着我国生产力的飞速发展和经济的迅速崛起,城市生活垃圾作为一种生物质能,将其燃烧用于发电,可以有效节约化石能源。 随着城镇化进程加速、人民生活水平持续提升,城市生活垃圾产生量也在逐年增长。生活垃圾是“放错地方的资源”,能否处理好这些“放错地方的资

    2024年02月08日
    浏览(57)
  • 50套Threejs实现的Web3D学习案例,总有一套适合你

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信 从18年开始,我由前后端开发开始专注Web3D开发,目前也已经快5年了

    2024年01月23日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包