three.js

three.js后处理(发光描边OutlinePass描边样式

效果：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectComposer}fro
汉武大帝··2023-12-25 20:47

WEB 3D技术 three.js 通过分组顶点 给同一个物体设置多个材质

上文WEB3D技术three.js集合体讲解三角形构建图形顶点概念顶点值重用我们讲到一个元素是由多个面组成的那么我们是不是可以一个物体用多个材质？
-耿瑞-·2023-12-25 19:40

WEB 3D技术 three.js 通过lil-gui管理公共事件

首先导入我们的lil-gui//引入lil-guiimport{GUI}from"three/examples/jsm/libs/lil-gui.module.min.js";我们直接可以在代码最下面这样写leteventobj={Fullscreen:function(){//全屏document.body.requestFullscreen();},exitFullscreen:functio
-耿瑞-·2023-12-24 05:58

WEB 3D技术 three.js 通过lil-gui 控制x y z轴数值 操作分组 设置布尔值控制 颜色材质控制

上文WEB3D技术three.js通过lil-gui管理公共事件中我们用lil-gui处理了一下基础事件和按钮的管理那么本文我们来具体说说它能做的其他事我们先将基础代码改成这样import'.
-耿瑞-·2023-12-24 05:58

Three.js

定义：three,js,一WebGL引擎（也叫库），基于javaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供大量特性与API以绘制3D场景于浏览器。WebGL:Web图形库，一组浏览器的API,可以无需其他插件，独立渲染3D场景GPU:图形处理单元，计算机部件，负责在显示器上绘制显示图形视频：Web3D可视化学习技术栈选择(opensnewwindow)下面主要大家谈谈怎
画了五官的猕猴·2023-12-23 14:21

用ThreeJS写了一个圣诞树

就打算用three.js写一个3d版本的。
QD_ANJING·2023-12-23 13:08

three.js实战模拟VR全景视图

文章中使用到的案例图片都来源于：Humus-Textures里面有很多免费的资源，可以直接下载，每个资源里面都提供6个不同方位的图片，我们通过threejs稍微处理一下，就能实现以下3D效果的场景了。import{onMounted}from"vue";import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/con
说学逗唱攻城狮·2023-12-23 12:54

VsCode中使用threejs没有语法提示

安装three.js的typescript语法(.d.ts)的依赖npminstall--save-dev@types/three然后再退出vscode，重新进入就有代码提示了
进阶的巨人001·2023-12-23 10:16

WEB 3D技术 three.js rotation元素旋转控制

我们在官网中搜索Euler循环用的就不是三维向量了而是欧拉角对象但欧拉角也是绕着某个轴进行旋转我们有两个这样的元素官网中的order比较特殊它是先旋转完x轴然后旋转y轴最后旋转z轴order也是它默认的值一般来讲我们用就改xyz就够了order一般不需要例如我们这里设置元素沿着x轴旋转45度明显我们设置的这块蓝色元素就发生了偏转这东西也是个局部的子集会继承父元素的偏转角度这里我们设置父元素偏转45
-耿瑞-·2023-12-22 20:56

three.js学习笔记（一）：THREE.Materail五种基础材质的使用

MeshBasicMaterial（网格基础材质）：基础材质，用于给几何体赋予一种简单的颜色，或者显示几何体的线框。MeshDepthMaterial（网格深度材质）：这个材质使用从摄像机到网格的距离来决定如何给网格上色。MeshLambertMaterial（网格Lambert材质）：这是一种考虑光照影响的材质，用于创建暗淡的、不光亮的物体。MeshNormalMaterial（网格法向材质）：
卡夫卡的小熊猫·2023-12-22 18:23

three.js学习：给obj模型设置发光并解决渲染变暗问题

实现思路：借助three.js的OutlinePass管道和Raycaster光线投射实现发光线条实现步骤：1、引入相关js文件EffectComposer：用于实现three.js中的后处理效果。
卡夫卡的小熊猫·2023-12-22 18:23

2022-05-30 three.js 加载public下面的stl模型

three.js加载public下面的stl模型1.如果模型导入进去用sketchup-pro打不开那说明模型没有导入进去加载会失败，有可能报错//无效的数组长度STLLoader.js:97RangeError
奶爸程序猿·2023-12-21 11:18

WEB 3D技术 three.js position坐标位移参照控制

position是一个3维的向量对象XYZ经过前面的讲解我们可以通过元素的position控制它XYZ三个坐标轴的位置但它的坐标并不一定是整个世界坐标而是相对于它的父元素如果它的父元素就是场景那么它会相对世界坐标其实也是相对父级只是因为它的父级就是世界坐标系例如这里我们改变一下这个集合体的x轴然后把自动旋转关一下这边我们元素x轴就向右倾斜了一些我们可以在官网搜索vector如下图找到三维向量我们之
跟 耿瑞 卷出一片天·2023-12-21 05:45

WebGL开发工程和建筑可视化应用

2.选择WebGL框架：选择适合的WebGL框架，如Three.js、Babylon.js
super_Dev_OP·2023-12-21 03:38

WebGL开发艺术和创意应用

2.选择WebGL框架：选择适合的WebGL框架，如Three.js、Bab
super_Dev_OP·2023-12-21 03:38

WebGL开发虚拟旅游应用

2.选择WebGL框架：选择适合的WebGL框架，如Three.js、Bab
super_Dev_OP·2023-12-21 02:07

基于vue与three.js给模型添加标签（CSS2DRenderer与CSS2DObject）

第一步，引入import{CSS2DRenderer,CSS2DObject,}from"three/examples/jsm/renderers/CSS2DRenderer.js";第二步，创建渲染器this.tagRenderer=newCSS2DRenderer();this.tagRenderer.setSize(this.w,this.h);this.tagRenderer.domEle
printf_824·2023-12-20 21:53

【Three.js】01-1 场景scene

创建场景实例varscene=newTHREE.Scene();常用的scene属性和方法属性scene.background背景颜色设置背景颜色为天蓝色(00ffff)scene.background=newTHREE.Color(0x00ffff);scene.fog雾化THREE.Fog()：color颜色值，near开始用雾的最小距离，far雾扩散的最远距离THREE.FogExp2()：
Sandaydi·2023-12-20 16:17

Vue3使用Three.js导入gltf模型并解决模型为黑色的问题

Three.js可以让我们在网页上创建交互式的3D图形和动画。它是一个强大的JavaScript库，可以帮助我们轻松地在浏览器中实现复杂的3D效果，而无需深入了解底层的We
Heartsuit·2023-12-20 05:00

Three中几何体姿态变换

在three.js中创建出来的几何体都是平行于坐标轴的，有时候我们在项目中需要对几何体的姿态进行一定的变化，举个例子，我们给地球添加一个地点标注的时候，所创建的地点标注应该是和地球相切的，而不是平行于坐标轴
忽而秃头·2023-12-18 07:50

three.js（二）

three.js（二）参考前言正文简单开始(不使用任何框架)补充粗略带过(使用Vue框架)细致讲解(比如我使用react框架)App.jsx的进阶版项目打包补充打包遇到的问题:原因:解决办法:参考https
踏过山河，踏过海·2023-12-17 17:47

three.js(一)

文章目录three.js环境搭建正文补充示例==效果==知识点补充1:一个标准的html知识点补充2:原生的前端框架和Vue框架的区别原生的前端框架Vue框架声明式编程和响应式编程three.js环境搭建正文搭建
踏过山河，踏过海·2023-12-17 17:15

three.js加载OBJ模型

three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com，包含多种格式（obj,mtl等）。three.js现在是es6语法，旧版本是es5的。
南方姑娘-qing·2023-12-17 10:50

three.js聚光源SpotLight例子

效果：说明：这里创建了SphereGeometry球缓冲几何体，使用的材质是兰伯特网格材质MeshLambertMaterial，并对球缓冲几何体使用了纹理贴图效果，添加了聚光源，全部代码如下：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";imp
汉武大帝··2023-12-17 04:38

three.js实现管道漫游

先看效果：https://live.csdn.net/v/345285虫洞风格管道风格开始漫游结束漫游importDrawerfrom"@/components/Drawer.vue";//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{
汉武大帝··2023-12-17 04:38

three.js模拟太阳系

地球的旋转轨迹目前设置为了圆形，效果：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";exportdefault{da
汉武大帝··2023-12-17 04:32

three.js纹理贴图不清晰，颜色失真

一.贴图不清晰给渲染器加一些配置选项：//初始化渲染器letrenderer=newTHREE.WebGLRenderer({antialias:true,//抗锯齿//alpha:true})renderer.setPixelRatio(window.devicePixelRatio)//设置像素比二.颜色失真lettexture=newTHREE.TextureLoader().load("贴
拾荒旧痕·2023-12-17 00:15

Three.js中文网14入门案例

Three.js中文网import*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js
夏暖冬凉·2023-12-15 17:49

Three.js中文网1-12入门案例

Three.js中文网import*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js
夏暖冬凉·2023-12-15 17:41

Threejs之相机基础

包围盒、正投影)相机动画(.position和.lookAt())不同方向的投影视图旋转渲染结果(.up相机上方向)管道漫游案例OrbitControls旋转缩放限制相机控件MapControls代码实现Three.js
开心就是最好·2023-12-15 11:43

js也能写3D游戏？

先要上这个网站https://threejs.org，然后下载它的three.js源码放到一个目录，比如js。
Peppa_6dad·2023-12-15 08:45

一行代码解决Three.js中只能在一侧看到物体的问题

项目场景：  因为该项目比较复杂庞大，在此就简单介绍一下：  通过Three.js创建若干个物体进行了组装，从而形成了一个类似眼球模拟模型的项目，用户可以通过拖动鼠标来达到控制视角（摄像机）的目的，以此来观察整个眼球状态
hiddenSharp429·2023-12-15 06:12

three.js 入门三：buffergeometry贴图属性（position、index和uvs）

环境：three.js0.159.0一、基础知识geometry：决定物体的几何形状、轮廓；material：决定物体呈现的色彩、光影特性、贴图皮肤；mesh：场景中的物体，由geometry和materia组成；texture：贴图，用于将一个jpg等格式的图片贴到material上面（当然，material也可以不贴texture）；另外，如果material上是定义的color，那么说明，物
jackletter·2023-12-15 05:30

WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

之前已经讲过了用vue结合three.js进行开发那么自然是少不了react我们还是先创建一个文件夹终端执行npminitvite@latest输入一下项目名称然后技术选择react也不太清楚大家的基础那就选择最简单的
跟 耿瑞 卷出一片天·2023-12-14 19:51

如何将从GitHub上弄下来的Three.js本地官网设为中文

我们辛辛苦苦从git上面弄下来的Three.js本地文档启动之后会发现好家伙这鬼东西是个英文的我们可以找到根目录下的docs下的index.html然后全局搜索language变量声明的地方letlanguage
跟 耿瑞 卷出一片天·2023-12-14 19:34

Three.js修改模型中心点

需求中需要修改模型的中心点到其他位置，用于实现一些模型的对齐。本文使用三种方式实现修改模型的中心点：一、通过为模型添加父物体，再移动模型的相对位置，之后的位移旋转等通过父物体来操作。这个方法相对简单，但一方面不是“真正”地修改模型中心点，也会给模型的管理增加难度。二、通过移动模型的顶点实现修改中心点位置这个方法通过矩阵将模型所有顶点的位置全部修改了，同理，需要整体缩放模型顶点位置、角度，都可以通过
ShawnWeasley·2023-12-06 05:48

Three.js中OutlinePass与后处理冲突问题

需求是鼠标滑过物体的时候物体显示为描边选中状态方案一：OutlinePass首先尝试了官方的OutlinePass来添加外边框选中功能这是没加OutlinePass的效果：这是使用OutlinePass后的，描边是可以了，但是锯齿严重，且模型发黑：深入调研了一下发现是OutlinePass与renderer.outputEncoding=THREE.sRGBEncoding冲突，不支持sRGBEn
ShawnWeasley·2023-12-06 05:48

Three.js设置透明背景

首先我的html结构如下：DemoThree.js设置透明背景步骤如下：1.为body添加背景图body{margin:0;overflow:hidden;background-image:url('../static/53d69d934eb64.jpg');background-size:cover;background-repeat:repeat;background-position:cen
ShawnWeasley·2023-12-06 05:48

three.js中绘制RingGeometry不显示

在项目中想要实现圆弧绕立方体旋转的效果结果绘制出来的圆弧不显示多次调整位置圆弧终于显示出来了但只有一个角度能观察到这个角度可以看到换个角度又不行了查看了官方文档发现原来是少了个配置项side:THREE.DoubleSideconstringMaterial=newTHREE.MeshBasicMaterial({color:0xffffff,side:THREE.DoubleSide})加上之后
paradoxaaa_·2023-12-05 15:24

PIXI教程

好久没记录了，前公司用低代码开发前后端，离职了，最近刚入职新公司，主要做2d,3d,PIXI框架，three.js,今天分享俩个学习PIXI的网站什么是Pixi|Pixi.js中文网(huashengweilai.com
前端小菜鸟也有人起·2023-12-05 05:47

VUE2+THREE.JS 销毁，防止越来越卡顿

THREE.JS销毁将场景相关的参数重置，防止页面多次打开，导致的越来越卡顿的问题beforeDestroy(){this.resetScene();},deactivated(){this.resetScene
月下脆竹書閣·2023-12-05 05:49

webGL开发虚拟实验室技术方案

1.WebGL框架：选择适用于虚拟实验室开发的WebGL框架，例如Three.js或Babylon.js。这些框架提供了强大的图形渲染和用户交互功能。2.3D模型和纹理：收集或创建虚拟实验室
defdsdddev·2023-12-05 02:46

WebGL开发数据可视化应用

常用框架包括Three.js、Babylon.js等。2.数据准备:收集并准备用于可视化的数据。这可能涉及
defdsdddev·2023-12-05 02:46

Three.js的THREE.LOD如何加载gltf模型

要在Three.js中使用THREE.LOD加载gltf模型，可以按照以下步骤操作：1、首先，确保已经引入了Three.js库和GLTFLoader插件。
lock cylinder·2023-12-04 14:03

图解WebGL&Three.js工作原理

以Three.js为例，讲述框架在背后扮演什么样的角色？2我们为什么要了解原理？
lock cylinder·2023-12-04 14:33

WebGL笔记：js中矩阵库的使用

矩阵库手写矩阵，其实很麻烦，可以将其模块化市面上已经有许多开源的矩阵库比如《WebGL编程指南》里的cuon-matrix.jsthree.js的Matrix3和Matrix4对象three.js的Matrix4
Wang's Blog·2023-12-04 10:05

基于vue3.x与 three.js模拟地球内部结构

基于vue3.x与three.js模拟地球内部结构前言基于threejs、vue3.x、热力图实现了地球结构可视化展示。
易航动效·2023-12-04 09:18

MediaPipe 3D姿态估计简明教程

一个很好的例子是在浏览器中驱动角色动画的3D动作捕捉：NSDT工具推荐：Three.js
新缸中之脑·2023-12-04 06:00

书架选书Tween补间动画应用--Apple的学习笔记

Three.js模拟书架选书显示书名--Apple的学习笔记我说过，学习example后，会进行些美化改造。之前做的最不好的地方，就是鼠标点击书本后，书本直接瞬间弹出。
applecai·2023-12-04 06:00

three.js结合vue

npminitvite@latest然后我们cd进入刚才创建的目录下npminstall安装所需依赖npmrundev启动该项目2.整理页面将template标签以及style标签中的内容进行整理3.将three.js
fanjianwucmx·2023-12-04 02:06
上一页 3 4 5 6 7 8 9 10 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他