three.js 第5页

【开源分享】3D 照片墙

基于threejs实现的1、功能采用显示3D照片墙，共有4中样式分别如下1.1照片墙1.2水晶球1.3螺旋塔1.4展览厅2、产品特点2.1绚丽采用Three.js的3D样式，打破了传统照片墙单调乏味的风格

猿徕如此·2024-01-14 19:50

three.js讲解

文章目录一、概念二、案例三、常见问题四、优缺点五、相关链接一、概念three.js是一个基于WebGL的JavaScript库，用于创建和展示三维图形。

雪梅零落·2024-01-14 17:04

three.js 创建三维模型

安装three.jsnpminstallthree--save引入import*asTHREEfrom'three';//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from'three/addons/controls/OrbitControls.js';import{DragControls}from'three/examples/jsm/con

inkbamboo·2024-01-14 17:48

【Threejs】代码+图文带你快速上手

个人主页：南木元元在上篇文章中，我们已经介绍了three.js，并使用vite搭建了three.js的开发环境，实现了第一个3D场景。

南木元元·2024-01-14 14:49

从three.js旋转动画，我了解了requestAnimationFrame

个人主页：南木元元目录three.js旋转动画动画前置知识屏幕刷新率与浏览器重绘次数动画是如何形成的实现动画的方式有哪些什么是requestAnimationFramesetTimeout&&setInterval

南木元元·2024-01-14 14:49

2024年了，是该学学Three.js了

个人主页：南木元元目录Three.js介绍Three.js应用场景搭建开发环境初始化项目创建文件配置命令启动服务Three.js的一些重要概念第一个3D场景渲染器3D场景的实现1.创建三维场景2.创建透视相机

南木元元·2024-01-14 14:18

three.js学习笔记 day1-2

如果没有场景，Three.js就无法渲染任何物体。其次，摄相机决定了能够在场景中看到什么，即屏幕上哪些东西需要渲染。最后，渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子，然后调用底

github_czy·2024-01-14 01:40

WEB 3D技术 three.js 聚光灯

本文我们来说说点光源和聚光灯点光源就像一个电灯泡一样想四周发散光而聚光灯就像手电筒一样像一个方向射过去距离越远范围越大光越弱我们先来看一个聚光灯的效果我们可以编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js

-耿瑞-·2024-01-14 00:34

WEB 3D技术 three.js 阴影属性

上文WEB3D技术three.js光照与阴影我们说了阴影那么我们继续将阴影的属性目前我们的代码import'.

-耿瑞-·2024-01-13 18:24

three.js 加载透明贴图模型不正常显示的问题，渲染透明贴图gltf模型

概述：现在有一个从3dmax导出的gltf模型，贴图方式是透明贴图，想要用three.js加载显示出来，但是在gltfViewer中预览时是不支持透明贴图的，不知道是不是模型的问题，从网上查了很多文章，

acoolgiser·2024-01-13 11:30

web3d-three.js场景设计器-sprite广告牌

three.js使用Sprite精灵实现文字或者图片广告牌1.将文字绘制到Canvas，调整对应宽高。

11eleven·2024-01-13 07:12

Three.JS开发指南 –第4章使用Three.js的材质

1.材质的种类材质（Material）结合几何体（Geometry）可以构成网格（Mesh）。材质就是物体的皮肤，决定几何体外表的样子。MeshBasicMaterial（网格基础材质）：基础材质，用于赋予几何体一种简单的颜色，或者显示几何体的线框。MeshDepthMaterial（网格深度材质）：根据网格到相机的距离，决定如何给网格染色。MeshNormalMaterial（网格法向材质）：简

斯特凡1899·2024-01-12 17:22

WEB 3D技术 three.js 光照与阴影

本文我们来说灯光与阴影之前我们有接触到光照类的知识但是阴影应该都是第一次接触那么我们先来看光首先是AmbientLight环境光你在官网中搜索AmbientLight官方是就写明了环境光是不会产生阴影的因为它没有反向然后是DirectionalLight平行光它是可以投射阴影的因为它是类似于太阳那太阳照下来自然是有阴影的还有就是PointLight点光源点光源也是可以产生阴影但它是自身为中心四处发

-耿瑞-·2024-01-11 13:20

three.js实现渐变墙效果（电子围栏）

three.js实现渐变墙效果（电子围栏）图例步骤两个平面几何体，添加纹理贴图平移纹理贴图代码import{ref,onMounted}from"vue";import*asTHREEfrom"three

是云呀！·2024-01-10 23:37

three.js实现旋转棱锥效果

three.js实现旋转棱锥效果图例步骤创建一个四面棱锥添加贴图render函数中旋转，修改高度代码import{ref,onMounted}from"vue";import*asTHREEfrom"three

是云呀！·2024-01-10 23:07

three.js实现信号波效果

three.js实现信号波效果图例步骤创建平面，添加贴图，平移几何体缩放代码import{ref,onMounted}from"vue";import*asTHREEfrom"three";import

是云呀！·2024-01-10 23:07

three.js实现雷达扫描效果（纹理贴图）

three.js实现雷达扫描效果（纹理贴图）图例步骤创建两个平面，分别纹理贴图，底图模型.add（光波模型）关闭材质的深度测试光波旋转代码import{ref,onMounted}from"vue";import

是云呀！·2024-01-10 23:37

three.js(三)

文章目录前言坐标辅助器(就是三条xyz轴的线段)轨道控制器物体位移与父子元素欧拉角的旋转设置画布自适应大小监听全屏lil-gui工具的使用纹理贴图(搞懂了!!!)关于找图片的位置打包后找图片的位置纹理贴图(pro)纹理贴图(promax)[等我有了新的理解就在这里补充]环境贴图(没搞懂)光线投影+模型的位置+点击交互不采用constgeometry=newTHREE.SphereGeometry(

踏过山河，踏过海·2024-01-10 12:27

如何加入开源项目的翻译工作？【记第一次提PR】

前言这周在找Three.js的学习资料的时候发现官网手册的中英文版本不太一样。我就寻思着，反正都是要看文档的，那不如顺手帮忙翻译一下最新的吧，于是就有了这次美妙的经历。

ReBeX·2024-01-10 12:54

如何在three.js中添加一个button

如何在three.js中添加一个button分类说明前言正文说明（心理路程）具体demo实现完整demo（只提供html的部分，js那部分你就直接加在js代码中即可）分类说明因为three.js属于WebGL

踏过山河，踏过海·2024-01-10 12:50

three.js实现扩散光圈效果

three.js实现扩散光圈效果图例步骤创建一个平面，添加纹理贴图缩放代码import{ref,onMounted}from"vue";import*asTHREEfrom"three";import{

是云呀！·2024-01-10 06:44

Three.js 纹理贴图的实现

ygtu2018·2024-01-10 02:38

WEB 3D技术 three.js 线框几何体

本文我们说一下线框几何体想将一个几何体以线框形式展现threeJS中有两种类可以实现第一种WireframeGeometry这种几何体其实就类似于将材质中的wireframe开启这种方法之前我们也用过还有一种就是EdgesGeometry边缘几何体我们先将代码写成这样import'./style.css'import*asTHREEfrom"three";import{OrbitControls}

-耿瑞-·2024-01-10 00:04

three.js 模型居中

物体不居中模型的几何中心位置不对，设置偏离物体实际几何中心，当设置position（0,0,0）时就会出现偏离。解决方案此处有两种解决方案建模师处理模型，将模型的几何中心移动到（0，0，0）使用代码进行模型强制居中处理//重置几何中心模型居中对group、mesh都可使用letbox=newTHREE.Box3();//box.expandByObject(this.model);box.expa

小和尚敲木头·2024-01-10 00:29

Three.JS游戏开发入门

就在不久前，创建和部署游戏的唯一方法是选择像Unity或Unreal这样的游戏引擎，学习语言，然后打包游戏并将其部署到你选择的平台上。试图通过浏览器向用户提供游戏的想法似乎是一项不可能完成的任务。幸运的是，由于浏览器技术的进步和硬件加速在所有流行的浏览器中都可用，JavaScript性能的改进以及可用处理能力的稳步提高，为浏览器创建交互式游戏体验变得越来越普遍。在本文中，我们将了解如何使用Thre

新缸中之脑·2024-01-09 08:35

元宇宙基础-Three.js | 大帅老猿threejs特训营

day01作业打卡WebGL简介WebGL（全写WebGraphicsLibrary）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。WebGL使用需要

qq_37787249·2024-01-09 08:03

WEB 3D技术 three.js 多元素包围盒

本文我们说多个物体的包围盒我们先编写如下代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";constscene=newTHREE.Scene();constsphere1=newTHREE.Mesh(newTHR

-耿瑞-·2024-01-08 15:02

WEB 3D技术 three.js 解决几何体移动后包围盒还留在原地问题

我们最基础方式创建的包围盒然后通过position改变物体的位置例如这里我们改它的x轴会发现我们几何体移动了但是包围盒确留在了原地我们可以通过updateMatrixWorld和applyMatrix4的世界坐标更新举证解决简单说Mesh出来的实例对象.updateMatrixWorld两个参数都为true几何体对象的boundingBox字段值.applyMatrix4参数Mesh出来的实例对象

-耿瑞-·2024-01-08 15:02

WEB 3D技术 three.js 元素居中与获取元素中心点

本文我们来说让物体居中以及获取它的中心点我们上文留下的这个代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/examples/jsm/loaders/RG

-耿瑞-·2024-01-08 15:58

three.js 学习笔记(学习中1.7更新) |

文章目录three.js学习笔记入门基础概念透视相机第一个three.js应用threejs画布尺寸和布局canvas画布宽高度动态变化坐标辅助器THREE.AxesHelper实现动画效果requestAnimationFrame

nuise_·2024-01-08 11:51

Three.js简介；Three.js使用与作品生成

一、Three.js简介1、简介：three.js，一个WebGL引擎，基于JavaScript，可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。

啊～哈·2024-01-08 01:16

360*180度全景图预览插件Photo Sphere Viewer

插件描述PhotoSphereViewer是一款基于Three.js的360X180度全景图预览js插件。该js插件可以360度旋转查看全景图，也可以上下180度查看图片。

MC桥默·2024-01-07 17:53

手搭我的世界基岩版服务器后台网站（LiteloaderBDS-SQLite-Spring Boot-Vue）Java后端+RESTful API；借助Three.js实现三维可视化展览交互界面

项目是刚刚完成的，于是趁热打铁把文档也写了。在这里分享出来，也方便以后回顾目录项目介绍整体设计架构图网站界面预览图技术选型和原因搭建步骤库表设计插件说明后端说明前端说明部署说明完整代码插件代码后端代码前端代码项目总结项目介绍本项目旨在为我的世界基岩版私服搭建一个可视化的后台管理系统，通过LiteloaderBDS插件实时收集游戏内数据，并将其存储在轻量级数据库SQLite中。后端采用SpringB

覚えていない903·2024-01-07 07:58

WEB 3D技术 three.js 顶点交换

本文我们来说顶点的转换其实就是我们所有顶点的位置发生转变我们整个物体的位置也会随之转变这里我们编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/e

-耿瑞-·2024-01-06 13:26

WEB 3D技术 three.js 顶点缩放

本文我们来说顶点缩放我们官网搜索BufferGeometry下面有一个scale函数例如我们先将代码写成这样上面图片和资源文件大家需要自己去加一下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGB

-耿瑞-·2024-01-06 13:26

带你入门three.js——从0到1实现一个3d可视化地图

读完本篇文章，你可以学到什么对于three.js这个框架有一个简单的理解，可以入门下。学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例带大家用

前端图形·2024-01-06 13:56

Three.js使用技巧

three.js中大多数材质需要有了光照才可以看到，MeshBasicMaterial是一种不需要光照就可以见的材质。

神小夜·2024-01-06 13:26

Three.js一起学-对比WebGL和Three.js的渲染流程

前言大家好，我是一拳~对web3D感兴趣的同学一定对WebGL和Three.js不陌生了，前者是web端实现3D场景的不二之选，后者也是业界应用最广泛，认可度最高的web端3D渲染引擎之一。

一拳小和尚LXY·2024-01-06 13:25

three.js汇总,老牌Web 3d展示Js

简述我把现在的Web前端页面动效分为四个等级1:简单的css,js,jquery的旋转,缩放,位移,淡入淡出,拉伸,渐变等效果;2:通过Ae或者其他软件导出的序列帧(或者图片),和一些简单的特效js(大多是canvas);3:通过大量数据(json)来定义的动作,包含(人物,地图等,可包含简单的3d模型,因为一些3d模型也是由json数据组成),相当复杂的css(如果css相当优秀可直接无视这篇文

lxw_powerfulCat·2024-01-06 13:54

【Three.js】渲染模型卡顿的优化办法

使用LOD技术可以在不同距离下使用不同的模型细节来优化three.js渲染性能，下面是具体步骤：创建多个模型，每个模型的面数和细节不同，这些模型应该是同一个对象的不同

小楼窗外的细雨·2024-01-06 13:24

WEB 3D技术 three.js 顶点旋转

我们来说说几何体顶点的旋转官网搜索BufferGeometry这里我们有xyz三个轴的旋转例如我们这样的代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/

-耿瑞-·2024-01-06 13:23

【Three.JS学习笔记（一）】几何体全家福

几何体摘录自官网https://threejs.org/，作为学习笔记增加了些个人的想法。立方缓冲几何体构造函数参数名含义类型默认值widthX轴上面的宽度Float1heightY轴上面的高度Float1depthZ轴上面的深度Float1widthSegmentsX轴的分段数Integer1heightSegmentsY轴的分段数Integer1depthSegmentsZ轴的分段数Integ

xxhls_02·2024-01-05 18:31

three.js 射线拾取精灵图Sprite控制场景

效果：这里只是鼠标点击时，改变了精灵图的材质颜色代码：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器i

汉武大帝··2024-01-05 15:00

three.js Raycaster(鼠标点击选中模型)

效果：代码：标准设备坐标系：three.jsCanvas画布具有一个标准设备坐标系，该坐标系的坐标原点是在canvas画布的中间位置，x轴水平向右，y轴竖直向上，标准设备坐标系的坐标值不是绝对值，是相对值，范围是[-1,1],也就是说canvas画布上任何一个位置的坐标，如果用标准设备坐标取衡量，那么坐标的所有值都在-1和1之间；屏幕坐标转为标准设备坐标：//坐标转化公式addEventListe

汉武大帝··2024-01-05 14:56

three.js使用正方体加图片实现全景看房效果

three.js使用正方体加图片实现全景看房效果实现方法创建一个正方体加载6张纹理贴图正方体z轴缩放-1调整相机位置图例代码import{ref,onMounted}from"vue";import*asTHREEfrom"three

是云呀！·2024-01-05 13:42

three.js实现电子围栏效果（纹理贴图）

three.js实现电子围栏效果（纹理贴图）实现步骤围栏的坐标坐标转换为几何体顶点，uv顶点坐标加载贴图，移动图例代码import{ref,onMounted}from"vue";import*asTHREEfrom"three

是云呀！·2024-01-05 13:35

WEB 3D技术 three.js 法向量演示性讲解

本文我们来说法向法向又叫法向量就是我们一个三维物体顶点垂直于面的方向向量他的作用用来做光反射根据光照的方向根据面进行反射我们上文写的这个代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建相机constca

-耿瑞-·2024-01-04 23:23

WEB 3D技术 three.js通过 GLTFLoader 导入并应用 gltf/glb 3D资源

上文WEB3D技术three.js雾基础使用讲解我们讲了雾的基本使用方法但是如果我们要做一个树林一颗一颗树去加那真的是要累死了我们一定是在建模软件上建模好这样的模型然后将模型导入到场景中官网中搜索GLTFLoader

-耿瑞-·2024-01-04 19:40

three.js: gltf模型设置发光描边

效果：代码：发光描边//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectCompo

汉武大帝··2024-01-04 12:09

three.js gltf后处理颜色异常(伽马校正)

效果：应用了伽马校正，好像效果不明显代码：发光描边//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器imp

汉武大帝··2024-01-04 12:34

推荐频道

three.js