🌟前言
哈喽小伙伴们，最近工作比较忙一直没有给大家更新，这篇文章开始会开启新的专栏 Three.js，记录一下博主学习Three.js的过程；一起来看下吧。
🌟parcel
1.介绍
Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度，并且不需要任何配置。
2.安装
首先通过 Yarn 或者 npm 安装 Parcel ：
Yarn:
yarn global add parcel-bundler
npm:
npm install -g parcel-bundler
在你正在使用的项目目录下创建一个 package.json 文件：
yarn init -y
or
npm init -y
🌟Three
官网：Three.js
1.安装
1.1 下载
npm install three --save-dev
1.2 使用
import * as THREE from "three"
2.基本构成
2.1 场景
// 1、创建场景 const scene = new THREE.Scene();
2.2 相机
// 2、创建相机 透视相机 // fov:角度 aspect:宽高比 near:近端 far:远端 const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); // 设置相机位置 camera.position.set(0,0,10); // 添加到场景 scene.add(camera);
2.3 物体
// 添加物体 立方缓冲几何体 // 创建几何体 const cubeGeometry = new THREE.BoxGeometry(1,1,1,); // 创建材质 const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00}); // 根据几何体和材质创建物体 const cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // 修改物体位置 // cube.position.set(5,0,0) // cube.position.x = 3 // 将几何体添加到场景里边 scene.add(cube)
2.4 渲染器
// 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 设置渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight);
2.5 监听浏览器变化
//监听屏幕大小的改变，修改渲染器的宽高和相机的比例： window.addEventListener("resize",()=>{ renderer.setSize(window.innerWidth,window.innerHeight) camera.aspect = window.innerWidth/window.innerHeight camera.updateProjectionMatrix() })
2.6 使用轨道控制器（实现3D效果）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 创建轨道控制器 const controls = new OrbitControls(camera,renderer.domElement)
2.7 坐标轴辅助器
// 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper);
2.8 渲染场景
function render() { renderer.render(scene, camera); // 渲染下一帧的时候就会调用render函数 requestAnimationFrame(render); } render();
2.9 整体代码
import * as THREE from "three" // 导入轨道控制器 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 目标：使用控制器查看3D物体 // 1、创建场景 const scene = new THREE.Scene(); // 2、创建相机 透视相机 // fov:角度 aspect:宽高比 near:近端 far:远端 const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000); // 设置相机位置 camera.position.set(0,0,10); scene.add(camera); // 添加物体 立方缓冲几何体 // 创建几何体 const cubeGeometry = new THREE.BoxGeometry(1,1,1,); // 创建材质 const cubeMaterial = new THREE.MeshBasicMaterial({color:0xffff00}); // 根据几何体和材质创建物体 const cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // 将几何体添加到场景里边 scene.add(cube) // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 设置渲染的尺寸大小 renderer.setSize(window.innerWidth,window.innerHeight); //监听屏幕大小的改变，修改渲染器的宽高和相机的比例： window.addEventListener("resize",()=>{ renderer.setSize(window.innerWidth,window.innerHeight) camera.aspect = window.innerWidth/window.innerHeight camera.updateProjectionMatrix() }) // 将webgl渲染的canvas内容添加到body上 document.body.appendChild(renderer.domElement); // // 使用渲染器，通过相机，将场景渲染进来 // renderer.render(scene,camera) // 创建轨道控制器 const controls = new OrbitControls(camera,renderer.domElement) // 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper); function render() { renderer.render(scene, camera); // 渲染下一帧的时候就会调用render函数 requestAnimationFrame(render); } render();
通过以上代码，就创建了一个Three的3D项目，创建了我们的第一个Three的3D场景，并添加了一个黄色的正方体
3.动画
3.1 设置物体移动
function render() { // 每一帧都去修改物体的 position cube.position.x += 0.01 if (cube.position.x>5) { cube.position.x = 0 } renderer.render(scene, camera); // 渲染下一帧的时候就会调用render函数 requestAnimationFrame(render); } render();
3.2 设置物体缩放
// 缩放 cube.scale.set(3,2,1) cube.scale.x = 5
3.3 设置物体旋转
// 旋转 cube.rotation.set(Math.PI/4,0,0)
3.4 requestAnimationFrame（请求动画帧）
function render(time) { // console.log(time) // 每一帧都去修改物体的 position let t = time/1000 % 5; // %5 用来设置反复动画 利用求余 move(t) renderer.render(scene, camera); // 渲染下一帧的时候就会调用render函数 requestAnimationFrame(render); } render();
render函数默认传入一个 time 参数，利用该参数，可以计算物体运动的实际时间，进而设置更精确的动画效果
3.5 Clock跟踪时间处理动画
function render(time) { // console.log(time) // 每一帧都去修改物体的 position let t = time/1000 % 5; // %5 用来设置反复动画 利用求余 move(t) renderer.render(scene, camera); // 渲染下一帧的时候就会调用render函数 requestAnimationFrame(render); } render();
ender函数默认传入一个 time 参数，利用该参数，可以计算物体运动的实际时间，进而设置更精确的动画效果
🌟写在最后
更多Three知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！
✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！
