seo网站整站优化,打开网站文件夹权限设置,wordpress 4.2.2,wordpress章节分页Threejs
1 前言
Three.js是基于原生WebGL封装运行的三维引擎#xff0c;在所有WebGL引擎中#xff0c;Three.js是国内文资料最多、使用最广泛的三维引擎。
既然Threejs是一款WebGL三维引擎#xff0c;那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于…Threejs
1 前言
Three.js是基于原生WebGL封装运行的三维引擎在所有WebGL引擎中Three.js是国内文资料最多、使用最广泛的三维引擎。
既然Threejs是一款WebGL三维引擎那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用以便大家了解。
参考资料
官网Demo
官网 api 文档
Three.js入门教程
2 three 核心概念
1.1 场景 3d 世界的容器可以在容器中添加 地面、天空、光照、人、动物等等。 1.2 相机 用来拍摄场景中的画面相机在场景中的位置不同角度不同拍摄出来的画面就不一样。 1.3 渲染器 用于将相机拍摄出来的画面绘制到画布上。 1.4 物体 3D世界是由一个个物体组合而成的。人、车、楼等等都是一个个的物体。 1.5 光线 有了光线你看到的物体才会有各种各样的颜色并且随着光线的反射与折射产生出更加真实的感觉。 3 安装及使用three
3.1 安装
# three的版本指定好新版有时更新了api可能导致之前使用的方法不起作用
npm i three0.100.03.2 使用 在脚手架搭建的项目中使用 import Three from three在html 页面中使用 script src./three.js/script4 threejs 初探
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlethree-demo/titlescript src./libs/three.min.js/scriptstylehtml,body {height: 100vh;width: 100vw;padding: 0;margin: 0;border: 0;}#demo {width: 100%;height: 100vh;}/style/headbodydiv iddemo/divscriptconst { THREE } window;const {// 核心三件套Scene, // 场景WebGLRenderer, // 渲染器PerspectiveCamera, // 透视相机BoxGeometry, // 正方体几何体Mesh, // 网格 -- 物体PointLight, // 点光源AmbientLight, // 环境光 } THREE;// 用于绘制3D图像的domconst renderDom document.getElementById(demo);const width renderDom.clientWidth; //窗口宽度const height renderDom.clientHeight; //窗口高度const k width / height; //窗口宽高比const s 200; //三维场景显示范围控制系数系数越大显示的范围越大// 创建场景const scene new Scene();// 物体的形状 -- 创建一个立方体几何对象const geometry new BoxGeometry(100, 100, 100);// 物体材质 -- 铜、铁、颜色const material new MeshLambertMaterial({color: 0x0000ff,});// 通过几何形状和材质创建出一个 立方体const mesh new Mesh(geometry, material); //网格模型对象Mesh// 将物体加入到场景中scene.add(mesh); //网格模型添加到场景中// 添加点光源const point new PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中// 添加环境光const ambient new AmbientLight(0xfbea94);scene.add(ambient);// 创建相机const camera new PerspectiveCamera();camera.fov 35; // 视角度数camera.near 1; // 设置相机最小拍摄距离camera.far 1000; // 设置相机最大拍摄距离camera.position.set(350, 290, 220); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)// 创建渲染器const renderer new WebGLRenderer({precision: lowp,alpha: true,antialias: true,logarithmicDepthBuffer: true,});renderer.setSize(width, height); // 设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色// 在 demo dom 中插入渲染器renderDom.appendChild(renderer.domElement);// 将相机拍摄到的画面渲染出来renderer.render(scene, camera);/script/body
/html three 核心概念示例图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3zrNrYOL-1687830109752)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YHszuf74-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\threejs9threejs2.png)] 透视相机图解 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9zSBWKOE-1687830109753)(C:\Users\Administrator\Documents\markdown\WebGL\assets\14238c00f908461ba7007348de2bc604.png)]
5 threejs 全景学习曲线
Scene - 场景Camera - 相机 透视相机正交相机 WebGLRenderer - 渲染器物体 Points - 点Line - 线Mesh - 多边形网格Geometry - 几何体Skeleton - 骨架Bone - 骨骼Sprite - 精灵 Group - 分组Light - 光 环境光平行光点光源聚光灯半球光 Texture - 纹理贴图 VideoTexture - 视频纹理DepthTexture - 深度纹理CubeTexture - 立方纹理Canvas纹理 Material - 材质 线材质点材质网格材质着色器材质阴影材质精灵材质 Loader - 加载器 加载模型文件加载文字加载图片加载音频加载视频加载纹理 Animation - 动画 帧动画轨道动画骨骼动画变形动画 Audio - 语音内置计算方法 数学库路径创建形状创建
