排序
Threejs制作超炫酷的3D相册
前言 前段时间笔者学习了threejs,了解了一些基本的使用方法,引起了想要做个相关的3Ddemo的兴趣,于是想到了做个3D的相框册,同时参考了网上一些其他笔者的方法自己手动实现了一下,以下是这个...
3D数字孪生 – Three.js 项目实战之相机控制器(五)
机器学习 oz@0xozram 9号在twitter上发了这样的一个短视频: 当然,这属于机器学习领域的内容,也就是大名鼎鼎的 google 在2015开源的 tensorflow,TensorFlow.js也可以与Web图形库(如D3.js、T...
用Three.js搞个炫酷3D字体
点进来就看炫酷的3D字体! 1.准备工作:字体模型json 可以通过facetype.js将字体包转成typeface.json facetype.jsgithub链接:https://github.com/gero3/facetype.js facetype.js官网链接:http:...
前端进阶WebGL中数学知识(二)——向量
前言 本文将讲解网页3D开发中,大量使用的向量方面的知识内容,比如点乘叉乘的意义和作用。 将主要会围绕着什么是向量,作用,运算规则,几何意义和数学推导等几个方面展开。 什么是向量 向量是既有...
【深度漫谈】前端的过去,现在和未来(下)
公众号|沐洒(ID:musama2018) 关注我,带你学点有用的 老骥伏枥,志在千里。烈士暮年,壮心不已。 大家好,我是沐洒。 时隔多日,我终于把《下篇》给大家带到了,拖这么久的原因...
探索3D魔力:与Three.js共舞的五大库和工具
前言 在当今数字化的世界中,三维图形已经成为了各个领域中引人注目的焦点。而Three.js作为一个广泛应用的3D图形库,为开发人员提供了强大而灵活的工具,使得创建精美的3D应用成为可能。然而,T...
用Three.js搞个炫酷的3D区块地图
常用的3D区块地图除了那个区块,还要满足波纹散点、渐变柱体、飞线、下钻上卷、视角适配等,点开我,这就安排!用Three.js给你搞一个! 1.准备工作 (1) 获取GeoJson 阿里的地理数据工具:http:/...
用three.js实现一个圣诞节下雪场景
效果图: 该场景中包含了动画,下雪,灯光,天空盒,音乐播放等效果,话不多说,上代码。 引入基本模块 需要分别引入three对象、相机视角控制器、模型加载器 import * as THREE from './node_mo...
threejs系列:使用iconfont创造一个小动物场
内容:本文是使用threejs解析svg格式的iconfont图标内容,在第三维方向上延伸挤出,达到3D的效果。主要内容包括创建threejs环境和使用iconfont绘制3D内容。技术选用:react+three。 创世——创...
倘若我用出这招3Dkunkun,阁下该如何应对呢!
抛玉引砖 我正在参加「掘金·启航计划」,最新闲来无事,决定学习一下新技术,丰富一下自身(实在是无鱼可摸了,jym发小故事的频率不太行啊),所以就让我来给jym创造一点话题吧.最近看了几篇threejs的...
3D数字孪生 – Three.js 项目实战之相机(四)
承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建(一)有介绍,在使用 three/filber 的Canvas组件时,默认情况下,会自动添加初始化一个透视相机(PerspectiveCamera),模拟了人...
Threejs 地图3D可视化
我正在参加「掘金·启航计划」 先上代码 也可以直接去github github.com/1023byte/3D… 前言 threejs小练习,从头实现如何加载地理数据,并将其映射到三维场景中的对象上。 获取数据 在开始绘制...
3D数字孪生 – Three.js 项目实战之场景材质(三)
接上文# 3D数字孪生 - Three.js 场景光源(二)最后的问题: “为何已关闭场景中所有光源,仍然有些面是亮的呢?” 我们不妨近距离的观察一下,打开场景中的方向光 DirectionalLight,发光的 线...
开饭啦!恰个3D饼图
用Three.js搞个3D饼图 1.准备工作 (1)渐变颜色 /** * 获取暗色向渐变颜色 * @param {string} color 基础颜色 * @param {number} step 数量 * @returns {array} list 颜色数组 */ export funct...
Three实现基础可视化搭建
大家好,我是王大傻。最近一直在学光哥的Nest,想着是学完后搭配Three自己写一个可视化的完整项目,但看到很多小伙伴不知道可视化项目怎么构造,大傻就按照自己的理解给大家举几个可视化的例子...
3D数字孪生 – Three.js 场景光源(二)
前言 接下来的项目实战讲解过程中,有必要多花几个篇幅介绍一下项目中用到的两个库。 '@react-three/drei': '^9.70.3', '@react-three/fiber': '^8.13.0' 此篇仅对入门不久或者新手小白,如果对...
Three.js 学习记录 创建一个简单的three.js实例
创建文件 基本文件结构 在文件夹里创建index.html 在index.html引入script.js 在index.html同层级创建script.js <!DOCTYPE html> <html lang='en'> <head> <meta charset=...
Threejs与物理引擎
我们都知道苹果从树上脱落后会掉下来而不是飘在空中是因为万有引力,苹果掉下来不会在地面上无限滚动,因为有摩擦。如果掉下来的是个乒乓球,大概还会弹上几下,但如果是掉在苹果地里,也可能弹...
3D数字孪生 – 项目介绍与基础环境搭建(一)
前言 根据WMS系统基础仓库数据以及RCS调度坐标系统,生成3D可视化仓库地图,能够实时监控仓库库位坐标、调度任务状态、车辆位置等信息。 社区对于threejs的实战案例太少,于是,花了一个月的时...
Threejs-创建一个星空和星系
一、星空 1、搭建一个基本的 Three.js 场景。 首先创建场景、相机、渲染器、控制器。基础可参考这篇。 import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/co...