THREE.js 第7页

three.js入门超详细附带素材及源码

three.js学习总结超详细附带素材及源码vue安装three.jsnpminstall--savethree引入three.jsimport*asTHREEfrom'three'three.js结构

天生我材必有用_吴用·2023-12-29 18:30

Three.js 解决纹理渲染后模型为黑色

文章目录前言一、图片路径错误二、TextureLoader()是异步操作,但是没有回调渲染三、渲染时机不正确四、渲染函数里没有requestAnimationFrame()五、尝试使用require引入纹理六、浏览器不能读取本地文件七、光照附-颜色color加载不出总结前言有很多种情况,我一一列举一下,因为我全都试过了…一、图片路径错误要加载的图片应该从当前js文件(即load()所在的文件)开始

白瑕·2023-12-29 18:00

Three.js学习-光照和阴影(了解向)

参考：Threejs光照和阴影-知乎(zhihu.com)在ThreeJs中，物体的颜色也是通过光照叠加得到的，bling-Phong等模型在这里同样适用，ThreeJs将光照也封装成了一个对象。目录6种光照1环境光AmbientLight2点光源PointLight3聚光灯SpotLight4方向光DirectionalLight5半球光HemisphereLight6平面光RectAreaLi

九九345·2023-12-29 18:30

vue中使用three.js加载3d模型，绑定 mouseup 和 mousedown 事件不起作用

vue中使用three.js加载3d模型，绑定mouseup和mousedown事件不起作用在Three场景中，如果想要对鼠标进行操作就要引入OrbitControls.js文件，在这种控制方式下，鼠标左键为旋转视角

qq_37656005·2023-12-29 18:29

关于从入门three.js到做出3d地球这件事(第二篇: 开发必备的辅助技能)

上篇我们讲解了three.js的基本配置代码,想看的同学可以访问这个链接:关于从入门three.js到做出3d地球这件事(第一篇:通

前端瓶子君·2023-12-29 18:28

three.js对光源效果

不知道你们在写的过程中有没有遇到过这种事情，明明我已经加上光源了，但是为什么就是没有效果呢，加的位置啥的也没有错误啊，这是为什么呢？我也遇到过这样的问题一是光源没加对，有错误，二是光源正确，但是材质的问题，材质对光源不反应我们加上光源但是得到的效果依旧没有加上这时候会有人问，是不是我们的光源写错了呢？其实并不是的，而是THREE.MeshBasicMaterial是最基本的材质，也是不会对光源产生

崽崽有点笨·2023-12-29 18:28

three.js学习笔记（react版）

官网链接：three.jsdocs这个文章是记录了博主学习three的一些磕磕绊绊，查阅了大量资料后的总结。学习准备下载：three更新迭代得很快，很多方法在各种版本里的使用方法不太一样或者已经被废弃，所以下载正确的版本是很重要的，想下载最新版本的只需将@后面的版本去掉即可npminstallthree@对应版本--save下载后的three文件如下在该目录下examples/jsm放置了很多th

Pluto_fan·2023-12-29 18:57

three.js场景的背景旋转主体不动

方法一创建两个THREE对象分层控制两个DIV，创建两个THREE对象，完全弄出两套divBG，绑定创建THREE对象1，在场景中添加背景图片，设置controls的自动旋转，关键代码如下：initScene(){//场景作为一个容器scene=newTHREE.Scene()leturls=['dark-s_px.jpg','dark-s_nx.jpg','dark-s_py.jpg','dar

Beam007·2023-12-29 18:57

three.js+vue3点光源不生效的另外一个可能

解决：后来发现，我安装的three.js版本：^0.160.0，目前的最新版，于是尝试降级，我选择了^0.150.1版本，模型瞬间就有光了！demo:最后附上demo

马上风·2023-12-29 18:56

Three.js基础入门介绍——Three.js学习一【学习路线】

Three.js基础入门介绍1.深入了解Three.js前提下需要知道：【OpenGL和WebGL】1.OpenGL是一个跨平台的3D/2D的绘图标准（规范）。

小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习二【极简入门】

准备开发环境下载官网提供的three.js-master代码包，官方提供的示例和相关库文件都在里面点击进入官网下载安装vscode编辑器点击进入官网安装好后，在vscode的插件市场搜索LiveServer，点击安装，方便开小型服务，解决因直接打开的文件中存在import，导致跨源请求被拦截的问题。掌握一些概念性知识前端基本功–HTML+CSS+JS，至少会写需要引入入外部JS的单页HTML，本文

小猪猪哟·2023-12-29 17:23

Three.js基础入门介绍——Three.js学习四【模型导入】

模型导入通过Three.js的材质和几何体，我们可以很方便的创建基础3D模型，但涉及到复杂模型时，一般是由专业建模工具生成模型文件再导入的方式将模型引入到我们的3D场景中进行使用Three.js加载器Three.js

小猪猪哟·2023-12-29 17:50

WEB 3D技术 three.js 设置环境贴图高光贴图场景设置光照贴图

上文WEB3D技术three.js基础网格材质演示几何体贴图ao贴图效果我们简单构建了一个贴图和ao贴图的几何体材质我们接下来来看一下透明度贴图我们还是官网搜索MeshBasicMaterial然后是我们的

-耿瑞-·2023-12-29 09:01

利用HTML5构筑物理模拟环境～ WebGL库Three.js入门（１／３）

这是目前质量较好、讲解比较清楚的一篇Three.js的入门教程，原作者是日本人遠藤理平，由HiWebGL技术讨论群群友瀡风翻译，HiWebGL授权转载。感谢原作者的创作和瀡风辛苦翻译！

load_life·2023-12-29 02:12

WebGL库Three.js入门

HTML5和WebGL简单认识一下HTML5吧。HTML5是目前构成WEB页的主流的HTML4和XHTML的后续语言、2008年制定了草案、约定各大浏览器提供商一起力争在2014年前形成正式的版本。HTML5在2012年1月还处于「草案」阶段、虽然还处于规范在变动的准备阶段、但是无论是开发者还是用户都非常的关注。一个主要的理由就是、随着iPhone和Android等智能手机的崛起，人们期待HTML

celte·2023-12-29 02:41

Three.js基础入门介绍——Three.js学习三【借助控制器操作相机】

在Three.js基础入门介绍——Three.js学习二【极简入门】中介绍了如何搭建Three.js开发环境并实现一个包含旋转立方体的场景示例，以此为前提，本篇将引进一个控制器的概念并使用”轨道控制器”

小猪猪哟·2023-12-28 19:39

three.js实现3D汽车展厅效果展示

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：importCarShowroomfrom'.

不爱敲代码的小胡·2023-12-28 17:06

WEB 3D技术 three.js 基础网格材质演示几何体贴图 ao贴图效果

本文我们来说一下基础网格材质之前我们也用到过这个材质但是用的非常基础我们在官网搜索MeshBasicMaterial这是能够给到物体最基础的材质但也是性能最好的材质后续我们还会学效果更好的物理材质但还是那句话效果复杂的东西对性能消耗自然会更多我们拉下来会发现他有非常非常多的属性我们先来写个最基础的编写代码如下import'./style.css'import*asTHREEfrom"three";

-耿瑞-·2023-12-28 12:50

WEB 3D技术 three.js带着大家简单在文档上过一下集合体并理解如何在文档中调试参数

前面讲了自己创建集合体顶点分组但是这样其实挺麻烦的three.js其实已经给我们封装好了官网直接搜索geometry这边这个立方体应该算是我们用的最多的这里这个就是通过三个参数设置它们分别对应高度宽度厚度拉下来我们看到其实他有六个参数前面的

-耿瑞-·2023-12-27 04:04

threejs--初创项目

一.环境介绍倘若你只是使用Three.js库中所提供的几何体，且不载入任何纹理贴图，则网页是可以从本地的文件系统中打开，并且是能够直接运行的，只需在文件管理器中双击HTML文件，它就可以在浏览器中进行显示

知行合一实践派·2023-12-26 16:53

通过three.js玩转车展项目

1.项目搭建1.1创建文件夹mkdir文件名1.2初始化package.jsonnpminit-y1.3安装打包工具并配置相关依赖npmiparcel-d在package.json中打包路径和指令1.4安装three.jsnpmithree-d2.项目搭建2.1新建index.html，并再index.html引入car.js,在car.js开始初始化2.2在car.js中初始化场景、相机、渲染器

贝贝小菜鸟·2023-12-26 07:04

ArcGIS API在视图中渲染Three.js场景

那么我们可以直接编写WebGL代码，也可以集成第三方WebGL库（例如Three.js）。现在我门就来尝试在ArcGIS的三维场景中加入一个物体，比如说UFO：UFO模型该模型下载自CG模型网。然

travelclover·2023-12-26 00:27

three.js使用精灵模型Sprite渲染森林

效果：源码：//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";exportdefault{data(){return{n

汉武大帝··2023-12-25 20:51

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模型

南方姑娘-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{