Three.js 第14页

拜托，使用 Three.js 让二维图片具有 3D 效果超酷的

前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景逛sketchfab网站的时候我看到有很多二维平面转3D的模型例子，于是仿照他们的例子，使用Three.js+React技术栈，将二维漫画图片转化为三维视觉效果。本文包含的内容主要包括：THREE.Group层级模型

前端瓶子君·2023-09-28 17:24

threejs 形状几何体_Three.js模型几何体面积、体积计算

在工作中通过Three.js开发项目的时候，一些特定的情况下你可能需要计算一个三维模型的表面积或者体积，比如在3D打印的Web项目中，你需要计算一个三维模型的体积，然后通过体积计算打印一个三维模型所需要的

weixin_39821035·2023-09-28 14:16

使用three.js 集成到react项目画旋转的地球

直接看效果Konnect:Foreveryhuman上react组件EarthComponentimport{useEffect,useRef}from'react';import*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importsfrom"./index.modu

肥肥呀呀呀·2023-09-27 13:35

GLTF模型讲解

前言在繁忙的业务中，为了缩短设计和开发的周期，我们的H5小游戏更多的会采用2D的视觉风格，但总是一个风格是很无趣的，所以最近搞了一个3D物理游戏的需求，在开发的过程中遇到了不少问题，希望通过这篇文章将关于Three.js

默茉·2023-09-25 11:13

Three.js后期处理简明教程

在THREE.js中我们有一个包含一堆网格物体的场景。我们将该场景渲染为2D图像。

新缸中之脑·2023-09-24 12:36

vue中将three.js导入的3D模型中原本带有的动画进行播放

1.首先是你要确保模型中是有动画的2.在加载模型后获取动画混合器并对设置动画的物体进行播放loadModel(){//加载3D模型constloader=newGLTFLoader();loader.load('/models/donghua.glb',(gltf)=>{this.model=gltf.scenethis.scene.add(this.model);//获取动画混合器constan

祝你今天也快乐·2023-09-24 03:58

three.js内存释放问题

问题描述在使用three.js渲染3D模型时，经常性的会遇到在连续添加模型后，导致浏览器崩溃的问题，经过排查，发现是浏览器占用了太多的内存，但是却一直没有释放，导致内存被耗尽而崩溃。

朋_朋·2023-09-23 23:19

Three.js所有材质的属性及实例应用

材质（texture）所有材质：材质的共有属性融合属性THREE.MeshBasicMaterial简介属性实例应用THREE.MeshDepthMaterial简介属性实例应用联合材质简介实例应用THREE.MeshNormalMaterial简介属性实例应用在单几何体上使用多种材质实例应用THREE.MeshLambertMaterial简介属性创建实例应用THREE.MeshPhongMat

请往我的生活里加满快乐·2023-09-23 17:39

three.js——几何体划分顶点添加不同的材质

几何体划分顶点添加不同的材质前言效果图.addGroup('顶点的下标','获取几个顶点','选择材质的下标')在vue中使用前言上篇文章讲解了怎样通过索引划分顶点，通过顶点绘制图形,本章通过addGroup方法讲解根据划分的顶点来添加不同的材质效果图.addGroup(‘顶点的下标’,‘获取几个顶点’,‘选择材质的下标’)在vue中使用//创建几何图形constgeomentryBuff=new

冯浩(grow up)·2023-09-23 12:45

THREE.JS 3D模型服务器报404问题（VUE fbx文件在本地能显示服务器上不显示报404）

问题：作为新手，新建立的threeJS模型，本地运行模型是可以显示的，但服务器模型却报404写法：fbxloader("TR7007Q").then((tree)=>{tree.position.set(-1080,-20,0);this.$refs.draw.scene.add(tree);});封装好的方法：//加载fbx文件exportfunctionfbxloader(path){retu

月下脆竹書閣·2023-09-23 11:24

vue项目中使用three.js加载gltf文件时提示Unexpected token ‘＜‘, “＜!DOCTYPE “... is not valid JSON的解决办法

解决方式：将gltf文件放在public文件夹下constloader=newGLTFLoader();letthat=this;loader.load('/models/gltf/scene.gltf',gltf=>{console.log('geggegeg',gltf);varmodel=gltf.scene;that.scene.add(model);})

汉武大帝··2023-09-23 10:22

three.js加载gltf文件过程以及遇到的问题

说明：在vue项目中使用的threejs;刚开始，我是从网上下载的gltf文件，将.gltf文件放在了src/assets/xxx.gltf,对gltf格式的文件并不了解，使用如下方式加载gltf文件时，//创建gltf加载器对象constloader=newGLTFLoader();letthat=this;loader.load("/models/gltf/box.gltf",(gltf)=>

汉武大帝··2023-09-23 10:50

基于 Three.js 的图形操纵控件

一、背景Three.js是一个前端三维图形展示库。它自带了一个三维图形控件，OrbitControls.js，可以控制三维图形的平移、缩放、旋转。

前端小芬芬·2023-09-23 10:45

【vue使用three.js时报Unexpected token ＜ in JSON at position 0错误】

vue使用three.js时报Unexpectedtoken<inJSONatposition0错误只要把模型文件放到public文件夹或者static文件夹下调用就可以了，不能放在src文件夹里面

[廾匸]·2023-09-23 05:42

0基础学three.js前言（1）

从今天开始，我将更新0基础学three.js系列。

智商偏低·2023-09-23 02:34

0基础学three.js环境搭建(2)

这是0基础学three.js系列中的第二篇，在这篇里面我会带着大家把开发环境搭建起来，关于开发环境，方式很多，如果你没有基础，就跟着我的步骤一步一步来，保你不出错。

智商偏低·2023-09-23 02:31

网站登录界面制作（three.js 3D特效背景）+ boostrap导航栏实现 + jQuery移动窗口【附加源代码】

网站登录界面制作（three.js3D特效背景）+boostrap导航栏实现文章目录网站登录界面制作（three.js3D特效背景）+boostrap导航栏实现前言登录界面效果图主页面效果图：主页面源代码前言学过Web前端的许多小伙伴都会面对门户网站制作的大作业报告，这里给大家分享一下我的前端大作业。后续还会继续更新，喜欢的小伙伴可以点个赞。登录界面效果图注意上述为动态界面：登录界面body{ma

蒜白·2023-09-22 23:43

ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)

ThreeJS官网Three.js–JavaScript3DLibraryThreeJS的三要素——场景(scene)、相机(camera)、渲染器(renderer)。ThreeJS的灯光。

xyphf_和派孔明·2023-09-22 19:54

初探WebGL-基于Three.js绘制顶点不同颜色的旋转立方体

一、简介WebGL是什么呢？百度百科给出的解释：WebGL（WebGraphicsLibrary）是一种3D绘图协议，是将JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数

Elvira_D·2023-09-22 19:24

Three.js教程：WebGL渲染器设置(锯齿模糊)

ygtu2018·2023-09-22 19:24

Three.js——一、初识Three以及基础的前端场景搭建(结尾含源码)

速成Three.js——一、初识Three以及基础的前端场景搭建(结尾含源码)文章：Three——一、初识Three以及基础的前端场景搭建(结尾含源码)Three——二、加强对三维空间的认识Three—

Southern Wind·2023-09-22 19:23

关于three.js渲染器THREE.WebGLRenderer()参数的介绍和使用

首先来看下THREE.WebGLRenderer可以设置的参数如下：varrenderer=newTHREE.WebGLRenderer({//创建渲染器对象//canvas:document.getElementById('can3d'),//渲染器绘制其输出的画布，alpha:false,//画布是否包含alpha（透明度）缓冲区。默认值为false。premultipliedAlpha:tr

前端-阿辉·2023-09-22 19:22

Three.js基础之图元

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

四月的你·2023-09-22 17:37

Three.js入门④

最近学习Three.js，此贴供学习记录之用。学习视频：Three.js教程。讲解很详细，也有配套的笔记，但不包含前端基础知识的讲解，如果是纯小白的朋友，可以找这位up之前的教程学习一下。

侯咕咕·2023-09-22 17:06

Three.js常见几何体和曲线API介绍

Three.js常见几何体和曲线API介绍本文是Three.js电子书的7.1节本节课主要内容是对Threejs几何体和曲线相关的API进行一个整体的介绍，更具体的介绍可以查看本章后面几节课程。

郭隆邦技术博客·2023-09-22 17:05

我不想做webgl3:three js初步学习2

参考链接：linkhttp://www.yanhuangxueyuan.com/Three.js/鼠标操作三维场景为了使用鼠标操作三维场景，可以借助three.js众多控件之一OrbitControls.js

陈傻鱼·2023-09-22 17:04

three.js学习二

物体：物体由两部分组成，材质和形状形状：物体的形状，球体，正方体，线条，粒子等直线线条：varmaterial=newTHREE.LineBasicMaterial({//这是线段材质color:0x0000ff});varpoints=[];//折线端点points.push(newTHREE.Vector3(-10,0,0));points.push(newTHREE.Vector3(0,10

黄丫丫001·2023-09-22 17:34

Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用

渲染帧率和相机适配体验Three——四、几何体、高光网络材质、锯齿模糊以及GUI库的使用Three——五、点线模型对象、三角形概念、几何体顶点位置，顶点索引、法线以及对几何体进行旋转缩放和平移Threejs常见几何体简介Three.js

Southern Wind·2023-09-22 17:04

前端开发笔记之three.js基本语法

1.引入three.js//原生写法，需要在官网先下载three.js文件包，然后在HTML文件中配置引入{"imports":{"three":"../..

往事随风，唯有技术·2023-09-22 17:03

three.js 基础入门

总体思路：1.创建场景2.创建物体（指定几何体、材质）3.把物体加入场景4.创建相机（指定机位及拍摄对象）5.创建渲染器（指定画布大小，渲染场景和相机）//1.创建场景constscene=newTHREE.Scene();//2.创建物体（指定几何体、材质）constgeometry=newTHREE.BoxGeometry(100,100,100);constmaterial=newTHREE

牧羊狼的狼·2023-09-22 17:33

three.js制作全景图_“飞行员”的制作：使用Three.js动画制作基本的3D场景

three.js制作全景图Viewdemo查看演示DownloadSource下载源Today,wearegoingtocreateasimple3DflyingplaneusingThree.js,a3DlibrarythatmakesWebGLsimpler.WebGLisaprettyunknownworldformanydevelopersbecauseofthecomplexityand

culiao9310·2023-09-21 21:22

数字孪生——thing.js和three.js

一、前言数字孪生指的是采用虚拟仿真技术，将物理实体的全部或部分信息数字化并复制到虚拟世界中，使得物理实体对象的一切运动、行为及系统属性在虚拟空间中得以表现和模拟的技术。其以数据为驱动，构建孪生体模型，继而在数字空间模拟仿真物理系统的演绎过程，进一步在数字空间对孪生系统进行推演和预测。它主要基于遥感、传感器等技术实现，并运用大数据、人工智能、云计算等技术提高其精确度，为智能决策和高效操作提供支撑。本

smile_hahahaxixi·2023-09-21 05:45

three.js中矩阵变换及两种旋转表达方式 2021-12-15

本篇简单介绍three.js中矩阵变换及两种旋转表达方式。矩阵变换three.js使用矩阵来保存Object3D的变换信息。

小沙坨·2023-09-21 00:21

WebAR ｜关于WebGL标准

为了简化开发，市面上有一些流行的基于WebGL的框架：Three.js：Three.js是一个基于JavaScript的库，它以低复杂度在Web

三次方·2023-09-20 21:00

Three.js光源梳理3——平行光（DirectionalLight）

平行光本质是一个方向向量，在shader中计算时直接与模型顶点的法线方向进行dot点乘操作。如果L(平行光)的向量与N(顶点法线方向)一样(NDotL=1)，那么表示模型的这个点正对着光源，应该最亮，相反，如果两个向量呈相反方向(NDotL=-1)，那么则表示这个点背对光源，应该最暗。image.png基础的兰伯特计算模型的明暗就是NdotL。与Unity中的平行光不一样的是，Unity中平行光仅

ShawnWeasley·2023-09-20 18:14

Three.js光源梳理4——半球光（HemisphereLight）

半球光是一个比较有意思的光，Unity中是没有这种光的，半球光的图示如下：半球光半球光的原理由两部分组成，一部分是从下往上的平行光，一部分是从上半球往中心点的光。如下：image.png从而实现了模拟模型法线向上的部分天空光线照射到物体上，法线向下的部分接收来自于地面的反射环境光。半球光不能投射阴影。HemisphereLight类构造：skyColor-(可选参数)天空中发出光线的颜色。缺省值0

ShawnWeasley·2023-09-20 18:14

Three.js学习六——模型动画

目录Three.js动画系统（Animationsystem）实现流程基本流程工程文件场景搭建添加模型模型动画动画实现的基本流程相关对象方法和代码完整代码和实现效果Three.js动画系统（Animationsystem

Mr_Bobcp·2023-09-20 18:14

Three.js 粒子系统动画与发光材质——利用HTML5画布绘制

用Three.js做了个字体的粒子系统动画，且`自定义性`极高，设置speedX=speedY=speedZ=1000的参数，截图如下：预览地址：https://joeoeoe.github.io/Jonithan-s-Three.js

Jonithan_·2023-09-20 18:43

Three.js(1)---＞基础篇-导入3d模型

Three.js基础篇-导入3d模型本篇实现效果：安装/配置基本概念及说明代码实现下一篇本篇实现效果：安装/配置我们这里将使用最新的Vue3以及最新的Three.js(0.132.2)进行开发1.使用vue-cli

acqui~Zhang·2023-09-20 16:49

Three.js 基础

引言本文主要是讲解Three.js的相关概念，帮助读者对Three.js以及相关知识形成比较完整的理解。近年来web得到了快速的发展。随着HTML5的普及，网页的表现能力越来越强大。

ccessl·2023-09-20 15:15

ThreeJS-3D教学一基础场景创建

Three.js是一个开源的JS3D图形库，用于创建和展示高性能、交互式的3D图形场景。它建立在WebGL技术之上，并提供了丰富的功能和工具，使开发者可以轻松地构建令人惊叹的3D可视化效果。

天外天-亮·2023-09-20 15:45

three.js学习笔记(十三)——真实渲染

初始场景只有一个测试白球和gui面板设置把球体材质改为标准网格材质MeshStandardMaterial，再添加平行光constdirectionalLight=newTHREE.DirectionalLight('#ffffff',1)directionalLight.position.set(0.25,3,-2.25)scene.add(directionalLight)gui.add(di

hongsir_12·2023-09-20 08:56

three.js学习笔记(十)——物理引擎

我们可以利用数学函数和一些解决方案像RayCaster来实现自己的物理效果，但是如果需求更加真实的物理效果，像是物体张力、摩擦力、拉伸、反弹等真实物理效果，最好使用外部库原理我们会创建一个Three.js

hongsir_12·2023-09-20 08:56

three.js学习笔记(一)——GUI工具的使用

Dat.gui是一个GUI组件，他可以为你的demo提供参数的设置官方github安装与引入npminstall--savedat.guiimport*asdatfrom'dat.gui'实例化对象//实例化可视化GUI工具可以通过按H键隐藏GUI面板constgui=newdat.GUI()//可传递参数{closed:true,width:400}//gui.hide()//隐藏GUI面板，可

hongsir_12·2023-09-20 08:25

第五节：Three.js光源的类型【Three.js整理】

Three.js光源类型：环境光THREE.AmbientLight、点光源THREE.PointLight、聚光灯THREE.SpotLight、定向光THREE.DirectionalLight、半球光

web搅拌机·2023-09-20 08:55

25 Three.js的点光源THREE.PointLight

介绍Three.js库中的THREE.PointLight（点光源）是一种单点发光、照射所有方向的光源。比如夜空中的照明弹。

暮志未晚Webgl·2023-09-20 08:53

Three.js学习七——播放模型动画时模型沿着轨迹移动

目录效果描述实现流程基本流程工程文件搭建场景添加模型和播放动画添加路径和模型移动完整代码和实现效果效果描述在播放导入的模型动画同时，让模型沿着预定路径轨迹移动。例如导入一个会跑步动作的模型，让它沿着一条类似跑道的路径跑步移动。实现流程基本流程1、搭建场景2、添加模型和播放动画3、添加路径和模型移动工程文件工程文件结构如下图：static：存放静态资源文件three.js-master：为官网下载的

Mr_Bobcp·2023-09-20 08:18

Three.js学习三——借助控制器操作相机

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

Mr_Bobcp·2023-09-20 08:48

Three.js模型压缩和拆分加载

只能压缩几何体信息，贴图等材质信息不可压缩。1.gltf格式使用gltf-pipeline和DRACOLoaderhttps://github.com/CesiumGS/gltf-pipeline安装gltf-pipelineInstallNode.jsifyoudon'talreadyhaveit,andthen:npminstall-ggltf-pipeline通过命令行使用gltf-pipe

田苗苗_7785·2023-09-20 04:47

three.js——通过顶点和顶点索引创建集合体

通过顶点和顶点索引创建集合体效果图1、创建顶点数据2、创建顶点属性3、创建材质4、创建网格5、改变网格的位置并添加到场景中6、通过顶点索引创建几何图形效果图1、创建顶点数据//创建顶点数据每三个一个顶点逆时针为正面constvertices=newFloat32Array([-1.0,-1.0,0.0,1.0,-1.0,0.0,1.0,1.0,0.0,1.0,1.0,0.0,-1.0,1.0,0.

冯浩(grow up)·2023-09-19 16:28

推荐频道

Three.js