THREE.js 第15页

【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——辅助器AxesHelper和轨道控制器OrbitControls的使用

辅助器AxesHelper和轨道控制器OrbitControls的使用前言效果图1、辅助器AxesHelper:是物体出现辅助的x/y/z轴2、轨道控制器OrbitControls2.1导入OrbitControls文件2.2使用2.3如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景前言1、AxesHelper官网辅助器使用的方法参数表示坐标系坐标轴线段尺寸大小，你可以根据

冯浩(grow up)·2023-09-19 12:51

three.js——模型对象的使用材质和方法

模型对象的使用材质和方法前言效果图1、旋转、缩放、平移，居中的使用1.1旋转rotation（.rotateX()、.rotateY()、.rotateZ()）1.2缩放.scale()1.3平移.translate()1.4居中.center()2、材质属性.wireframe前言BufferGeometry通过.scale()、.translate()、.rotateX()、.rotateY(

冯浩(grow up)·2023-09-19 12:51

three.js——GUI的使用

GUI的使用效果图1、导入gui2、创建一个GUI对象3、通过gui调用方法name:按钮的名称效果图1、导入gui//导入liguiimport{GUI}from'three/examples/jsm/libs/lil-gui.module.min.js'2、创建一个GUI对象constgui=newGUI()3、通过gui调用方法name:按钮的名称//创建全屏函数leteventObj={F

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

ThreeJs 基础入门

Three.js是一款运行在浏览器中的3D引擎，你可以用它在web中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解webgl的世界。

了无_数据科学·2023-09-19 07:58

webgl_gpgpu_birds 样例分析

webgl_gpgpu_birds是一个three.js的官方样例，这个例子模拟了鸟群的运动，是一个群组动画，并且动画的帧率也很高；鸟群的运动很自然，非常值得研究。

从杰·2023-09-19 03:04

three.js webgl_nodes_materials_instance_uniform 例子分析

在three.js的官方例子中webgl_nodes_materials_instance_uniform可以看到场景中有一个格子背景，一个环绕运动的点光源，12个颜色各异的球体网格。

从杰·2023-09-19 03:33

Cesium与Threejs融合

融合demo一、简介将Cesium与three.js进行融合，从而是3d具备大场景GIS能力，使GIS具备3d能力。

苹果园dog·2023-09-18 20:40

threejs的使用

threejs介绍：Three.js是一款基于WebGL的JavaScript3D库，用于创建和渲染3D图形场景。

简宁909·2023-09-18 09:05

如何安装和使用three.js

Three.js是一款基于JavaScript的开源3D图形库，用于创建和显示各种三维场景、对象和特效。它提供了丰富的功能和API，使开发者能够轻松地在浏览器中渲染复杂的3D图形。

SoftwareDevOps·2023-09-17 16:04

three.js简单3D图形的使用

npminitvite@latest//创建一个vite的脚手架选择Vanilla之后自己处理一下在main.js中写入//导入three.jsimport*asTHREEfrom'three'//创建场景constscene=newTHREE.Scene();//创建相机constcamera=newTHREE.PerspectiveCamera(45,//视角window.innerWidth

湖边看客·2023-09-17 03:35

three.js 加载fbx文件并解析

效果：stl、obj都是静态模型，不可以包含动画，fbx除了包含几何、材质信息，可以存储骨骼动画等数据。代码：.加载FBX并解析骨骼动画letN=128;letanalyser=null;//1，创建场景varscene=newTHREE.Scene();//创建STL加载器varfbxLoader=newTHREE.FBXLoader();fbxLoader.load('./斯巴达从光晕战斗进化

汉武大帝··2023-09-16 03:34

three.js 中角度弧度互转

弧度=角度/180*Math.PI角度=弧度*180/Math.PI角度转弧度THREE.MathUtils.degToRad(deg)弧度转角度THREE.MathUtils.radToDeg(rad)π（弧度）=180°（角度）