three.js共0篇 第2页
three.js
排序
在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年前
3D数字孪生 – 项目介绍与基础环境搭建（一）
前言 根据WMS系统基础仓库数据以及RCS调度坐标系统，生成3D可视化仓库地图，能够实时监控仓库库位坐标、调度任务状态、车辆位置等信息。 社区对于threejs的实战案例太少，于是，花了一个月的时...
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年前
用three.js实现一个圣诞节下雪场景
效果图： 该场景中包含了动画，下雪，灯光，天空盒，音乐播放等效果，话不多说，上代码。 引入基本模块 需要分别引入three对象、相机视角控制器、模型加载器 import * as THREE from './node_mo...
2年前
用Three.js搞个3D词云
2D词云经常用，是时候升级了，用一下3D词云！ 1.球坐标 除了常见的笛卡尔坐标系，极坐标系，还有一种坐标系，球坐标。通过以坐标原点为参考点，由方位角、仰角和距离构成一个三维坐标。 在three...
2年前
手把手带你入门 Three.js Shader 系列（二）
又是时隔两个月才更新这第二篇教程，原本以为最多一个星期就能更新出来，但写着写着总觉得有些地方解释的不够清楚，于是写到一半就放在一边，终于觉得不能再拖下去才找出来花两天继续写下去。可...
2年前