three.js共0篇 第2页
three.js
排序
渲染流水线(一)
什么是渲染流水线 渲染流水线的工作任务在于由一个三维场景出发、生成(或者说渲染)一张二维图像。换句话说，计算机需要从一系列的顶点数据、纹理等信息出发，把这些信息最终转换成一张人眼可以...
2年前
【深度漫谈】前端的过去，现在和未来（下）
公众号｜沐洒（ID：musama2018） 关注我，带你学点有用的 老骥伏枥，志在千里。烈士暮年，壮心不已。 大家好，我是沐洒。 时隔多日，我终于把《下篇》给大家带到了，拖这么久的原因...
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年前
前端进阶WebGL中数学知识(二)——向量
前言 本文将讲解网页3D开发中,大量使用的向量方面的知识内容,比如点乘叉乘的意义和作用。 将主要会围绕着什么是向量,作用,运算规则,几何意义和数学推导等几个方面展开。 什么是向量 向量是既有...
2年前
3D数字孪生 – 项目介绍与基础环境搭建（一）
前言 根据WMS系统基础仓库数据以及RCS调度坐标系统，生成3D可视化仓库地图，能够实时监控仓库库位坐标、调度任务状态、车辆位置等信息。 社区对于threejs的实战案例太少，于是，花了一个月的时...
2年前
Three.js光源
目录 Three.js入门 Three.js光源 本文我们将研究three.js中的灯光类型和JavaScript中的光源，探索不同的光源设置。我们的目标是全面理解光源设置和类型，比如环境光、半球光、矩形光、方向光、...
2年前
手摸手带你写3d地图(three.js)
本文章主要是实现一个具有波纹动画、地图下钻功能的3d地区域地图，废话不多说直接开始 创建场景并渲染出来 // 场景,用来存放物体的地方 const scene = new THREE.Scene(); // 透视相机 const ca...
2年前
Three.js 进阶之旅：实现王国之泪神庙能量光环 ?
摘要 如封面图所示，本文将基于 Vue3 + Three.js + GLSL 的相关知识，实现游戏《塞尔达传说：王国之泪》中低配版神庙能量光环效果。通过本文的阅读和学习，你将学习到的知识点包括：在 Three.js...
2年前
Three.js 学习记录 创建一个简单的three.js实例
创建文件 基本文件结构 在文件夹里创建index.html 在index.html引入script.js 在index.html同层级创建script.js <!DOCTYPE html> <html lang='en'> <head> <meta charset=...
2年前
用three.js搞3个炫酷粒子出场
出场就要帅气！ 1.画出模型的点 this.loadModel('apple.glb').then((model) => { let obj = model.children[0].children[0]; let geometry = obj.geometry; //放大两倍 geometry.scale(2, 2,...
2年前
threejs系列：着色器学习和例子
本文内容：介绍web着色器的基本概念，以及通过一个着色器demo来进一步理解着色器的用法和作用。 顶点着色器 & 片元着色器 首先我们需要知道threejs绘制3D物体包含了两个主要属性：顶点以及...
2年前
终于看懂了threejs源码
本文将直接从threejs的源码的基础几何体正方体和球体入手，深度解析原理。如果有webgl的基础的话，那么几何体的制作是非常容易的。 正方体 我们先看正方体的源码实现 import { BufferGeometry }...
2年前
用Three.js搞个炫酷3D字体
点进来就看炫酷的3D字体！ 1.准备工作:字体模型json 可以通过facetype.js将字体包转成typeface.json facetype.jsgithub链接：https://github.com/gero3/facetype.js facetype.js官网链接：http:...
2年前
用 Three.js 画一个哆啦A梦的时光机
想必大家都看过哆啦A梦，时光机是里面的常用道具。 那坐时光机是什么样的体验呢？ 我用 Three.js 写了一下，应该是这种感觉： 我们一起来实现一下。 首先，我们过一下 Three.js 的基础： 在二维...
2年前
3D数字孪生 – Three.js 项目实战之相机控制器（五）
机器学习 oz@0xozram 9号在twitter上发了这样的一个短视频： 当然，这属于机器学习领域的内容，也就是大名鼎鼎的 google 在2015开源的 tensorflow，TensorFlow.js也可以与Web图形库（如D3.js、T...
2年前
three.js——镜头跟踪
本篇文章主要缝合了官网的几个案例，并无高深或复杂的逻辑和代码； 镜头跟踪在游戏或者展馆等场景下非常常见，可以是第一人称，也可以是第三人称，本次带来的是第三人称的镜头跟踪方法 模型与动...
2年前
Threejs制作超炫酷的3D相册
前言 前段时间笔者学习了threejs，了解了一些基本的使用方法，引起了想要做个相关的3Ddemo的兴趣，于是想到了做个3D的相框册，同时参考了网上一些其他笔者的方法自己手动实现了一下，以下是这个...
2年前
写一个高德地图巡航功能的小DEMO
风格设置 加载地图 使用AMapLoader.load加载地图，从 控制台 申请一个属于自己的key import AMapLoader from '@amap/amap-jsapi-loader'; ... const AMap = await AMapLoader.load({ 'key': '您...
2年前
Three.js- CSS2DRenderer 在3D场景中添加标签
CSS2DRenderer css2DRenderer是一种特殊的渲染器，用于将HTML嵌到3D场景中，它可以让我们在3D场景中添加并显示 2D 的 HTML 元素。这对于创建用户界面和展示信息非常有用。比如在VR看房中，每个...
2年前
用Three.js搞个炫酷的3D区块地图
常用的3D区块地图除了那个区块，还要满足波纹散点、渐变柱体、飞线、下钻上卷、视角适配等，点开我，这就安排！用Three.js给你搞一个！ 1.准备工作 (1) 获取GeoJson 阿里的地理数据工具：http:/...
2年前