合集-three.js基础

three.js基础
摘要：记录下 three.js 的学习历程 Three.js 是基于 WebGL 技术，用于浏览器中开发 3D 交互场景的 JS 引擎。 Three.js 擅长 WebGL 场景渲染，Three.js不擅长物理碰撞，因此不适合开发 3D 游戏。 three.js基本概念包括画布 Canvas、渲染器 Re 阅读全文
posted @ 2024-04-05 14:35 carol2014 阅读(98) 评论(0) 推荐(0)
three.js基础之Curve、Geometry
摘要：为了便于后面的学习封装了几个初始化的函数 import { WebGLRenderer, PerspectiveCamera, AmbientLight, SpotLight, PointLight, DirectionalLight, PlaneGeometry, BoxGeometry, Sph 阅读全文
posted @ 2024-04-05 16:36 carol2014 阅读(152) 评论(0) 推荐(0)
three.js基础之简单动画、GUI、Controls、相机、灯光、简单材质
摘要：本系列中案例参考自 https://github.com/josdirksen/learning-threejs-third 动画 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": 阅读全文
posted @ 2024-04-05 16:59 carol2014 阅读(194) 评论(0) 推荐(0)
three.js基础之加载外部模型、纹理贴图、投射阴影、几何体颜色属性、面模型属性
摘要：初始化共用方法 <canvas id="model"></canvas> <canvas id="texture"></canvas> <canvas id="shadow"></canvas> <canvas id="color"></canvas> <script type="importmap 阅读全文
posted @ 2024-04-05 17:14 carol2014 阅读(554) 评论(0) 推荐(0)
three.js基础之小案例
摘要：静态场景 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" } 阅读全文
posted @ 2024-05-09 11:31 carol2014 阅读(159) 评论(0) 推荐(0)
three.js基础之mesh属性
摘要：mesh之位置、缩放、平移、旋转属性 <canvas id="mesh-properties"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addon 阅读全文
posted @ 2024-05-17 11:47 carol2014 阅读(135) 评论(0) 推荐(0)
three.js基础之Group
摘要：Group <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" } 阅读全文
posted @ 2024-05-23 16:27 carol2014 阅读(39) 评论(0) 推荐(0)
three.js基础之材质Material
摘要：init.js增加共用方法 function addMaterialSettings(gui, controls, material, folderName = "Material") { controls.material = material; const folder = gui.addFol 阅读全文
posted @ 2024-05-23 16:46 carol2014 阅读(105) 评论(0) 推荐(0)
three.js之加载模型、贴图
摘要：加载各种模型 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" 阅读全文
posted @ 2024-05-23 16:50 carol2014 阅读(598) 评论(0) 推荐(0)
three.js基础之动画Animation
摘要：动画 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/" } } 阅读全文
posted @ 2024-05-23 16:54 carol2014 阅读(56) 评论(0) 推荐(0)
three.js之BufferGeometry
摘要：BufferGeometry缓冲几何体 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": 阅读全文
posted @ 2024-07-15 10:15 carol2014 阅读(63) 评论(0) 推荐(0)
three.js基础之clipping
摘要：clipping <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/ 阅读全文
posted @ 2024-07-15 10:19 carol2014 阅读(82) 评论(0) 推荐(0)