threejs教程-轨道控制器

简介

本系列教程需要具备threejs的基础入门知识,了场景、几何体、相机等基础概念。

使用threejs的基础知识,可以很快的开发一个3D页面。

其核心代码如下:

xml 复制代码
<template>
  <div class="wrap" ref="threeContainer"></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted, ref } from "vue";

const threeContainer = ref(null);

// 1、创建3D场景对象Scene
const scene = new THREE.Scene();
// 添加网格地面
const gridHelper = new THREE.GridHelper(200, 10);
scene.add(gridHelper);

// 2、创建几何体Geometry模型
const geometry = new THREE.BoxGeometry(20, 20, 20);
const material = new THREE.MeshBasicMaterial({
  color: "blue",
});
const mesh = new THREE.Mesh(geometry, material);
// 设置模型mesh的xyz坐标
mesh.position.set(0, 40, 0);
scene.add(mesh);

// 3、使用虚拟相机观察模型
const camera = new THREE.PerspectiveCamera();
camera.position.set(0, 50, 200);
camera.lookAt(0, 0, 20); //坐标原点

// 4、渲染3D场景到DOM上
const width = 800; //宽度
const height = 500; //高度
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
// 动画
renderer.setAnimationLoop(animation);
function animation() {
  mesh.rotation.x += 0.05;
  mesh.rotation.y += 0.05;
  renderer.render(scene, camera);
}

onMounted(() => {
  threeContainer.value.appendChild(renderer.domElement);
});
</script>

<style scoped></style>

什么是轨道控制器

Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。

简单拉来说,使用轨道控制器可以让我们的3D场景具备如下功能:

  • 使用鼠标左键旋转物体改变观察视角
  • 使用鼠标滚轮缩放视图
  • 使用右键平移视

OrbitControls API

官方API地址:threejs.org/docs/index....

语法简介

要使用轨道控制器,必须显示的导入该组件

javascript 复制代码
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

OrbitControls使用方法如下

less 复制代码
OrbitControls( object : Camera, domElement : HTMLDOMElement )
  • object: (必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。
  • domElement: 用于事件监听的HTML元素。

代码示例

javascript 复制代码
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// .....

// 创建轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );

事件

OrbitControls有三个事件

事件名 触发机制
change 当摄像机被组件改变时触发。
start 初始化交互时触发。
end 当交互结束时触发。

change事件代码示例

属性

OrbitControls属性很多,我们展示一些常用属性

属性类型 属性名 类型 属性含义
自动旋转 .autoRotate Boolean 将其设为true,以自动围绕目标旋转。 请注意,如果它被启用,你必须在你的动画循环里调用.update()。
.autoRotateSpeed Float .autoRotate为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一周需要30秒。
阻尼设置 .dampingFactor Float .enableDamping设置为true的时候,阻尼惯性有多大。 Default is 0.05.
.enableDamping Boolean 将其设置为true以启用阻尼(惯性)
启用 .enabled Boolean 当设置为false时,控制器将不会响应用户的操作。默认值为true。
摄像机设置 .enablePan Boolean 启用或禁用摄像机平移,默认为true。
.enableRotate Boolean 启用或禁用摄像机水平或垂直旋转。默认值为true。
.enableZoom Boolean 启用或禁用摄像机的缩放。

阻尼效果演示

阻尼就是阻力的意思,如果没有阻力,根据牛顿定律,运动的物体将一直保持匀速直线运动。这意味着,如果开启了阻尼效果,旋转物体后,由于惯性,场景会继续运动。阻尼越小,物体运动的时间越久。

ini 复制代码
// 添加阻尼
controls.enableDamping = true;
controls.dampingFactor = 0.01;
// 必须调用.update()
function animation() {
  mesh.rotation.x += 0.05;
  mesh.rotation.y += 0.05;
+ controls.update();
  renderer.render(scene, camera);
}

自动旋转演示

ini 复制代码
// 开启自动旋转
controls.autoRotate = true;
// 设置自动旋转速度
controls.autoRotateSpeed = 5;
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端
Json____10 小时前
使用html css js 开发一个 教育机构前端静态网站模板
前端·css·html·js·前端学习·企业站·教育机构网站