THREE.js

Three.js之模型对象、材质

Vector3与模型位置欧拉Euler与角度属性.rotation模型材质颜色(Color对象)模型材质父类Material：透明、面属性模型材质和几何体属性克隆.clone()和复制.copy()代码实现Three.js
开心就是最好·2023-09-03 13:32

Three.js添加阴影和简单后期处理

在Three.js中，可以使用渲染器的一些特性来实现阴影和后期处理效果。
X01动力装甲·2023-09-02 16:54

three.js 纹理贴图进阶

基础篇：three.js基础认识与简单应用纹理贴图：three.js纹理贴图的使用一、CubeTextureLoader--添加场景背景示例：运行结果如下图代码与详解如下：主要代码：/***设置cube
前端菜菜DayDayUp·2023-09-02 15:45

three.js 平行光与阴影及其相关属性

基础篇：three.js基础认识与简单应用纹理贴图：three.js纹理贴图的使用纹理贴图进阶：three.js纹理贴图进阶一、灯光与阴影的关系与设置--五个步骤缺一不可（点、聚会再次赘述）目标：灯光与阴影环境光无阴影平行光
前端菜菜DayDayUp·2023-09-02 15:45

three.js 渲染带动画的glb模型

废话不多少上代码//gltf加载器letmixer//添加一个变量来存储动画混合器constprogressBar=document.getElementById('progress-bar-inner')constloader=newTHREE.GLTFLoader();loader.setPath('./')loader.load('./glb/LKBB4385.glb',(gltf)=>{g
孟宪磊mxl·2023-09-02 15:45

three.js渲染带动画的glb文件

1.准备工作将下列文件在three.js的包中找到，注意的是我这里使用的是模块化版本的，这里不知道模块化的，可以先去看一下es6的模块化。
前端菜菜DayDayUp·2023-09-02 15:43

three.js 场景中如何彻底删除模型和性能优化

three.js场景中如何彻底删除模型和性能优化删除外部模型在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤：从场景中移除模型你可以使用scene.remove(model)或者scene.remove
X01动力装甲·2023-09-02 09:03

three.js TextureLoader（纹理加载附带demo） - 04

文章目录一、什么是纹理加载1.属性介绍2.代码示例二、纹理加载demo(`注意素材位置`)三、demo效果1.素材2.代码效果一、什么是纹理加载纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。我们把这张图片放在立方体上。（我通常称为贴图）。我们需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的map属性设置为该
与诸君共勉·2023-09-01 23:12

Three.js相机参数及Z-Fighting问题的解决方案

-three.js如果你看一下Three.js文档中的透视相机构造函数，它会是这样的：newTHREE.PerspectiveCamera(fov,aspect,near,far)其中：fov：相机视野
新缸中之脑·2023-09-01 02:01

20个值得收藏的WebGL性能优化技巧

推荐：用NSDT编辑器快速搭建可编程3D场景1、使用Three.js并优化WebGLThree.js是一个流行的JavaScript库，用于在WebGL中创建3D图形，它具有自己的一组优
新缸中之脑·2023-09-01 02:31

three.js(十)：线性几何体

线性几何体WireframeGeometry网格几何体EdgesGeometry边缘几何体WireframeGeometry网格几何体WireframeGeometry(geometry:BufferGeometry)geometry—任意几何体对象。constgeometry=newSphereGeometry();constwireframe=newWireframeGeometry(geom
我在人间贩卖青春·2023-08-31 23:19

three.js(九)：内置的路径合成几何体

路径合成几何体TubeGeometry管道LatheGeometry车削ExtrudeGeometry挤压TubeGeometry管道TubeGeometry(path:Curve,tubularSegments:Integer,radius:Float,radialSegments:Integer,closed:Boolean)path—Curve-一个由基类Curve继承而来的3D路径。Def
我在人间贩卖青春·2023-08-31 23:47

2021-11-04 日记

小伙子，three.js的项目不要忘了。手里的任务太多了。再不快一点学习就来不及了。这几天在啃linuxiptables.
Apbenz·2023-08-31 11:49

three.js 郭隆邦 笔记1

www.webgl3d.cn/pages/cd35b2/p3three.js下载官方文件包2023three每个月都会发布新版本threejs官方包所有版本：https://github.com/mrdoob/three.js
摇摇奶昔x·2023-08-31 04:34

three.js 字体精简处理

文章目录工具介绍FreeTTFToSVGCoverterfonts-streamline处理步骤下载常用中英文ttf字体将ttf字体转换成svg字体抽取svg字体文件将精简后的ttf字体转换成json使用示例由于中英文字体文件太大，放在Web端，会占存储空间，影响加载数据，常见的做法就是从字体文件中抽取项目需要用到的文字，来达到精简字体文件的目的。工具介绍参考链接：精简ttf字体文件FreeTTF
何去何从2857·2023-08-31 01:07

three.js(七)：内置的二维几何体

二维几何体PlaneGeometry矩形平面CircleGeometry圆形平面RingGeometry圆环平面PlaneGeometry矩形平面PlaneGeometry(width:Float,height:Float,widthSegments:Integer,heightSegments:Integer)width—平面沿着X轴的宽度。默认值是1。height—平面沿着Y轴的高度。默认值是
我在人间贩卖青春·2023-08-30 20:31

three.js(五)：canvas 的响应式布局

基于上一个工程（three.js(四)：react+three.js），通过让canva
我在人间贩卖青春·2023-08-30 20:30

three.js(八)：内置的三维几何体

三维几何体BoxGeometry立方体TetrahedronGeometry四面体OctahedronGeometry八面体DodecahedronGeometry十二面体IcosahedronGeometry二十面体PolyhedronGeometry多面体SphereGeometry球体ConeGeometry圆锥CylinderGeometry圆柱TorusGeometry三维圆环Torus
我在人间贩卖青春·2023-08-30 20:29

Three.js欧拉对象Euler和四元数Quaternion

Three.js欧拉对象Euler和四元数Quaternion欧拉对象和四元数主要用来表达对象的旋转信息。
郭隆邦技术博客·2023-08-30 18:47

Three.js实现模型，模型材质可拖拽效果 DragControls

Three.js提供了一个拖拽的APIDragControls用于实现模型材质拖拽效果DragControls：是一个用于在Three.js中实现拖拽控制的辅助类。
答案—answer·2023-08-30 17:33

为three.js实现实时渲染与烘焙

Three.js社区的朋友们，大家好！现在，通过简单的API调用，实时的渲染和烘焙已经成为可能。
·2023-08-30 17:20

three.js(六)：自适应设备分辨率

自适应设备分辨率当今大多数的PC端和移动端显示器都是HD-DPI显示器。HD-DPI是HighDefinition-DotsPerInch的简称，意思是高分辨率显示器。不同设备的显示器的分辨率是不一样的。以上图中的iPhone6/7/8为例：375*667代表的手机的屏幕的物理尺寸，如果我们在其中建立一个100%充满屏幕的，那其尺寸就是375*667。Dpr代表像素密度，2表示手机屏幕在宽度上有3
我在人间贩卖青春·2023-08-30 14:29

使用Three.js + shader 实现的一些效果

效果预览地址代码地址交流群：QQ群:1082834010效果源自于shadertoy，手动搬运而来
饶砳砳·2023-08-30 03:46

three.js + suncalc 在vue中模拟太阳运行轨迹以及光照效果

近期项目需要实现一个在three中出现一个光照的效果，遂开始学习three.js，中间遇到了一些坑这边记录一下。
张旭豪·2023-08-29 18:19

如何用Three.js + Blender打造一个web 3D展览馆

作者：vivo互联网前端团队-WeiXing运营活动新玩法层出不穷，web3D炙手可热，本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web3D展览馆。
·2023-08-29 17:45

three.js中canvas画布宽高度动态变化

//onresize事件会在窗口被调整大小时发生window.onresize=function(){//重置渲染器输出画布canvas尺寸renderer.setSize(window.innerWidth,window.innerHeight);//全屏情况下：设置观察范围长宽比aspect为窗口宽高比camera.aspect=window.innerWidth/window.innerHe
汉武大帝··2023-08-29 12:00

new THREE.Vector3(1, 1, 1).normalize()；mesh.translateOnAxis(axis, 100)；两个方法介绍，

`newTHREE.Vector3(1,1,1).normalize()`是一个使用Three.js库中`Vector3`对象的方法，用于将一个三维向量归一化（normalize）。
汉武大帝··2023-08-29 12:00

Three.js给模型添加点击事件例子

点击事件import{GUI}from'./jsm/libs/dat.gui.module.js';varstats=initStats();varscene,camera,renderer,controls,light,selectObject;//场景functioninitScene(){scene=newTHREE.Scene();}//相机functioninitCamera(){cam
灵魂旅者s·2023-08-29 10:23

【Three.js + Vue 构建三维地球-Part One】

Three.js+Vue构建三维地球-PartOneVue初始化部分Vue-cli安装初始化Vue项目调整目录结构Three.js简介Three.js安装与开始使用实习的第一个任务是完成一个三维地球的首屏搭建
Ricce·2023-08-29 09:57

Vue.js2+Cesium1.103.0 十、加载 Three.js

Vue.js2+Cesium1.103.0十、加载Three.jsDemoThreeModel.vue/*eslint-disableeqeqeq*//*eslint-disableno-unused-vars*//*eslint-disableno-undef*//*eslint-disableno-caller*/import*asTHREEfrom'three'import{OrbitCon
liuzhenghe30265·2023-08-29 08:47

three.js粒子系统封装

粒子系统使用import*asTHREEfrom'three/build/three.module';exportdefaultclassSpriteParticleSystemextendsTHREE.Object3D{constructor(param){super();this.cloud=param.cloud;this.rate=param.rate!==undefined?param.
LBY_XK·2023-08-29 04:45

three.js(二)：webpack + three.js + ts

用webpack+ts开发three.js项目webpack依旧是主流的模块打包工具;ts和three.js是绝配，three.js本身就是用ts写的，ts可以为three项目提前做好规则约束，使项目的开发更加顺畅
我在人间贩卖青春·2023-08-29 01:13

three.js(三)：three.js的渲染结构

three.js的渲染结构概述three.js封装了场景、灯光、阴影、材质、纹理和三维算法，不必在直接用WebGL开发项目，但有的时候会间接用到WebGL，比如自定义着色器。
我在人间贩卖青春·2023-08-29 01:13

three.js(一)：认识three.js并创建第一个3D应用

three.js概述1-three.js是什么？
我在人间贩卖青春·2023-08-29 01:43

three.js(四)：react + three.js

绘制多个立方体1.搭建react+ts项目npxcreate-react-appbasics-demo--templatetypescriptreact+ts的用法可参考此链接：https://react-typescript-cheatsheet.netlify.app/docs/basic/setup2.安装three依赖npminstallthree@types/three--save3.安
我在人间贩卖青春·2023-08-29 01:42

Three.js跨域问题(无法预览)

Three.js跨域问题通过Three.js加载obj、FBX等格式外部模型文件的时候是ajax异步加载数据的过程，需要建立本地服务器来解决，如果不这样直接使用浏览器打开加载三维模型的.html文件，会出现报错无法模型文件无法加载
郭隆邦技术博客·2023-08-29 00:02

Three.js之几何体BufferGeometry

参考资料几何体顶点位置数据和点模型…旋转、缩放、平移几何体)知识点注：基于Three.jsv0.155.0缓冲类型几何体：BufferGeometry定义几何体顶点数据：BufferAttribute点模型：Points、PointsMaterial线模型：Line、LineBasicMaterial网格模型：Mesh、MeshBasicMaterial顶点索引：geometry.index顶点法
开心就是最好·2023-08-27 18:28

某圆形变电站三维建模模型-glb格式-三维漫游-三维可视化-三维模拟巡检

资源介绍某个圆形变电站的三维建模模型，glb格式，适用于three.js开发测试，可用来做一些三维室内漫游测试、室内导航测试和三维模拟巡检测试资源下载地址
猿经验·2023-08-27 16:49

某文化馆三维建模模型-glb格式-三维漫游-室内导航测试

资源描述某文化馆某个楼层的三维建模模型，glb格式，适用于three.js开发，可用来做一些三维室内漫游测试和室内导航测试资源下载地址
猿经验·2023-08-27 16:19

Three.js + Theatre.js WebGL动画制作简明教程

我们将演示如何为Three.js立方体制作动画、集成引人注目的视觉效果、修改颜色、试验HTML元素以及以特定时间间隔将动画与声音播放同步。
新缸中之脑·2023-08-27 10:32

Three.js学习项目--3D抗美援朝数据可视化

部分场景image.pngimage.png体验地址https://kmyc.hongbin.xyz/操作说明视频https://www.bilibili.com/video/BV1kY4y1v78z/我做了哪些（功能）draco解析glb模型同时处理部分纹理请求减轻一次加载纹理压力手动控制轨道控制器镜头动画多音频拼接控制封装动画播放器控制进度切换动画进度控制器同步音频模拟视频体验useConte
薛定谔的程序·2023-08-26 21:27

Three.js 监听纹理加载

本文简介本文介绍Three.js的基础方法：监听材质加载。在《Three.js基础纹理贴图》里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
德育处主任Pro·2023-08-24 16:10

Three.js着色器基础【含源码】

在Three.js中添加着色器的最简单方法是使用ShaderMaterial。还有一些RawShad
新缸中之脑·2023-08-23 19:13

javascript期末作业【三维房屋设计】 【文末源码+文档下载】

1、引入three.js库官网下载three.js库放置目录并引用引入js文件:设置场景（scene）（1）创建场景对象（2）设置透明相机1,透明相机的优点透明相机机制更符合于人的视角,在场景预览和游戏场景多有使用
白开水为啥没味·2023-08-23 04:38

Three.js 实现模型材质分解，拆分，拆解效果

注意：支持模型材质position修改的材质类型为type=“Mesh”,其他类型的材质修改了position可能没有实际效果在上一篇Three.js加载外部glb,fbx,gltf,obj模型文件的文章基础上新增一个
答案—answer·2023-08-23 02:34

为three.js实现实时渲染与烘焙

Three.js社区的朋友们，大家好！现在，通过简单的API调用，实时的渲染和烘焙已经成为可能。
·2023-08-21 17:31

Three.js之几何体、高光材质、渲染器设置、gui

参考资料阵列立方体和相机适配体验Threejs常见几何体简介…gui.js库(可视化改变三维场景)知识点注：基于Three.jsv0.155.0长方体：oxGeometry球体：SphereGeometry圆柱：CylinderGeometry矩形平面：PlaneGeometry圆形平面：CircleGeometry高光网格材质：MeshPhongMaterial（shininess、specul
开心就是最好·2023-08-21 12:17

three.js 中设置透明背景

类似这样的，canvas感觉是透明的，里面的3D在上面，通常做地球旋转之类的效果，webgl设置：setClearColor（1.0,1.0,1.0,1.0）rgba格式最后一个参数就是alphathree.js设置：renderer=newTHREE.WebGLRenderer({antialias:true,alpha:true});renderer.setClearColor(0xEEEEE
那年我七岁·2023-08-20 22:50

基于Three.js的WebXR渲染入门

1、Three.js渲染管线快速概览我不会花太多时间讨论Three.JS渲染管道的工作原理，因为它在互联网上有详细记录（例如，此链接）。我将在下图中列出基础知识，以便更容易理解各个部分的去向。
xiangzhihong8·2023-08-20 06:51

Three.js 实现模型材质局部辉光效果和解决辉光影响场景背景图显示的问题

它将场景和相机作为输入，使用Three.js默认的渲染器（renderer）来进行场景渲染，并将结果输出给下一个渲染通道)3.Unre
答案—answer·2023-08-20 03:56
上一页 12 13 14 15 16 17 18 19 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他