threeJs

[live streaming] CG&WebGL&Threejs知识以及学习思维分享。

对于一次直播分享的文字版记录(建议看视频),视频云盘链接全篇主要分为几个方向进行了介绍:ComputerGraphics相关WebGL相关Threejs相关Q&A暂不记录注意下述内容与直播内容可能稍微存在差异
·2022-03-14 11:27

threejs+vue3实现烟花效果

前言今年过年由于疫情又没回家，就抽空看了看WebGL编程指南和Three.js开发指南，为了练手，就简单实现了一下冬奥开幕式上的迎客松烟花效果，纯小白，这篇文章主要是记录这次实践过程，涉及的也都是threejs
·2022-03-11 12:11

【Threejs系列】-如何快速入门前置介绍

Threejs到底是什么?学习Threejs需要提前了解什么?3D方面知识以及术语解释看段示例代码注意下述内容是作为笔者的视角下很短时间内所学到知识点的总结,如有遗漏(不解处)及时指出笔者做修复。
·2022-03-10 11:55

如何在 ThreeJS 中实现辉光效果

全局辉光全局辉光（Bloom），又称泛光。它其实是一种作用于特定区域的外发光效果。在游戏中，我们经常可以见到外发光的效果。典型的比如室内场景下的吊灯、电子设备屏幕、室外夜晚的路灯、车灯等等。这些场景的共性是他们提供了亮度和气氛的强烈视觉信息。在实际生活中，这些辉光是由于光线在大气或我们的眼睛中散射而造成的。但是渲染这些物体到屏幕上后，它所达到眼睛的光强是有限的。因此，需要人为地模拟这种效果，更加逼
·2022-02-28 20:17

Threejs-医疗骨骼分析系统

加载项目，最终在手机端呈现（网页端也响应适配完成）效果预览加载stl模型拆解骨骼模型剖切查看内部结构核心代码引入js库全局变量初始化加载模型及设置相关物体属性续上续上代码简要粘贴部分，其实大部分都是通过threejs
dadalang·2022-02-23 16:05

three.js中出现条纹阴影和网格阴影解决办法

ThreeJS开启阴影正确做法：渲染器启用阴影renderer.shadowMap.enabled=true;灯光产生阴影light.castShadow=true;物体遮挡阴影obj.castShadow
·2022-02-21 17:44

threejs--自定义矩阵实现全景视觉

本文需要你有基础的webgl知识，了解矩阵、向量、透视投影、裁剪空间、视图变换和threejs框架等等内容。
花拾superzay·2022-02-21 15:36

threejs 管子_Three.js 菱形管道

JavaScript语言：JaveScriptBabelCoffeeScript确定varww=window.innerWidth,wh=window.innerHeight;varrenderer=newTHREE.WebGLRenderer({canvas:document.querySelector("canvas")});renderer.setSize(ww,wh);renderer.s
weixin_39604557·2022-02-19 07:27

THREEJS002 绘制一条直线

THREEJS002绘制一条直线实现思路设置需要渲染的DOM初始化threejs的渲染器//初始化RendererfunctioninitRenderer(){width=document.getElementById
日积-月累·2022-02-19 07:27

threejs- z-fighting 问题

https://blog.csdn.net/ruangong1203/article/details/77462643https://sites.google.com/site/threejstuts/
四是二非·2022-02-18 16:25

基于Threejs的国际象棋3D棋盘——练习寻路算法

在ThreeJS简介中已经介绍了如何使用ThreeJS框架显示一个简单的对象，并为其赋予了一个简单的默认材质。
ayusong870·2022-02-17 05:00

不用threejs，好用的三维可视化开发平台还有啥？ Javascript 3D开发 前端 物联网 webgl 三维建模 3D模型 ThingJS 虚拟 全景

Three.js是大多数开发者首次接触的WebGL3D库，Threejs库的出现解决了底层的渲染细节和复杂的数据结构，终于将复杂的底层细节抽象出来。
小锘good·2022-02-12 03:14

WebGPU时代，为什么不是Three.js or Babylon.js? （上）

https://threejs
·2022-02-10 18:01

ThreeJS总结

ThreeJS里元素如下：1.场景(Scene)：是物体、光源等元素的容器，2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机3.物体对象（Mesh）：包括二维物体
_花·2022-02-10 13:59

前端如何实现webvr全景

经过技术调研，主流实现技术方案主要有3种：1、threejsthreejs在3D流域的应用不用多说，但是最终实际效果不好、threejs的api多于繁杂等原因放弃。
ws_code_csdn·2022-02-10 13:18

three.js

Material和Geometry2.不在render()中实例化或是赋值操作3.粒子系统代替粒子4.操作一组对象使用Object3D或group5.网格合并merge6.使用Webworkershttps://threejs.org
bbh123·2022-02-05 20:52

threejs 贴图动画总结

引言在三维可视化中，会涉及到很多动画，其中贴图动画是其中很重要的一种，本文介绍几种贴图动画的思路，供大家一起探讨。流动动画流动动画通过设置贴图的repeat属性，并不断改变贴图对象的offset让贴图产生流动效果。这种动画不难实现，首先加载贴图，如下所示：letimg=newImage();img.src='./images/path.png';lettexture=neweg.Texture(i
·2021-12-19 13:18

详解Threejs中的光源对象

光源的分类AmbientLight（环境光），PointLight（点光源），SpotLight（聚光源）和DirectionalLight（平行光）是基础光源HemisphereLight（半球光源），AreaLight（区域光源），LensFlare（镜头光晕）是有特殊用途的光源半球光源HemisphereLight半球光直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色半球光不
·2021-12-02 11:40

了解Threejs中的Clock对象以及简单应用

什么是Clock对象如果你对JavaScript有一定了解，那么JavaScript的时间对象Date你一定不陌生，Clock本质上就是对Date进行封装，提供了一些方法和属性当你通过Threejs编写一些和时间相关程序时候
·2021-12-02 11:09

详解Threejs中的光源对象

光源的分类AmbientLight（环境光），PointLight（点光源），SpotLight（聚光源）和DirectionalLight（平行光）是基础光源HemisphereLight（半球光源），AreaLight（区域光源），LensFlare（镜头光晕）是有特殊用途的光源半球光源HemisphereLight半球光直接放置于场景之上，光照颜色从天空光线颜色颜色渐变到地面光线颜色半球光不
fx67ll·2021-12-02 10:00

Nginx调优：gzip的相关设置

问题：公司项目在开发一项3D全景功能时，需要用到threejs这个框架进行3D渲染，一般3D文件的大小都在40M以上，这次我们渲染的文件在44M左右，下载所花费的时间是80s。
·2021-10-08 16:27

ThreeJS 模型点击事件添加

created(){//声明raycaster和mouse变量varraycaster=newTHREE.Raycaster();varmouse=newTHREE.Vector2();},mounted(){window.addEventListener('click',onMouseClick,false);},methods:{onMouseClick(event){//通过鼠标点击的位置计
·2021-09-11 09:10

模型数据实时交互

经过一个半月的技术验证已将数据模型转成2D/3D之间转换；blender、QDIS3.12、ThreeJS、BOOM已反复论证，目前已集成到原微服务技术架构上，前端应用VUE。
·2021-09-08 11:43

Threejs实现穿越云层动效

上文说到，我对《你的性格主导色》活动中最感兴趣的部分就是通过Three.js实现穿越云层动效了，据作者说每朵云出现的位置都是随机的，效果很好，下图是我实现的版本。在线Demo首先说下实现穿越云层动效的基本思路：沿着Z轴均匀的放一堆64*64的平面图形，这些平面的X坐标和Y坐标是随机的（很像下图的桶装薯片）把上面的所有图形合并成一个大的图形把大的图形和贴片材质（云）生成网格，网格放进场景中动效就是将
·2021-08-17 11:11

Threejs：Class constructor Object3D cannot be invoked without 'new'

在threejs开发过程中，需要使用three-css2drender在物体上方渲染文字，浏览器报ClassconstructorObject3Dcannotbeinvokedwithout'new'错误
柒弟·2021-07-09 09:37

Threejs实现酷炫3D地球技术点汇总

前言ezgif.com-gif-maker在线预览地址：https://joy1412.cn/online/show3dEarth/本篇介绍一下如何用Threejs实现一个酷炫的3D地球特效，使用到的技能点如下
嘟爷MD·2021-06-26 15:31

threeJs基础（1）

三大组件1.场景varscene=newTHREE.Scence();承载所绘对象的容器，如要显示个苹果，需将苹果加入场景中。eg:vargeometry=newTHREE.CubeGeometry(1,1,1);规定一个几何体；varmaterial=newTHREE.MeshBasicMaterial({color:0x00ff00});规定一个样式varcube=newTHREE.Mesh(
尘世中迷途小羔羊·2021-06-25 07:37

Vue+Three.js+Rhino三维建模初探

最近在研究三维可视化发现了一堆奇怪的问题我好菜啊我怎么这么菜记录一下过程和一些坑Three.js官网：https://threejs.org/学犀牛中文论坛：http://www.xuexiniu.com
saint37·2021-06-23 00:19

threeJs基础文档

three.js基础结构目录一个three.js项目至少需要的东西有——[]scene：场景[]camera：摄像机[]render：渲染器[]light：灯光可能需要的有——[]controls：摄像机控制器[]raycaster：点击射线，用于点击事件[]loader：加载器，特殊的物体例如模型需要使用加载器，而且不同格式的模型需要不同的加载器[]object：场景内的物体对象场景在three
论宅·2021-06-21 21:21

在Unity3D里理解实现PBR 算法【译1】

PhysicallyBasedRenderingAlgorithms:AComprehensiveStudyInUnity3D【翻译1】关于PBR基于物理的渲染（PBR）这几年非常热门，Unity5、虚幻4、寒霜甚至是ThreeJS
_ArayA_·2021-06-14 18:41

Three.js入门

Threejs为什么？webGL太难用，太复杂！但是现代浏览器都支持WebGL这样我们就不必使用Flash、Java等插件就能在浏览器中创建三维图形。Three.js的出现完美地解决了这个矛盾。
强某某·2021-06-14 11:25

Hello Three.js 之 三维空间中观察物体的方法—照相机

照相机此处所说照相机与现实有所差别,由于threejs创建的场景是三维的，人眼要看出三维效果就需要有透视点。
风铭·2021-06-12 19:52

three.js 性能优化

Referencehttps://discoverthreejs.com/tips-and-tricks/https://blog.mozvr.com/a-painter-performance-optimizations
Cesium4Unreal·2021-06-07 23:23

第二章1小节 基础组件构建项目

以下文章即LearnThreejs第三版英文翻译学习记录，可以到正版书店购买对应书籍。在之前的章节中，你学习了Three.js的基础。
我的名字好长好长灬·2021-05-31 22:44

ThreeJs学习笔记——ObjLoader加载以及渲染分析

一、前言这篇文章主要学习ThreeJs中的demoloader/obj2，主要是分析一下obj是如何加载的，纹理以及材质是如何加载的，3dcamera以及cameracontroller这些是如何实现的等
仰简·2021-05-12 13:55

three.js之camera

在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，它有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera
sakatayui酱·2021-05-10 17:05

学习ThreeJS 06 动画系统

获取3d模块动画信息:THREE.JSONLoaderTHREE.ObjectLoaderTHREE.BVHLoaderTHREE.ColladaLoaderTHREE.FBXLoaderTHREE.GLTFLoaderTHREE.MMDLoaderTHREE.SEA3DLoader调用和运行varmesh;//CreateanAnimationMixer,andgetthelistofAnima
Zszen·2021-05-10 04:40

记录threejs曲线宽度linewidth问题LineBasicMaterial

默认使用LineBasicMaterial，可以画出1px宽度线条，使用threejs，QuadraticBezierCurve3，创造曲线点位，使用BufferGeometry配置点位位置。
aatter·2021-05-08 14:30

如何用threejs实现实时多边形折射

前言在本教程中，您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时，无论使用某种3D软件还是使用WebGL进行实时显示，始终都必须为其分配材料以使其可见并具有所需的外观。可以使用Three.js之类的库中的现成程序来模仿许多类型的材料，但是在本教程中，我将向您展示如何使用三个对象（三个步骤）使对象看起来像玻璃一样。步骤1：设定和正面折射在本演示中，我将使用菱形几何图形，
·2021-05-07 18:42

Three.js入门(二)——画星空

下载地址:http://threejs.org/首先创建一个HTML文件,引入three.js引擎包Three.js实现3D空间粒子效果body{background-color:#000000;
简聆壹·2021-05-07 18:35

渲染器

Threejs的渲染需要用到HTML5的canvas，那么我们在使用threejs的时候可以自己创建一个canvas，也可以使用threejs自己生成的canvas，不过为了提高代码的可读性，建议在html
牛马风情·2021-05-04 22:09

threejs的插件库

物理库https://github.com/chandlerprall/Physijs渐变https://github.com/tweenjs/tween.js
Doter·2021-05-03 21:35

threejs-day1(响应式设计/图元)

响应式设计1.使用css使canvas填充页面html,body{margin:0;//body默认有5个像素的margin值height:100%;//高度充满窗口}#canvas{width:100%;height:100%;display:block;//默认为inline，行内元素末尾有空格，通过块级消除空格}调整画布大小functionresizeRendererToDisplaySiz
小杰66·2021-04-30 11:01

【黑马程序员济南中心】前端就业班笔记Canvas（一）

什么是Canvas就是HTML5给出的一个可以展示绘图内容的标签.最早是苹果公司提出的该标签.threejs.org里面有汽车等3D的仿真基本使用使用canvas标签,即可在页面中开辟一格区域.可以设置其
b06ee9db5ac0·2021-04-29 04:05

Spline使用体验

下载安装注册登陆登陆成功后有非常友好的提示教程，是在threejs的基础上造的轮子，所以软件上手很简单。
狂暴机甲·2021-04-27 10:14

【GIS】QGIS中2.5D渲染和导出三维场景

本文内容如下：QGIS中带高程面数据的2.5D渲染QGIS导出三维场景(html)注意，两个为独立实验；QGIS版本2.18，qgis2threejs可能也有新版了……1.数据准备准备一份带高程的面状要素数据集
PancakeCard·2021-04-25 02:48

WebAR与小程序AR极速入门教程

幸亏在微信小程序官方提供了扩展工具：threejs-miniprogram，但是发现加载模型还要做许多适配，确
Km0tion·2021-04-16 11:44

使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用React配合Three.js来搭建一个可以浏览720全景图片的项目实现的是加载一张2:1的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npxcreate-react-appparano//创建一个React项目npminstall-Stypescript//安装typescript，这个是类型辅助插件，与全景项目关系不大npminstall-S@types/thre
·2021-04-06 11:20

vue使用threejs加载glb或者gltf模型，以及踩坑

需要在组件内引入下列的东西import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls'import{GLTFLoader}from'three/examples/jsm/loaders/GLTFLoader'创建scenethis.scene=newTHREE.Scene(
·2021-04-02 19:05

浅谈图形学、WebGL 以及 Three.js

WebGL：基本概念/CanvasThree.js：相关API/通过Three.js来实作—————————————————————————————————————————————展示：https://threejs.org
·2021-03-22 14:40
上一页 14 15 16 17 18 19 20 21 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他