ThreeJs

好玩的js

2、three.jsThree.js中文网http://www.webgl3d.cn/Three.js–JavaScript3DLibraryhttps://threejs.org/画3d图且能做动画和游戏的
lsswear·2023-04-14 14:00

vue中three及其依赖引入和使用

官方文档和例子[https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene]引入单页面应用//ES5，相关依赖相同模块化应用
gfddd1231·2023-04-14 13:49

ThreeJS-3D酷炫地球（三十二）

素材：链接:https://pan.baidu.com/s/1ZmwgNWV-fMO4JrPnCBDLBA提取码:m1y9关键代码：for(leti=0;iimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import{RGBELoader}from"thre
不穿铠甲的穿山甲·2023-04-14 08:32

2022-06-14 Canvas画布模糊问题

threejs的处理流程renderer=newTHREE.WebGLRenderer({antialias:true});renderer.setPixelRatio(win
SMSM·2023-04-14 01:42

WebWorker、ThreeJs的渲染和控制

在ios16.4版本中已经开始支持了OffscreenCanvas，那看样子，是时候再把Three做一波优化了背景介绍在之前的项目经验中，如果使用threejs加载比较大的3d场景，那么在创建threejs
前端_小学生·2023-04-13 01:28

Three.js初识:three.js的下载与使用

什么是threejs简单地，可以理解成three+js就可以了。three表示3D的意思，js表示javascript的意思。
HaanLen·2023-04-12 18:26

Three 之 three.js （webgl）基础 第一个入门 Web 3D 场景

webgl）基础第一个入门Web3D场景一、简单介绍二、Three中构建场景主要的三要素三、场景（Scene）四、摄像机（Camera）五、WebGLRenderer六、第一个入门Web3D场景一、简单介绍Threejs
仙魁XAN·2023-04-12 18:55

Three.js零基础入门教程(2023版本)

1.threejs文件包下载和目录简介在正式学习Three.js之前，先做一些必要的准备工作，具体说就是下载threejs官方文件包，threejs官方文件包提供了很多有用的学习资源。
郭隆邦技术博客·2023-04-12 16:04

Three.js入门

Threejs是一款WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。
程序猿向前跑·2023-04-12 16:02

Three.js教程：顶点位置数据解析渲染

推荐：将NSDT场景编辑器加入你3D工具链其他工具系列：NSDT简石数字孪生顶点位置数据解析渲染如果你没有WebGL基础，可以先不用记忆每个的threejs具体内容，有一个大致印象即可，学习本节课的重点是建立顶点的概念
yevtte2023·2023-04-12 16:00

小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转

在上一篇小程序使用threejs第一篇——安装中，除了说明了threejs在小程序中如何构建，还附带了一个小小的示例——一个旋转的正方体，接下来我们先花一点点时间通过示例代码了解一下发生了什么？
玩烂小程序·2023-04-12 16:27

threejs-效果合成器（EffectComposer）

自转的地球创建THREE.EffectComposer添加后期处理通道并更新渲染EffectComposer使用示例示例一：FilmPass添加电视效果示例二：OutlinePass添加闪烁效果总结前言threejs
迦南giser·2023-04-12 07:18

THREEJS 笔记2 灯光篇

threejs中光源有很多种，但是常见的光源只有4种：环境光（AmbientLight）点光源（pointLight）平行光(DirectinalLight)聚光灯(spotLight)环境光在不知道如何在场景中放光源的时候
论宅·2023-04-12 03:22

ThreeJS-车展（二十九）

为了更好的兼容提供素材的解码器，建议使用threejs@0.142.0版本[email protected]不然有可能会出现以下问题：素材：链接:https://pan.baidu.com
不穿铠甲的穿山甲·2023-04-11 15:07

webgl坐标转换_WebGL教程

视频教程发布地址Threejs引擎Threejs是webgl国内应用最广泛的一款三维引擎，实际做项目的时候一般都是通过一款三维引擎来完成，这样要比直接使用原生WebGL要方便的多，所在这里放了一个相关的链接
晓剑15703836037·2023-04-11 11:09

ReactThree入门1-快速场景搭建

目录简介与安装最简案例简介与安装react-three-fiber是一款集成了threejs绝大部分功能且以标签的形式来构建3d场景的库由于版本更新，最新的库改名为：@react-three/fiber
知奕奕·2023-04-11 09:21

Three.js基础入门

Threejs主要的应用场景有：物联网3D可视化随着物联网的发展,工业、建筑等各个领域与物联网相关Web项目网页交互界面都会呈现出3D化的趋势。这种方式更为直观，开发成本也比较大。
宋小菜_菜菜·2023-04-09 11:47

react-three-fiber入门项目（1）-组件化设计

three.js入门知识点资料整理文章目录系列文章目录前言一、项目效果图二、细说代码部分1.拆分组件2.地球仪部分（重点）细节：3.文字部分细节：前言GlobalWarming项目是基于react框架写的threejs
宇宙修理员·2023-04-09 10:02

react fiber加载gltf文件：3d模型

文章目录前言一、threejs引入3d模型（html版本）1.完整代码2.代码详解二、reactfiber引入3d模型（reactfiber版本）1.代码详解1.1引入3d模型的资源问题一：为什么“资源必须放在
宇宙修理员·2023-04-09 10:02

ThreeJS中的点击与交互——Raycaster的用法

转载来源：https://segmentfault.com/a/1190000010490845坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。image.png世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0,0,
IamaStupid·2023-04-09 03:15

3D 技术开发框架 threeJS

一:介绍(第一章节)一：首先我们需要了解的几个问题1.微信小程序是什么？2.three.js框架的功能以及可以实现的适用场景有哪些？3.为什么小程序'跳一跳'可以火遍大江南北？二：微信小游戏的基本介绍1.2018年年初,微信给移动端游戏开发投放了'微信小游戏'重磅炸弹。2.从技术的角度来说,'微信小游戏'是微信小程序SDK的一个升级;在微信小程序的SDK中,增加了游戏类目的一个功能能力。3.从产品
黑木令·2023-04-08 06:14

Threejs入门教程

一、本地搭建Threejs官方文档网站1.官网地址：https://github.com/mrdoob/three.js下载压缩包并解压或使用gitclone若github过慢，则使用gitee对应网址
ReturnTmp·2023-04-08 03:55

Threejs写的渐变发亮半球

马上就要毕业了，实习进入了一个GIS公司，任务要求使用Threejs写个渐变的发光半球小特效，我完成后决定写出这篇文章。给那些刚刚接触Threejs的朋友们。
gardenlike2·2023-04-08 02:02

如何理解threejs的buffergeometry的index？

计算机图形学中最小的渲染单位，是一个由3个空间顶点（Vertex）构成的空间三角形，叫Polygon。每一个polygon，会包含3个顶点在3个轴向上的9条数据，即Vertex0：X0，Y0，Z0；Vertex1：X1，Y1，Z1；Vertex2：X2，Y2，Z2；各种着色器，本质其实都是在得到3个顶点的具体空间坐标后进行线性插值。作者：蒙古上单3DPunkhttps://www.bilibili
不穿铠甲的穿山甲·2023-04-07 19:06

ThreeJS-战争导弹飞行演示（三十四）

关键代码：functionanimate(){requestAnimationFrame(animate);//使用渲染器渲染相机看这个场景的内容渲染出来renderer.render(scene,camera);//controls.update();//获取delay时间constdelay=clock.getDelta();//获取总共耗时consttime=clock.getElapsed
不穿铠甲的穿山甲·2023-04-07 19:06

ThreeJS-世界杯点球小游戏（三十三）

素材：链接:https://pan.baidu.com/s/1Ee63QRLEW4XSXUIZPjKLRw提取码:agxh新组件：npminstallcannon-es-S新引入：import*asCANNONfrom"cannon-es";关键代码：constgltfLoader=newGLTFLoader().setPath("three/glb/");constdracoLoader=new
不穿铠甲的穿山甲·2023-04-07 19:35

ThreeJS官方案例学习(3)webgl - animation-skinning

three.jswebgl-additiveanimation-skinninga{color:blue;}.control-inactivebutton{color:#888;}three.js-SkeletalAdditiveAnimationBlending(modelfrommixamo.com){"imports":{"three":"../build/three.module.js",
梦里藍天·2023-04-04 11:41

ThreeJS官方案例学习(2)webgl - animation-skinning

three.jswebgl-animation-skinninga{color:#f00;}{"imports":{"three":"../build/three.module.js","three/addons/":"./jsm/"}}import*asTHREEfrom'three';importStatsfrom'three/addons/libs/stats.module.js';impo
梦里藍天·2023-04-04 11:40

ThreeJS官方案例学习(1)webgl - animation - keyframes

three.jswebgl-animation-keyframes{"imports":{"three":"../build/three.module.js","three/addons/":"./jsm/"}}import*asTHREEfrom'three';importStatsfrom'three/addons/libs/stats.module.js';import{OrbitContr
梦里藍天·2023-04-04 11:10

路遥知马力，奋斗见真心

初级：学习过图形学相关知识，知道矩阵等数学原理在动画中的作用，知道三维场景需要的最基础的构成，能用threejs搭3d场景，知道webgl和threejs的关系。
RemenberMe·2023-04-03 13:09

threejs报错记录_1

出错代码import*asTHREEfrom'three'consttextGeometry=newTHREE.TextGeometry()export'TextBufferGeometry'(importedas'THREE')wasnotfoundin'three'分析：可能是新版本没有这个类了？解决：在three/examples/jsm/geometries/TextGeometry.js
飞鸟malred·2023-04-03 07:22

基于Threejs构建的3D立体空间实战入门

本文将简单介绍Threejs的基础对象，然后基于threejs构建一个简单的3d房间模型，并模拟拖动房间模型。首先简单介绍下Threejs的一些常见组件，罗
夜郎king·2023-04-02 21:39

ThreeJS-太阳球围绕旋转（二十四）

数学小知识：我们根据旋转角度θ可以计算出任意时刻的x,ysinθ=y0/r;因此y0=rsinθ,cosθ=x0/r,因此x0=rcosθ,小拓展：y0^+x0^-r^2*sinθ^2+r^2*cosθ^2=r^2*(sinθ^2+cosθ^2)=r^2;这也是为什么在极坐标方程中y0=rsinθ,x0=rcosθ,可以代表一个圆的原因。会极坐标方程的同学可以直接跳过该描述。关键代码：//创建一个
不穿铠甲的穿山甲·2023-04-02 21:18

ThreeJS-VR看房（二十五）

素材：六面图https://www.aliyundrive.com/s/ana5vocK53x点击链接保存，或者复制本段内容，打开「阿里云盘」APP，无需下载极速在线查看，视频原画倍速播放。hdr文件链接:https://pan.baidu.com/s/1r9OUJWb_hPcJhG7erNIUhg提取码:6c6z复制这段内容后打开百度网盘手机App，操作更方便哦VR看房案例一关键代码：//创建一
不穿铠甲的穿山甲·2023-04-02 21:18

ThreeJS-光源强度（二十二）

关键代码：//控制灯光强度gui.add(directionalLight,'intensity').min(0).max(30).step(1).name("灯光强度");完整代码：import*asdatfrom'dat.gui'//界面控制import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/contro
不穿铠甲的穿山甲·2023-04-02 21:17

ThreeJS-点光源（二十三）

点光源可以联系到现实生活中室内灯泡那为什么太阳是平行光而灯泡是点光呢？因为太阳到地球的距离太远，因此可以吧地球和太阳看成两点，因此地球接受的太阳光线可以认为是平行的，而灯泡和接受灯泡光的距离不是太远所以不能看成是平行光。关键代码：constdirectionalLight=newTHREE.PointLight(0xFF0000,0.7);完整的代码：import*asdatfrom'dat.gu
不穿铠甲的穿山甲·2023-04-02 21:17

ThreeJS-投影相机（十八）

示意图：黄线：太阳发出的平行光线视觉范围可以使用一个立方体表示，左右确定宽度，上下确定高度，远近确定长度引入：import*asdatfrom'dat.gui'//界面控制关键代码：//平行光投射相机的属性//directionalLight.shadow.camera.near=0.5;directionalLight.shadow.camera.far=500;directionalLight
不穿铠甲的穿山甲·2023-04-02 21:47

ThreeJS-平行光物体投影（十九）

平行光源（太阳光）关键代码：//平行光投射相机的属性//directionalLight.shadow.camera.near=0.5;directionalLight.shadow.camera.far=500;directionalLight.shadow.camera.top=3;directionalLight.shadow.camera.bottom=-2;directionalLigh
不穿铠甲的穿山甲·2023-04-02 21:47

ThreeJS-聚光灯物体投影（二十）

聚光灯（灯泡）关键代码：//直线光（由光源发出的灯光）//constdirectionalLight=newTHREE.DirectionalLight(0xFFFFFF,0.7);//directionalLight.position.set(10,10,10);//scene.add(directionalLight);constdirectionalLight=newTHREE.SpotLi
不穿铠甲的穿山甲·2023-04-02 21:47

ThreeJS-聚光等衰减（二十一）

聚光灯可以联系到现实中的手电筒衰减分为：距离衰减和边缘衰减.decay:Float（控制的是灯光自身的亮度）Theamountthelightdimsalongthedistanceofthelight.Defaultis2.Incontextofphysically-correctrenderingthedefaultvalueshouldnotbechanged..distance:Float
不穿铠甲的穿山甲·2023-04-02 21:47

ThreeJS-经纬线映射贴图(十六)

hdr资源：链接:https://pan.baidu.com/s/1mCdjpV7jKWHTXmExMa0T8A提取码:7ydx复制这段内容后打开百度网盘手机App，操作更方便哦增加新引入：import{RGBELoader}from"three/examples/jsm/loaders/RGBELoader"关键代码：rgbeLoader.loadAsync('three/marble13-fl
不穿铠甲的穿山甲·2023-04-02 21:17

ThreeJS-投影、投影模糊（十七）

无投影：完整的代码：import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import{RGBELoader}from"three/examples/jsm/loaders/RGBELoader"exportdefault{name:"HOME",componen
不穿铠甲的穿山甲·2023-04-02 21:17

ThreeJS-环境贴图（十五）

素材：使用球形几何体constcubeGeometry=newTHREE.SphereBufferGeometry(1,100,100);使用立方体材质letcubeTextureLoader=newTHREE.CubeTextureLoader();关键代码：//添加物体//创建一个半径为1，经纬度分段数位20的球constcubeGeometry=newTHREE.SphereBufferGe
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-自定义矩形BufferGeometry(八)

代码：import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";//动画控制import*asdatfrom"dat.gui";//界面控制exportdefault{name:"HOME",components:{//vue
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-BufferGeometry随机50个三角形（九）

代码：import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";//动画控制import*asdatfrom"dat.gui";//界面控制exportdefault{name:"HOME",components:{//vue
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-纹理（十）

关键代码：consttextureLoader=newTHREE.TextureLoader();//纹理加载器加载图片constdocColorLoader=textureLoader.load('static/1.webp')//letcolor=newTHREE.Color(Math.random(),Math.random(),Math.random());constcubeMateria
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-纹理加载进度(十四)

使用纹理加载器对纹理加载进度进行监控关键代码：//创建加载管理器constmanager=newTHREE.LoadingManager(()=>{console.log("加载完成");},(url,loaded,total)=>{console.log("当前正在加载资源"+url);console.log("总资源数"+total+"已加载"+loaded);},(e)=>{console.
不穿铠甲的穿山甲·2023-04-02 21:46

ThreeJS-全屏和退出全屏、自适应大小(五)

下载新得组件npminstallgsap-S新引入importgsapfrom'gsap'//动画控制代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'importgsapfrom'gsap'//动画控制exportdefault{name:"HOME",
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-dat.gui界面控制颜色、隐藏、位置(六)

下载组件dat.guinpminstalldat.gui-S引入组件import*asdatfrom'dat.gui'//界面控制代码：import*asTHREEfrom"three";import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'importgsapfrom'gsap'//动画控制import*asdat
不穿铠甲的穿山甲·2023-04-02 21:16

ThreeJS-文件夹、线框、点击按钮触发函数(七)

代码：import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";//动画控制import*asdatfrom"dat.gui";//界面控制exportdefault{name:"HOME",components:{//vue
不穿铠甲的穿山甲·2023-04-02 21:16
上一页 8 9 10 11 12 13 14 15 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他