- 博客(21)
- 收藏
- 关注
RSS订阅原创 Three.js官网案例001—旋转的纹理盒子
今日份案例是使用Three.js创建一个旋转的纹理盒子。Three.js是一个强大的WebGL库，可以帮助我们在网页中创建3D场景。让我们一步步来看代码
2024-05-30 21:04:20
324
原创 three.js基础案例day13——模型的物理特性
这个案例主要是使用three.js中的物理引擎插件（OimoPhysics），使用OimoPhysics可以使three.js中的物体具有更真实的物理效果，例如重力、自由落体、弹簧等等。
2023-12-19 11:03:17
527
原创 three.js基础案例day11——文字加载
首先是搭建基础环境，场景、相机、渲染器和控制器，不清楚的可以查看three.js基础案例day01.这个案例主要是实现三维文字效果。3.导入TextGeometry 并使用。5.创建平面和第二个文字（文字反过来）2.导入FontLoader 并使用。1.创建平行光和点光源。
2023-12-16 19:34:49
676
原创 three.js基础案例day10——CubeTextureLoader
这个案例主要是使用CubeTextureLoader加载六张图片，并将其用作场景的背景。在场景中又创建很多小球，将加载的图片用作小球的环境贴图并给小球添加动画。
2023-12-13 13:50:54
872
1
原创 three.js基础案例day09——物体剪切clipping
今日份案例是物体剪切。主要是创建一个plane(类似于刀)，将物体切掉一部分。具体效果如下（实际物体是圆环扭结，切了两刀后的效果）
2023-12-13 10:32:38
1243
1
原创 three.js基础案例day08——shadowMapviewer
今日份案例是阴影图查看器。主要技术：光源、阴影和阴影图查看器的引入和使用。具体效果如下
2023-12-12 20:37:59
531
原创 three.js基础案例day07——立方体
首先需要搭建基础环境，场景、相机、渲染器、控制器。不清楚的可以查看three.js基础案例day01.今日份案例是多个小球组成一个立方体，今天要出去玩，所以学习的时间有点短，简单写一下吧。时间紧，任务重，直接贴全部代码了（心已经飞往小吃街了~~）注：实现这个有两种方式。
2023-12-10 12:57:33
401
原创 three.js基础案例day06 ——官网案例最小京东
今日份是three.js官网上的最小京东这个案例。这个案例主要用到的相关知识点：加载glb模型、Draco解码，动画的使用和添加环境贴图。
2023-12-09 18:37:04
508
原创 three.js基础案例day05——加载gltf(glb)模型
今天主要学习如何加载glb模型，这个案例主要用到的相关知识点：加载glb模型，动画的使用、阴影和gui控制面板。
2023-12-08 10:41:13
3691
2
原创 three.js基础案例day04——动画animation
今天主要学习的有关动画相关的技术，使用一个小球在场景中画一个爱心，同时颜色也会改变，也可以修改小球缩放或者旋转（这个案例中没有体现）
2023-12-07 15:24:25
514
1
原创 three.js基础案例day02——聚光灯和阴影
今日份案例是聚光灯和阴影相关案例，在场景中添加平面、小圆柱和聚光灯，当聚光灯照圆柱会在平面上产生阴影。
2023-12-05 11:34:42
603
原创 three.js--------内存泄漏处理
最开始时找了网上的有three.js造成内存泄漏的方法，进行了清除场景中的Group和清除场景，发现内存占用在返回时会减少，但是再次点击加载模型会比第一次更高，最后通过chrome中的开发工具Memory中发现，占用大量内存的是Octree，由于使用的three.js版本没有直接提供 clear 方法来清空八叉树的内容，使用了将八叉树对象重新实例化，以创建新的八叉树替代原有的八叉树。在网页中点击按钮加载模型，点击返回按钮返回，再次点击按钮加载模型重复几次发现内存不断变大，初步认为是内存泄漏。
2023-09-26 14:07:19
1180
1
原创 剩余参数语法和扩展运算符
（spread operator）用于在函数调用或数组/对象字面量中展开数组或对象。在函数调用中，扩展运算符可以用来传递数组中的值作为函数的参数。（rest parameters）用于在函数定义中表示接受不定数量参数，并把他们封装成一个数组。在函数内部，可以使用剩余参数来操作参数数组，例如进行遍历、转换等操作。剩余参数用于接收函数的多个参数并封装成数组，而扩展运算符则是将数组或对象展开成独立的值。示例：function myFunction(...args){....}
2023-09-15 15:58:32
128
原创 使用XR-frame框架，实现简单AR
注意这里我们开启的ar-system的模式为Plane，即平面识别，这种模式下相机不能被用户控制，需要将控制器、target等都删掉，同时ar-tracker的mode要和ar-system的完全一致。在index.wxml中，我们创建了一个场景xr-scene，并在其下添加了一个相机xr-camera。首先在场景中加载gltf模型，然后使用ar-system和ar-tracker,并修改一下xr-camera的i相关属性is-ar-camera和background=“ar”添加物体、颜色和灯光。
2023-07-13 16:12:27
2230
原创 vue项目运行不起来报错：error:03000086:digital envelope routines::initialization error的解决办法
当vue项目在运行时出现error:03000086:digital envelope routines::initialization error报错时，大概率是node版本的问题，若想让代码跑起来可以使用下面的方法（每次运行前都需要执行以下顺序）。然后再输入运行命令就可以了。
2023-06-28 09:09:43
891
2
空空如也
如何给glb模型添加碰撞体
2023-07-06
TA创建的收藏夹 TA关注的收藏夹
TA关注的人