three.js共0篇
three.js
排序
Threejs制作超炫酷的3D相册
前言 前段时间笔者学习了threejs，了解了一些基本的使用方法，引起了想要做个相关的3Ddemo的兴趣，于是想到了做个3D的相框册，同时参考了网上一些其他笔者的方法自己手动实现了一下，以下是这个...
2年前
Three.js 进阶之旅：实现王国之泪神庙能量光环 ?
摘要 如封面图所示，本文将基于 Vue3 + Three.js + GLSL 的相关知识，实现游戏《塞尔达传说：王国之泪》中低配版神庙能量光环效果。通过本文的阅读和学习，你将学习到的知识点包括：在 Three.js...
2年前
写一个高德地图巡航功能的小DEMO
风格设置 加载地图 使用AMapLoader.load加载地图，从 控制台 申请一个属于自己的key import AMapLoader from '@amap/amap-jsapi-loader'; ... const AMap = await AMapLoader.load({ 'key': '您...
2年前
手把手带你入门 Three.js Shader 系列（三）
文章更新（可能 ❌ / 一定 ✅）没那么频繁，欢迎加入「可视化交流群」进行交流。加古柳微信「xiaoaizhj」备注「可视化加群」即可，也有机会围观古柳朋友圈，实时追踪最新动态！另外，大家可以点...
2年前
3D数字孪生 – Three.js 项目实战之相机（四）
承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）有介绍，在使用 three/filber 的Canvas组件时，默认情况下，会自动添加初始化一个透视相机（PerspectiveCamera），模拟了人...
2年前
在Three.js中实现汽车的3D展示
汽车的3D展示是一个比较常见的应用，今天我就通过three.js来与大家分享如何实现一个非常简单的3D汽车展示场景。 前言 虽然例子很简单，但也需要您掌握基本的three.js知识点，例如场景、模型等基...
2年前
基于three.js实现第一人称的碰撞检测
简介 通过three.js我们可以在网站中实现比较不错的3D效果，但three.js仅仅只是一个渲染库，如果想要做碰撞检测的话，通常情况会加上物理系统。 但今天，我想聊的是通过three.js的内置模块Octree...
2年前
我在前端修马路——three.js
这是three.js系列的第三篇文章。本文的内容包含基础场景的创建、模型加载、模型动画播放、碰撞检测等。 这里是预览地址 一、基础环境的搭建 这个部分主要内容是说明基础环境的搭建，初始化项目...
2年前
Threejs 实现虚拟摇杆遨游星空 ✨✨
在做和做好是两码事，在这个人均摆烂的时代，前者足以感动自己了。 写在最前 今天短视频刷着刷着，刷到了Uzi要复出加入EDG的视频，刚开始看到熟悉的营销号的开场白感觉一眼假，于是乎我像往常一...
2年前
Three.js- CSS2DRenderer 在3D场景中添加标签
CSS2DRenderer css2DRenderer是一种特殊的渲染器，用于将HTML嵌到3D场景中，它可以让我们在3D场景中添加并显示 2D 的 HTML 元素。这对于创建用户界面和展示信息非常有用。比如在VR看房中，每个...
2年前
倘若我用出这招3Dkunkun,阁下该如何应对呢!
抛玉引砖 我正在参加「掘金·启航计划」,最新闲来无事,决定学习一下新技术,丰富一下自身(实在是无鱼可摸了,jym发小故事的频率不太行啊),所以就让我来给jym创造一点话题吧.最近看了几篇threejs的...
2年前
three.js 模型适应窗口调整显示大小代码解读
直接看效果 调整前调整后调整后模型可以全部展示，不会超出显示区域，有一些比较小的模型也是可以放大显示的 直接贴代码 function fitOnScreen() { const box = new THREE.Box3().setFromObject...
2年前
如何用Three.js + Blender打造一个web 3D展览馆
作者：vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷，web 3D炙手可热，本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么，...
2年前
Three.js 学习记录shader黑客帝国数字雨
Three.js 学习记录shader黑客帝国数字雨 想锻炼锻炼自己输出能力 实现效果 需要一定shader知识 使用glsl-canvas插件展示效果 分步骤实现 1、生成黑白渐变图 根据y轴高度生成渐变，y值越大越白 #...
2年前
Threejs-创建一个星空和星系
一、星空 1、搭建一个基本的 Three.js 场景。 首先创建场景、相机、渲染器、控制器。基础可参考这篇。 import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/co...
2年前Three 3D物理引擎 Cannon-es
3D 物理引擎 Cannon-es.js 官方文档 官方示例 npm地址 Import Cannon-es.js npm install cannnon-es 引入 import * as CANNON from 'cannon-es' 初始工作 引入模型，加入灯光 <script setup ...
2年前
threejs系列：使用iconfont创造一个小动物场
内容：本文是使用threejs解析svg格式的iconfont图标内容，在第三维方向上延伸挤出，达到3D的效果。主要内容包括创建threejs环境和使用iconfont绘制3D内容。技术选用：react+three。 创世——创...
2年前
Three.js入门
Three.js 介绍 Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。 Three.js...
2年前
three.js-基础材质实现着色器编程
一、基础材质实现着色器编程 Three.js提供了着色器材质（ShaderMaterial和RawShaderMaterial，着色器材质可参考这篇文章），它允许我们编写自定义着色器代码，着色器代码就像是一份指导书，告诉...
2年前
渲染流水线(一)
什么是渲染流水线 渲染流水线的工作任务在于由一个三维场景出发、生成(或者说渲染)一张二维图像。换句话说，计算机需要从一系列的顶点数据、纹理等信息出发，把这些信息最终转换成一张人眼可以...
2年前