threejs的安装
npm i three
1. 在vue中通过 import * as THREE from 'three'引入
2. threejs的三要素 场景 scene、 相机 camera、渲染器 renderer
创建一个基础的盒子
代码:
-
import * as THREE from 'three'; const scene = new THREE.Scene() // 创建场景 // 创建透视相机 const camera = new THREE.PerspectiveCamera( 45, // 视角 window.innerWidth / window.innerHeight; // 宽高比 0.1,//近平面 1000, // 远平面 ) // 创建渲染器 const renderer = new THREE.WEBGL1Renderer(); // 设置渲染器尺寸 renderer.setSize(window.innerWidth,window.innerHeight); //将渲染器挂载在容器中 document.body.appendChild(renderer.domElement); // 创建几何体 (立方体) const geometry = new THREE.BoxGeometry(1,1,1) // 创建材料 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建网格 const cube = new THREE.Mesh(geometry, material); // 将物体添加进场景 scene.add(cube); //设置相机位置 camera.position.z = 5; camera.position.x = 0; camera.position.y = 0; // 设置圆点 默认就是(0,0,0) camera.lookAt(0,0,0) // 渲染 renderer.render(scene, camera);
运行结果:
忽略掉图片中的坐标轴
一、场景
在threejs中只有一个场景 ,场景是所有物体的容器 通过new创建一个场景对象
const scene = new THREE.Scene()
方法:
方法名 | 参数 | 作用 |
.add() | obj(所需添加的物体) | 将物体添加进场景 |
.remove() | obj(所要移除的物体) | 将物体移出场景 |
二、相机
在threejs中相机决定着场景中的物体以什么角度展示在用户的眼前。在threejs中有多种相机。
1. 透视相机 PerspectiveCamera(视角,宽高比,近平面,远平面)
透视相机就是根据物体的近大远小的原理展示物体
参数
视角:用户可以看到的范围 当视角为0 用户可以看到的场景为0,视角为180,用户可以看到非常广阔的场景
宽高比:实际窗口的纵横比,即宽度除以高度。这个值越大,说明你宽度越大
近平面:用户看到的最近的截面的距离
远平面: 用户所看到的最远的截面的距离
三、渲染器
渲染器的作用就是将相机拍摄的照片放进浏览器中。
创建渲染器
const renderer = new THREE.WebGL1Renderer()
属性
属性 | 默认值 | 作用 |
antialias | true/ false | 是否开启反齿距 |
alpha | true/false | 背景色是否为透明 |
maxLights | int | 最大灯光数,我们的场景中最多能够添加多少个灯光。 |
logarithmicDepthBuffer | true/false | 模型的重叠部位不停的闪烁。这便是Z-Fighting问题, 为解决这个问题,我们可以采用该种方法(详细解释大家感兴趣参照https://www.cnblogs.com/lst619247/p/9098845.htm) |
方法
方法 | 作用 |
setSize() | 设置渲染器的宽高 |
setClearColor() | 设置canvas背景色(clearColor)和背景色透明度(clearAlpha) |
setPixelRatio() | 设置分辨率,解决场景模糊,抗锯齿的一-种很好的方法 |
运行结果
属性:
1. alpha
const renderer = new THREE.WebGL1Renderer({ alpha: true });
四、创建物体
1. 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
五、创建材料
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
六、创建网格
// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 将物体添加进场景
scene.add(cube);
七、自动旋转
通过渲染网格进行旋转
设置渲染函数 进行渲染
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染
renderer.render(scene, camera);
}
animate();
八、轨道控制器 和 阻尼
1. 轨道控制器
OrbitControls是THREEJS中最常用的一个控制器,可以帮助我们实现以目标为焦点的旋转缩放,同时平移相机观察场景的操作,看上去是物体在进行变换,实际上所有的变化都是相机的相对位置在发生改变。
创建
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 设置轨道控制器
const control = new OrbitControls(相机, 事件);
2.带阻尼惯性
阻尼惯性 当用户用鼠标滑动停止时,并不会立马停止而是会通过惯性之后停止
阻尼越小滑动越大 反之,滑动越小
/*
* 阻尼系数越小 -- 平滑度越大
* 阻尼系数越大 -- 平滑度越小
*/
control.dampingFactor = 0.05;
控制器的自动旋转
// 自动旋转
control.autoRotate = true;
九、相对位置与父子元素
父子元素
// 创建父几何体网格
const parentCube = new THREE.Mesh(parentGeometry, parentMaterial);
// 创建网格
const cube = new THREE.Mesh(geometry, material);
// 添加进场景
scene.add(parentCube);
parentCube.add(cube);
相对位置
通过 .position.set(0,0,0 )设置 网格的位置 (三维属性)
cube.position.set(3, 0, 0);
parentCube.position.set(-3, 0, 0);
// 此时子元素的位置在圆点 ,原因是父元素的位置为 -3 而子元素的位置为父元素的相对位置 3格,及在圆点
十、物体的缩放与旋转
物体的缩放与旋转也为 相对与父元素的
缩放
子元素的长宽高放大了2倍
cube.scale.set(2, 2, 2);
如何父元素的长宽高放大了2倍,此时子元素将被放大到原本的4倍
旋转
cube.rotation.x = Math.PI / 4;
子元素旋转了45度
parentCube.rotation.x = Math.PI / 4;
父元素旋转了45度,此时子元素将旋转90度