发帖
雷达卡
Three.js可视化企业实战WEBGL课（源码+课件+素材+2023年10月升级版46章全）
网盘地址：https://pan.baidu.com/s/1qBlyo987PF4SMfw18lDZ-g 提取码：zuaf
分享一套课程——Three.js可视化企业实战WEBGL课，2023年10月最新版，共46章。附源码+课件+素材下载。
Three.js 是一款运行在浏览器中的3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。
Three.js 的运行需要4个条件
场景 (scenes)
渲染器 (renderers)
相机 (cameras)
对象 (objects)
WebGL 是一种 JavaScript API，它可以在画布中呈现三角形，而且速度非常快，因为它使用访问者的图形处理单元 (GPU)。GPU 可以进行数千次并行计算，这让我们可以在3D场景中进行复杂的运算。然而，尽管 WebGL 在处理3D场景方面非常出色，但仍然有一些缺点。例如，如果你想要创建一个复杂的场景，你需要掌握一些高级技巧，这可能对于初学者来说非常困难。此外，WebGL 也需要高性能的硬件来运行，因为它需要大量的计算资源。因此，如果你的计算机性能不足，那么使用 WebGL 可能会导致你的应用程序运行缓慢或崩溃。
渲染器renderer
渲染器决定了渲染的结果应该画在页面的什么元素上面
并且以怎样的方式来绘制
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//挂载到页面
document.body.appendChild(renderer.domElement)
添加物体
let geometry = new THREE.CubeGeometry(1, 1, 1);
//width:立方体x轴的长度,height:立方体y轴的长度,depth:立方体z轴的长度也是深度
渲染物体
renderer.render(scene, camera)
//scene:前面定义的场景,camera:前面定义的相机
//renderTarget:渲染的目标默认是是渲染到前面定义的render变量中
//forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
function render() {
cube.rotation.x += 0.1
cube.rotation.y += 0.1
renderer.render(scene, camera)
requestAnimationFrame(render)
}
操作流程
模型操作:
生成几何体 => 生成材质 => 混合生成模型
商城模型 => 添加到场景中
场景操作
生成场景(配置参数…) => 模型导入场景
相机操作
生成相机 = > 添加控制器(控制相机)
渲染器操作
生成渲染器 => 场景和相机添加到渲染器中 => 建立和canvas 关联
更新模块(动画模块)
动画的连续 ,相机 ,场景的更新控制
京公网安备 11010802022788号
