ThreeJs 基础学习

three.js 基础

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

1.引入Three.js

代码语言：javascript复制

 import * as THREE from "three";

2.创建场景

代码语言：javascript复制

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

3.初始化一个相机

代码语言：javascript复制

 // 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.初始化一个几何体

代码语言：javascript复制

 // 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.初始化一个渲染器, 用来通过相机把画面渲染到

代码语言：javascript复制

 // 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.创建渲染函数,每一帧渲染,

代码语言：javascript复制

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

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

移动

代码语言：javascript复制

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

缩放

代码语言：javascript复制

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

旋转

代码语言：javascript复制

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

3. Group概念 容器

引入概念

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

代码语言：javascript复制

 // 创建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 使用

下载:

代码语言：javascript复制

 npm i gasp

引入:

代码语言：javascript复制

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

使用:

代码语言：javascript复制

 // 设置动画
 // 哪个元素(物体),移动哪个轴 多少距离,所用时间 间隔多长时间
 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可以用来创建非常简单的矩形，创建这种几何体非常简单，

代码语言：javascript复制

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

按照如上语句便可以创建

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

属性	必须	描述
width	是	该属性指定矩形的宽度
height	是	该属性指定矩形的高度
widthSegments	否	该属性指定矩形的宽度应该分成几段
heightSegments	否	该属性指定矩形的高度应该分成几段

• 通过width属性调整平面的宽度
• 通过height属性调整平面的高度
• 通过widthSegments属性调整平面宽度分的段数
• 通过heightSegments属性调整平面高度分的段数>

6. 轨道控制器

初始化镜头轨道控制器 OrbitControls ，通过它可以对三维场景用鼠标

0 人点赞