three专题

初学WebGL，使用Three.js开发第一个3d场景示例

使用Three.js 开发3d场景在图书馆偶然撞见《Three.js开发指南》一书，便试着捣鼓一翻，现将第一个示例的部分代码、注解和相关方法的API记录在此。因为此书发行时是Three.js r69版本，所以当前部分代码有所修改，且所有方法和参数以官方最新版本Three.js r90为准。 <!doctype html><html lang="en"><head><meta char

第十章 Three.js物理引擎与碰撞检测(一)

10.1 物理引擎基础物理引擎用于模拟物体的物理行为，如重力、碰撞、摩擦力等。在 Three.js 中，我们可以使用外部物理引擎库来增强我们的 3D 场景的物理效果。常用的物理引擎有 Cannon.js、Ammo.js 和 Oimo.js。本章我们将重点介绍 Cannon.js，并展示如何将其集成到 Three.js 项目中。 10.2 使用 Cannon.js 集成物理效果 Cannon

three.js 第十一节 - uv坐标

// @ts-nocheck// 引入three.jsimport * as THREE from 'three'// 导入轨道控制器import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'// 导入lil.guiimport { GUI } from 'three/examples/jsm/l

掌握Three.js：学习路线，成为3D可视化开发的高手！

学习Three.js可以按照以下路线进行：基础知识：首先要了解基本的Web开发知识，包括HTML、CSS和JavaScript。如果对这些知识已经比较熟悉，可以直接进入下一步。 Three.js文档：阅读Three.js官方文档是学习的第一步。官方文档提供了详细的API参考和示例代码，可以了解Three.js的基本概念、核心功能和用法。示例代码：在

【three.js】生成点并连线的两种方式

目录第一种方式：Float32Array数组方式第二种方式：几何体方法.setFromPoints() 第一种方式：Float32Array数组方式 import * as THREE from './build/three.module.js'// 引入轨道控制器扩展库OrbitControls.jsimport { OrbitControls } from 'three/a

【three.js】设置canvas画布背景透明

通过Three.js渲染一个模型的时候，不希望canvas画布有背景颜色，也就是canvas画布完全透明，可以透过canvas画布看到画布后面叠加的HTML元素图文，呈现出来一种三维模型悬浮在网页上面的效果。比如我们现在的模型背景是黑色的，非常不美观，我们想把背景变透明，如何做呢？ // 在构造函数参数中设置alpha属性的值var renderer = new THREE.WebGL

three.js 基础01

1.场景创建 Scene() 2.常用形状集几何体「Geometry」[可设置长宽高等内容，如：new THREE.BoxGeometry(...)] 长方体 BoxGeometry圆柱体 CylinderGeometry 球体SphereGeometry圆锥体ConeGeometry矩形平面 PlaneGeometry 圆面体 CircleGeometry

【three.js】克隆.clone()和复制.copy()

目录一、克隆clone() 二、赋值copy() 克隆.clone()、复制.copy()是threejs很多对象都具有的方法，比如三维向量对象Vector3、网格模型Mesh、几何体、材质。一、克隆clone() 通过mesh克隆.clone()一个和mesh一样的新模型对象mesh2。 const mesh2 = mesh.clone();mesh2.positi

【three.js案例一】智慧星球

直接附上源码： import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';//场景const scene = new THREE.Scene();const geometry = new THREE.SphereGeometry(50,32,1

【three.js】旋转、缩放、平移几何体

目录一、缩放二、平移三、旋转四、居中附源码 BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY()等方法可以对几何体本身进行缩放、平移、旋转,这些方法本质上都是改变几何体的顶点数据。我们先创建一个平面物体，样子是这样的。一、缩放 // 几何体xyz三个方向都放大2倍geometry

【three.js】自定义物体形状BufferGeometry

目录一、认识缓冲类型几何体BufferGeometry 二、将各个顶点连线一、认识缓冲类型几何体BufferGeometry threejs的长方体BoxGeometry、球体SphereGeometry等几何体都是基于BoxGeometry类构建的，BufferGeometry是一个没有任何形状的空几何体，你可以通过BufferGeometry自定义任何几何形状，具体一点说就

Three.js 效能要点

本文在线示例查看。更多精彩内容尽在数字孪生平台，关注公众号：sky的数孪技术，技术交流、源码下载请添加VX：digital_twin123 模型方面：尽量合并模型，以减少drawcalls不要合并远距离模型，因为对于远距离模型而言裁剪过滤比合并更有效次要物体尽量减面，主要物体使用LOD，LOD可以针对整体区域也可以针对单个模型删除不必要的（如物体内部、看不到的外墙等）面尽可能合并贴

Three.js加载压缩的glb/gltf文件

有些模型文件直接使用GLTFLoader加载会报错，如果格式没有问题的话，很可能就是这个模型文件被压缩了。压缩也是可以加载的更快嘛~ 现在就来说说这个坑。 http://www.webgl3d.cn/pages/09c637/ 这个连接有很详细的说明这个咋个解压或者压缩模型文件的，但是有个地方这句话有坑：大概能就是去找到这个依赖文件夹去复制到某个路径下去，因为我这里用的构建工具，那

第九章 Three.js 高级材质与着色器 (一)

材质和着色器在Three.js中扮演着至关重要的角色，它们决定了物体的外观和视觉效果。在本章中，我们将深入学习Three.js中的高级材质和自定义着色器，以创建复杂和精美的视觉效果。 9.1 基本材质回顾在开始深入探讨高级材质之前，回顾一下Three.js提供的几种基本材质： MeshBasicMaterial: 不受光照影响的材质。MeshStandardMaterial: 基于物理的标

【Three.js】知识梳理二十一：Three.js性能优化和实践建议

Three.js 是一个功能强大的 3D 引擎，用于创建 WebGL 应用。尽管它功能强大，但在复杂的 3D 场景中保持高性能是一个挑战。本文将分享一些在使用 Three.js 时的性能优化提示，帮助你提高应用的运行效率。 1. 使用 stats.js 监视性能在进行任何优化之前，首先要监视应用的性能。stats.js 是一个简单而有效的工具，可以帮助你实时监视帧率（FPS）、每帧渲染所需时

Three.js做了一个网页版的我的世界

前言笔者在前一阵子接触到 Three.js 后, 发现了它能为前端 3D 可视化 / 动画 / 游戏方向带来的无限可能, 正好最近在与朋友重温我的世界, 便有了用 Three.js 来仿制 MineCraft 的想法, 正好也可以通过一个有趣的项目来学习一下前端 3D 领域介绍游戏介绍相信大家对我的世界应该都不太陌生, 他是一款 3D 像素风的生存类游戏, 本项目是模仿我的

【Three.js】知识梳理十六：图形界面工具（GUI）

在进行Three.js项目开发时，为了更好地调试和控制3D场景中的各种参数，图形用户界面工具（GUI）显得尤为重要。通过GUI工具，开发者可以在不修改代码的情况下实时调整参数，提高开发效率和灵活性。本文将介绍几种常用的Three.js GUI工具，并展示它们的基本用法。在3D图形开发过程中，调整参数如光照强度、物体位置、材质属性等是一个频繁且必要的操作。通过GUI工具，开发者可以直观地

three.js纹理贴图褪色失真问题解决

网上查的都是加encoding配置，但是最新版本，纹理对象属性名.encoding已经变更为.colorSpace // 纹理贴图加载器const texLoader = new THREE.TextureLoader();const texture = texLoader.load("./test.jpg");texture.colorSpace = THREE.SRGBColorSp

第八章 Three.js 高级几何体

在本章中，我们将探讨Three.js中更高级的几何体创建方法。Three.js提供了多种工具来创建复杂的几何体，并对几何体进行自定义和变形。掌握这些技巧，可以让你在项目中创建更加复杂和精细的三维模型。 8.1 自定义几何体 Three.js 提供了 THREE.Geometry 和 THREE.BufferGeometry 来创建自定义几何体。THREE.Geometry 是一个较为简单和直观

【Three.js】知识梳理十一：Three.js高级纹理类型

在使用Three.js创建3D图形时，纹理扮演着重要的角色，它们可以增加模型的视觉效果，使模型看起来更加真实。本文将深入讨论几种高级纹理类型：法线贴图（Normal Maps），凹凸贴图（Displacement Maps），高光贴图（Specular Maps），环境贴图（Environment Maps）以及数据纹理（Data Textures）。 1. 法线贴图法线贴图是一种存储了一

【Three.js】知识梳理九：Three.js层级模型

1. Object3D和Group 1.1 Object3D Object3D是Three.js中所有3D对象的基类。它为我们提供了一个通用的结构，包括位置、旋转、缩放等变换属性，以及子对象的组织和管理功能。无论是网格（Mesh）、光源（Light）还是其他类型的对象，它们都继承自Object3D。 1.11 创建Object3D实例创建一个Object3D实例非常简单： import

【three.js】光源对物体表面影响

目录一、受光照影响材质二、光源简介 2.1 点光源光源位置点光源辅助观察完整代码，粘贴即用 2.2 环境光 2.3 平行光平行光辅助观察实际生活中物体表面的明暗效果是会受到光照的影响，比如晚上不开灯，你就看不到物体，灯光比较暗，物体也比较暗。在threejs中，咱们用网格模型Mesh模拟生活中物体，所以threejs中模拟光照Light对物体表面的影响，就

【Three.js】知识梳理三：Three.js几何体Geometry

1.什么是几何体Geometry？在 Three.js 中，几何体（Geometry）是一个数据结构，包含了用于描述三维物体的基本信息，如顶点（vertices）、面（faces）和它们的关联属性（例如颜色、法线、纹理坐标等）。将几何体与材质（Material）相结合，我们可以创建出形状丰富、颜色各异的三维物体。 1.1缓冲类型几何体（BufferGeometry） BufferGeome

第六章 Three.js 光照

在三维图形中，光照是一个非常重要的概念，它可以让你的场景看起来更加真实和生动。在这一章中，我们将深入了解Three.js中光照的基本概念，并学习如何在场景中添加各种类型的光源以及如何实现阴影效果。 6.1 光照的基本概念光照是三维渲染中的关键因素，它可以影响物体的颜色和亮度。Three.js 提供了多种光源类型，每种光源都有其独特的属性和用途。常见的光源类型包括：环境光 (Ambient

第五章 Three.js 材质与纹理

在本章中，我们将深入探讨 Three.js 中的材质和纹理。材质决定了几何体的外观，而纹理则为几何体提供了丰富的表面细节。通过学习本章的内容，你将了解如何创建和应用各种材质，以及如何使用纹理为几何体添加细节。 5.1 基本材质 (Basic Material) THREE.MeshBasicMaterial 是一种最简单的材质，不受光照影响，适用于绘制简单的颜色和图像。 5.1.1 创建基本

【recast-navigation-js】使用three.js辅助绘制Agent寻路路径

目录说在前面setAgentTarget绘制寻路路径结果问题其他说在前面操作系统：windows 11浏览器：edge版本 124.0.2478.97recast-navigation-js版本：0.29.0golang版本：1.21.5上一篇：【recast-navigation-js】使用three.js辅助绘制Agent setAgentTarget 使用r