- 综合排序
- 最热优先
- 最新优先
- 来自专栏橙光笔记
Three.js教程（2）：工具篇
上一章我们基本上领略了three.js的魅力，这一章我们先不急着深入three.js，先学习2个非常有用的工具库，分别是stats.js和dat.gui，也许你没有听过两个库，但是很可能你见过他们。 ---- stats.js stats.js是three.js的作者mrdoob开发的一个简单的JavaScript性能监控的库。 .addColor(obj, 'color1'); folder2.addColor(obj, 'color2'); folder2.addColor(obj, 'color3'); 其实网上好多canvas和three.js的特效都会引入这个库来简单的控制变量，这个库最6的地方是当GUI上的值改变的时候，内存中的数据也变了，你可以点击打印按钮来打印对象obj的值。 /node_modules/three/build/three.js"></script> <script type="text/javascript" src="..
1.6K31发布于 2020-10-19 - 来自专栏数字孪生
Three.js外包开发的技术难点
在使用 Three.js 进行开发时，尽管它大大简化了 WebGL 的操作，但仍存在一些难点，需要开发者深入理解和应对。以下是常见的开发难点及其简要说明。1. 2. 场景管理复杂的 3D 场景可能包含大量的对象和层级关系，管理起来较为困难。难点：对象层级深时，操作困难。对象的更新（如位置、缩放、旋转）可能影响性能。 解决方法：使用 OrbitControls 或 TrackballControls 简化交互开发。手动调整相机的 near 和 far 平面，避免深度问题。8. 总结Three.js 功能强大，但由于涉及 3D 渲染、动画、交互和性能优化等多个领域，需要开发者具备扎实的图形学知识和经验。 通过不断实践、利用社区资源（如官方文档、示例代码）以及学习底层 WebGL 原理，可以有效解决开发中的难点。
1.2K10编辑于 2024-11-22 - 来自专栏前端少年汪的博客
Three.js深入浅出：1-搭建Three.js开发环境
我们将从搭建基本的 3D 场景开始，逐步引入光影、材质、纹理、动画等概念，让读者能够系统地掌握 Three.js 的开发技巧和实践经验。 无论是 Web 开发工程师、还是对 3D 图形技术感兴趣的爱好者，都能够从中受益匪浅。 让我们一起踏上 Three.js 的学习之旅，探索无限的创意可能性，开启属于自己的 3D 时代！ 引入three.js的方式 这里主要分为两种情况 开发环境：项目开发引入threejs，比如vue或react脚手架引入threejs。 script标签引入 你可以像平时开发web前端项目一样，通过script标签把three.js当做一个js库引入你的项目。 这样你实际项目的开发环境复制课程源码，不用改变threejs引入代码。
1.5K20编辑于 2023-11-21 - 来自专栏数字孪生
Three.js 开发框架的主要特点
Three.js 是一个功能强大且广泛使用的 WebGL 开发框架，专注于 3D 图形渲染。它的设计目标是简化 WebGL 的复杂性，使开发者能够快速创建复杂的 3D 场景和交互式应用。 以下是 Three.js 的主要特点。1.易于上手简洁的 API: Three.js 提供了直观且易于理解的 API，开发者可以通过简单的代码快速创建 3D 场景。 2.功能丰富支持多种 3D 对象: 包括几何体（如立方体、球体、平面等）、材质（如基础材质、Phong 材质、PBR 材质等）、灯光（如点光源、平行光、环境光等）。 4.高性能优化渲染: Three.js 提供了多种渲染优化技术，如实例化渲染、LOD（细节层次）等，适合处理复杂场景。WebGL 2 支持: 支持 WebGL 2，提供更强大的渲染能力。 无论是数据可视化、游戏开发还是创意项目，Three.js 都能提供强大的支持。
96910编辑于 2025-01-16 - 来自专栏橙光笔记
Three.js教程（1）：初识three.js
---- 为什么要使用three.js 要回答为什么要使用three.js？首先我们想想什么是three.js？ 前端实现3D效果无非这么几种方式： 1.CSS 3D技术； 2.SVG； 3.WebGL技术； 4.Canvas或者图片等来模拟3D。 而three.js直接支持前3种渲染方式，可以看出three.js的强大。 大多情况下如果是为了展示3D的效果，那么直接用图片就可以了，如果要动起来的话，视频往往可以胜任。 当时是通过2d来获取canvas的上下文对象。上述代码中，核心代码是initShader()方法，它初始化了着色器，我们这里用到了2个着色器：fragmentShader和vertexShader。 初识three.js three.js可以使用模块化引入，当然也可以直接用script标签来引入。
24.8K85发布于 2020-10-19 - 来自专栏游戏开发之旅
利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试，并不能算作是教程，只能算是一篇笔记吧。 微信 WeChat 6.6.1 开始引入了微信小游戏，初期上线了一批质量相当不错的小游戏。 我在查阅各处的文章时候，发现其中有几款是基于 three.js 开发的，目前火爆朋友圈的《跳一跳》就是其中之一。 准备工作 最新版本的 three.js； 首先应该具有一定的 three.js 开发经验，有之前写过的简单演示代码； 最新版本的“微信开发者工具”。 this), canvas ) } } 一些要点： 由于微信已经为我们准备好了的 canvas，所以我们无需自己再进行创建，只需要取得的 canvas 的 context 就可以了，这里我们使用的不是 2d 开发者用微信扫描这个二维码，就可以打开测试。 如果您没有修改过 three.js 源文件，那么很有可能只看到一个黑屏。
4K10发布于 2019-12-03 - 来自专栏快乐阿超
three.js
阿谀奉承而无所图的人极少；爱奉承的话，就免不了要付出代价——佚名 一个js的3D库 git仓库：https://github.com/mrdoob/three.js 官网：https://threejs.org
14.1K20编辑于 2022-09-29 - 来自专栏郭先生的博客
three.js 曲线
上几篇说了three.js的曲线，这篇来郭先生来说说three.js曲线，在线案例点击three.js曲线 1. 了解three.js曲线 之前已经说了一些three.js的几何体，这篇说一说three.js曲线。曲线的种类主要分两种，二维曲线和三维曲线。 （二维二次贝塞尔曲线） 参数为起点v1:Vector2，中间控制点a1:Vector2，终点v2:Vector2 QuadraticBezierCurve3（三维二次贝塞尔曲线） 参数为起点v1:Vector3 ，中间控制点a1:Vector3，终点v2:Vector3 CubicBezierCurve（二维三次贝塞尔曲线） 参数为起点v1:Vector2，中间控制点a1:Vector2，中间控制点a2:Vector2 2.
12.3K21发布于 2020-08-31 - 来自专栏cc log
Three.js基础
2, 2)); // basic spherer geoms.push(new THREE.SphereGeometry(2)); geoms.push 2, 2), new THREE.Vector3(2, 2, -2), new THREE.Vector3(-2, 2, -2), new THREE.Vector3(-2, 2, 2), new THREE.Vector3(2, -2, 2), new THREE.Vector3(2 , -2, -2), new THREE.Vector3(-2, -2, -2), new THREE.Vector3(-2, -2, 2) requestAnimationFrame(render); renderer.render(scene, camera); } } 创建几何体 顶点和面就组合成了几何体 three.js
90910编辑于 2024-04-03 - 来自专栏赵康的日常专栏
【前端】Three.js
Three.js 基本概念 渲染器（Renderer） 渲染器将和Canvas元素进行绑定 场景（Scene） 在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。
86720编辑于 2023-10-17 - 来自专栏前端小菜鸡yym
three.js 初步
DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title </style> </head> <body> //根据文件的位置，我放在了跟html文件放到了js的统计目录 <script src="js/<em>three.js</em> /js/<em>three.js</em>'></script> <title></title> </head> <body> <script type="text/javascript"> 这里用的是OrthographicCamera //参数 1--视野角度 2--长宽比根据屏幕长宽 3--远剪切面 4--近剪切面 var camera = new THREE.OrthographicCamera
5.6K50编辑于 2023-01-12 - 来自专栏Golang语言社区
Three.js入门
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。 Three.js的核心五步就是： 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染 (1) 声明全局render对象； (2) 获取画布的高和宽； (2) 生成渲染器对象 (3) 指定渲染器的高宽（一般跟画布框大小一致）； (4) 追加canvas元素到canvas3d元素中； (5) 在Three.js也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。 (1) 声明全局的变量（对象）； (2) 设置透视投影的相机； (3) 设置相机的位置坐标； (4) 设置相机的上为「z」轴方向； (5) 设置视野的中心坐标。
8.6K92发布于 2018-03-22 - 来自专栏前端数据可视化
『Three.js』起飞！
是一篇面向小白的笔记~ Three.js 官网 下载 Three.js Three.js GitHub地址 通过上面的地址，可以下载 Three.js 这是下载下来解压后的文件 创建项目 我习惯使用 vs code 编写前端代码，如果是用原生三件套学习，我还会使用 Live Server 插件辅助开发。 渲染器(Renderer) 场景的渲染方式，如 WebGL、canvas2D、css3D。 控制器(Control) 可通过键盘、鼠标控制相机的移动。 /js/Three/Three.js" // 【步骤2】 // 场景对象 // 场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源 // 如果没有场景对象就无法渲染任何物体 你就算是入门了 Three.js 。 代码仓库 ⭐Three.js 起步
11.5K40编辑于 2022-09-23 - 来自专栏郭先生的博客
three.js 材质
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。 1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性： .alphaTest : Float 设置运行alphaTest时要使用的alpha值。 以键值对形式的对象传递，{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。 这些键值对在顶点和片元着色器中定义。默认值为undefined。 在绘制2D叠加时，将多个事物分层在一起而不创建z-index时，禁用深度写入会很有用。 .flatShading : Boolean 定义材质是否使用平面着色进行渲染。默认值为false。 将材质转换为three.js JSON格式。 2. three.js材质种类 名称 介绍 LineBasicMaterial 一种用于绘制线框样式几何体的材质。
10.9K50发布于 2020-08-28 - 来自专栏cc log
学习Three.js
Intro 基于r95版本three.js。整理知识点，以及demo。 new THREE.Mesh(sphereGeometry, sphereMaterial); // position the sphere sphere.position.set(20, 4, 2) // position the sphere sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; 2); var wallRight = new THREE.CubeGeometry(70, 2, 2); var wallTop = new THREE.CubeGeometry(2, 2, 50); var wallBottom = new THREE.CubeGeometry(2, 2, 50); var wallMaterial = new THREE.MeshLambertMaterial
83810编辑于 2024-04-03 - 来自专栏跳悦火焰
Three.js 前言
-----------------------------------本文非技术文章，着急开发的小伙伴请绕道----------------------------------------- 最近公司做了一套项目 ，主要是写机房管理，并且还要是一个3D模型，做3D，首先想到的是Three.js，对于Three.js，我的了解不多，除了前两年用Three.js的Dome改造了一个年会抽奖系统外，其他的基本上也就仅仅停留在认识 Three.js这几个英文字母上，这次这项目，对于我来说是个挑战，其实对于公司来说也是，学习Three.js凉了这个项目基本上也就黄了。 本着回馈的理念，我计划在未来半个月时间对这次开发中踩的坑和心得做个记录，以备以后开发时参考，也让正在准备开发或者学习的同仁避免反和我一样的错误。
7.3K20发布于 2019-09-26 - 来自专栏前端之攻略
three.js 事件交互
点击查看交互效果 在three.js中，展示的一切内容都是在canvas中绘制的，所以点击事件点击到物体上是无法获取点击对象的，要获取点击的对象，要使用RayCaster,是用于在三维空间中进行鼠标拾取 DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - raycast - sprite</title> <meta /build/three.js"></script> <script src=".. group.add(sprite); var group<em>2</em> = new THREE.Object3D(); //group<em>2</em>.scale.set(1,<em>2</em>,1); group<em>2</em>.position.set(-5, 0, 0); //group<em>2</em>.rotation.set(Math.PI/<em>2</em>,0,0); group.add(group<em>2</em>
14.9K90发布于 2019-04-22 - 来自专栏郭先生的博客
three.js 制作魔方
所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击three.js制作魔方。 ,[-100,-100,100],[-100,-100,0],[-100,-100,-100] ],//方块位置坐标 materials,//材质数组 mouse = new THREE.Vector2( object3d,//魔方被选择面的标志物对象 currentPos,//魔方被点击小块的位置 currentNor,//魔方被点击小块面的法向量 currentUp,//魔方被点击时，相机up的向量 2. case 1: axis = currentNor.clone().cross(currentUp); break; case 2: tween的补间动画，效果更好哦 handleTween(axis) { let start = {angle: 0, axis}; let end = {angle: Math.PI/2,
10K10发布于 2020-08-31 - 来自专栏山河木马
three.js 学习感悟
1.场景 在Three.js中添加的物体都是添加到场景中的，因此它相当于一个大容器。一般说，场景来没有很复杂的操作，在程序最开始的时候进行实例化，然后将物体添加到场景中即可。 2.照相机 我们使用Three.js创建的场景是三维的，而通常情况下显示屏是二维的，那么三维的场景如何显示到二维的显示屏上呢？ ); //声明物体 var cube22 = new THREE.Mesh(new THREE.CubeGeometry(2,2,2), new THREE.MeshBasicMaterial (0,0,0)); scene2.add(cube22); //设置光源 var light2 = new THREE.PointLight(0xffffff,2,100); light2.position.set (0,0,5); scene2.add(light2); //场景，照相机，物体都声明好了，现在要用渲染器渲染出结果了 renderer2.render(scene2,camera2); })() 能动的正方体例子
3.5K10发布于 2019-03-05 - 来自专栏前端数据可视化
『Three.js』场景 Scene
本文简介 在阅读本文前，我希望你对 Three.js 有一个初步的理解。如果你不清楚 Three.js 是什么，我推荐你先阅读 『Three.js』起飞！ 在使用 Three.js 的前，必须先了解 3大组件：摄像机、场景、渲染器。这是 Three.js 的必需品。 本文讲解的是 场景 的用法。 什么是场景？ scene.getObjectByName 接收2个参数，第一个参数指定唯一的标识 name ；第二个参数为 true 时，在调用者的所有后代对象上查找。 上面的代码中生成的画面，有2个物体，一个是立方体，一个是场景。 traverse() 方法接收一个参数，这个参数也是一个函数。该函数用于遍历每一个子对象。 planeMaterial) plane.rotation.x = -0.5 * Math.PI // 旋转平面，让它看起来像地面 // 设置地面位置 plane.position.x = 2
6.1K51编辑于 2022-08-30
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号