Tree.js学习

LuHang2023-11-29 9:54

three.js三要素

场景(scene) 摄像机(camera) 渲染器(renderer)

  1. 下载并引入three库
css 复制代码 
npm i three
javascript 复制代码 
import * as THREE from 'three'
  1. 创建场景对象
javascript 复制代码 
let scene,camera,renderer // 场景 摄像机 渲染器

function init () {
 // 创建场景对象
  scene = new THREE.Scene()
  // 创建摄像机对象
  // 参数1:垂直角度(建议75),视野范围
  // 参数2:宽高比（建议与画布相同宽高）物体绘制比例
  // 参数3:近截面距离摄像机距离
  // 参数4:远截面距离摄像机距离
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

  // 创建渲染器，并设置画布大小，添加到DOM显示
  renderer = new THREE.WebGLRenderer()
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把画布canvas标签添加到页面上
  document.body.append(renderer.domElement)
  // 传入场景和摄像机，渲染画面
  renderer.render(scene,camera)
}

画出一个立方体

xml 复制代码 
<template>
  <div></div>
</template>

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

let scene, camera, renderer; // 场景 摄像机 渲染器

const init = () => {
  // 创建场景对象
  scene = new THREE.Scene();
  // 创建摄像机对象
  // 参数1:垂直角度(建议75),视野范围
  // 参数2:宽高比（建议与画布相同宽高）物体绘制比例
  // 参数3:近截面距离摄像机距离
  // 参数4:远截面距离摄像机距离
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // 创建渲染器，并设置画布大小，添加到DOM显示
  renderer = new THREE.WebGLRenderer();
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 把画布canvas标签添加到页面上
  document.body.append(renderer.domElement);
  // 传入场景和摄像机，渲染画面
  
};
// 创建立方体
const createCube = () => {
  // 1.创建图形，宽高深为1单位（立方缓冲几何体）
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 2.创建网格物体对象，传入图形和材质（网格基础材质-线面纯颜色绘制表面）
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 3.创建网格物体对象，传入图形和材质（网格物体对象）
  const cube = new THREE.Mesh(geometry, material);
  // 4.把物体添加到场景中
  scene.add(cube);
  // 移动摄像机向Z轴移动5个单位 （默认摄像机和物体的坐标轴都在远点）
  camera.position.z = 5;
};

onMounted(() => {
  // 初始化
  init();
  // 创建立方体
  createCube()
  renderer.render(scene, camera);

});
</script>

<style lang="scss" scoped></style>

轨道控制器OrbitControls

使用：

  1. 单独引入 OrbitControls 轨道控制器构造函数
  2. 创建轨道控制器
  3. 在渲染循环中更新场景渲染

创建轨道控制时候的两个参数:

  1. 相机camera
  2. 渲染器的DOM元素renderer.domElement

使用相机作为第一个参数是为了将轨道控制器绑定到特定的相机上，以便对相机进行交互控制。 使用渲染器的 DOM 元素作为第二个参数是为了让轨道控制器监听鼠标和触摸事件，并根据用户的输入进行相应的操作，比如旋转、缩放和平移相机。

javascript 复制代码 
// 目标：摄像机 - 轨道控制器
// 作用：调整摄像机位置等，查看不同画面
// 1. 单独引入 OrbitControls 轨道控制器构造函数
// 2. 创建轨道控制器
// 3. 在渲染循环中更新场景渲染

import * as THREE from 'three'
// 1. 单独引入 OrbitControls 轨道控制器构造函数
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
// 场景，摄像机，渲染器
let scene, camera, renderer
// 轨道控制器
let controls

function controlsCreate() {
// 2. 创建轨道控制器
controls = new OrbitControls( camera, renderer.domElement )
}

function renderLoop() {
// 3. 在渲染循环中更新场景渲染
renderer.render(scene, camera)

// 手动 JS 代码更新过摄像机信息，必须调用轨道控制器 update 方法
controls.update()

// 根据当前计算机浏览器刷新帧率（默认 60 次/秒），不断递归调用此函数渲染最新的画面状态
// 好处：当前页面切换到后台，暂停递归
requestAnimationFrame(renderLoop)
}
xml 复制代码 
<template>
  <div></div>
</template>

<script setup>
import * as THREE from "three";
import { onMounted } from "vue";
// 1. 单独引入 OrbitControls 轨道控制器构造函数
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 目标：摄像机 - 轨道控制器
// 作用：调整摄像机位置等，查看不同画面
// 1. 单独引入 OrbitControls 轨道控制器构造函数
// 2. 创建轨道控制器
// 3. 在渲染循环中更新场景渲染

let scene, camera, renderer; // 场景 摄像机 渲染器
// 2. 创建轨道控制器
let controls;

onMounted(() => {
  // 初始化
  init();
  // 创建轨道控制器
  getcontrols();
  // 创建立方体
  createCube();
  // 更新场景渲染
  renderLoop();
  // 创建坐标轴
  createHelper();
});
const getcontrols = () => {
  controls = new OrbitControls(camera, renderer.domElement);
};

// 3. 在渲染循环中更新场景渲染
const renderLoop = () => {
  requestAnimationFrame(renderLoop);

  controls.update();
  renderer.render(scene, camera);
};

const init = () => {
  // 创建场景对象
  scene = new THREE.Scene();
  // 创建摄像机对象
  // 参数1:垂直角度(建议75),视野范围
  // 参数2:宽高比（建议与画布相同宽高）物体绘制比例
  // 参数3:近截面距离摄像机距离
  // 参数4:远截面距离摄像机距离
  camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  // 创建渲染器，并设置画布大小，添加到DOM显示
  renderer = new THREE.WebGLRenderer();
  // 设置画布大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 把画布canvas标签添加到页面上
  document.body.append(renderer.domElement);
  // 传入场景和摄像机，渲染画面
};
// 创建立方体
const createCube = () => {
  // 1.创建图形，宽高深为1单位（立方缓冲几何体）
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 2.创建网格物体对象，传入图形和材质（网格基础材质-线面纯颜色绘制表面）
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 3.创建网格物体对象，传入图形和材质（网格物体对象）
  const cube = new THREE.Mesh(geometry, material);
  // 4.把物体添加到场景中
  scene.add(cube);
  // 移动摄像机向Z轴移动5个单位 （默认摄像机和物体的坐标轴都在远点）
  camera.position.z = 3;
};

// 创建坐标轴
const createHelper = () => {
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
};
</script>

<style lang="scss" scoped></style>

坐标轴

坐标轴：在画布模拟 3 个坐标轴（x，y，z），随时显示和调整，辅助我们开发和调试

使用：

csharp 复制代码 
// 创建一个坐标轴辅助工具
function createHelper() {
  // 1. 创建坐标轴对象，设置长度
  const axesHelper = new THREE.AxesHelper(5)
  // 2. 添加到场景中
  scene.add(axesHelper)
}

注意：因为浏览器兼容性，线段最大最小宽度只能为 1

three.js 和 WebGL 一样，采用右手坐标系，借助 AxesHelper 往场景中加入了一个 x，y，z 的坐标轴辅助对象

轨道控制器-控制

文档地址：three.js中文文档

下面属性都是在轨道控制器这个对象上面设置，需要在轨道控制中去修改属性

1.阻尼效果 enableDamping

可以通过修改dampingFactor属性来增加阻尼效果，这个参数的值为Float浮点型，默认值是0.05

要想这一个值生效，必须要在你的动画循环里面调用update()

dampingFactor属性值越小，阻尼效果越明显

2.自动顺时针旋转 autoRotate

3.垂直范围控制

  • maxPolarAngle

设置垂直旋转的角度上限，范围是0到Math.PI，默认值是Math.PI

  • minPolarAngle

设置垂直旋转的角度下限，范围是0到Math.PI，默认值是

  1. 水平范围控制
  • maxAzimuthAngle（马克思艾贼美四昂狗）

你能够水平旋转的角度上限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。

  • minAzimuthAngle

你能够水平旋转的角度下限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。

  1. 移动范围控制
  • minDistance

你能够将相机向内移动多少（仅适用于PerspectiveCamera），其默认值为0。

  • maxDistance

你能够将相机向外移动多少（仅适用于PerspectiveCamera），其默认值为Infinity。

ini 复制代码 
function controlsCreate() {
  controls = new OrbitControls(camera, renderer.domElement)
  // 1. 阻尼效果
  controls.enableDamping = true
  // 2. 开启自动旋转轨道控制器效果->带动摄像机一起旋转（摄像机顺时针水平旋转）
  // controls.autoRotate = true
  // 3. 垂直角度范围控制（0 上面，Math.PI 下面）
  controls.maxPolarAngle = Math.PI
  controls.minPolarAngle = 0
  // 水平角度范围控制
  controls.maxAzimuthAngle = 1.5 * Math.PI 
  controls.minAzimuthAngle = 0.5 * Math.PI
  // 4. 摄像机移动范围控制
  controls.minDistance = 2
  controls.maxDistance = 10
}
相关推荐
passerby606118 分钟前
完成前端时间处理的另一块版图
前端·github·web components
掘了25 分钟前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅28 分钟前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅1 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅1 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment1 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅2 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊2 小时前
jwt介绍
前端
爱敲代码的小鱼2 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
Cobyte2 小时前
AI全栈实战：使用 Python+LangChain+Vue3 构建一个 LLM 聊天应用
前端·后端·aigc
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04Linux下V2Ray安装配置指南05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06UV安装并设置国内源07Claude Code Skills 实用使用手册08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09Vue-skills的中文文档10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南