随着webGL的知名度越来越高，作为一个老前端，我也想学学。我选择开始使用three.js以了解更多信息。webGL&Three.js简介WebGL是一种在浏览器中显示3D图像的技术。它是一种允许结合JavaScript和OpenGLES2.0的3D绘图标准。通过加入OpenGLES2.0的JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染（部分计算GPU），让Web开发者可以使用系统显卡在浏览器中更流畅地显示3D场景和模型，并创建复杂的导航和数据可视化。Three.js（Javascript3D库），使用JavaScript语言对WebGL进行封装，让前端开发者无需掌握大量的数学知识和绘图知识，即可轻松开发web3D。相关文档three.js中文文档免费3D模型下载网站，模型下载blender下载，Blender是一款免费的3D全功能软件。vite中文文档素材源码下载处理模型在实际项目中我们需要配合美工，当然是It如果您或您的合作伙伴了解3D建模，那就太好了。打开资源网站，搜索模型，打开详情，点击下载按钮。使用搅拌机导入模型。使用blender导出glb模型文件。使用vite构建项目。Vite可以帮助我们快速构建项目。npmcreatevite@latestthree.js基本概念三维对象应该在二维屏幕上呈现。首先需要创建一个场景来放置物体，然后到底如何显示三维内容，应该找一个摄像头，将摄像头放置在场景中的某个位置，然后渲染捕捉到的内容如果要显示它，请按相机。因此引入了三个基本概念：scene、camera、renderer。创建一个场景constscene=newTHREE.Scene();创建相机three.js中的相机分为立方体相机、正交相机和透视相机。这里我们使用的是透视相机。ConstructorPerspectiveCamera(fov,aspect,near,far)fov—相机视锥的垂直视角aspect—相机视锥的纵横比near—相机视锥的近裁剪平面far—相机视锥的远裁剪平面相机视锥体。constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.01,10);three.js中的渲染器分为画布渲染器（CanvasRenderer）和WebGL渲染器（WebGLRenderer）。这里我使用WebGL渲染器。构造函数WebGLRenderer(parameters)parameters是一个可选对象，包含定义渲染器行为的属性。未设置此参数时，将使用默认值。canvas—用于绘制输出的Canvas对象。context—要使用的RenderingContext对象。precision—着色器的精度。可以是“highp”、“mediump”或“lowp”。如果设备支持，则默认为“highp”。alpha—布尔值，默认为false.premultipliedAlpha—布尔值，默认值为true.antialias—布尔值，默认值为false.stencil—布尔值，默认值为true.preserveDrawingBuffer—布尔值，默认值为false.depth—布尔值，默认值为true.logarithmicDepthBuffer—Boolean，默认为false。//创建渲染器constrenderer=newTHREE.WebGLRenderer({antialias:true});//设置渲染大小renderer.setSize(window.innerWidth,window.innerHeight);//设置webgl渲染的画布内容被添加到正文document.body.appendChild(renderer.domElement);three.js中的光照有以下几种类型：环境光源（AmbientLight）、点光源（PointLight）、点光源（SpotLight）、平行光源（DirectionalLight）、半球光源（HemisphereLight），其中，光照支持阴影的有：点光源、聚光灯、平行光源。这里我用的是半球形光源DirectionalLight(hex,intensity)hex——光源颜色的RGB值。强度——光源强度的数值。从特定方向而非特定位置创建灯光。这种光看起来光源在无穷远处，所以它产生的光线都是平行的。最好的类比是像太阳这样的光源：太阳距离如此之远，以至于所有照射到物体上的阳光几乎都来自相同的角度。//创建环境光constdirectionLight=newTHREE.DirectionalLight(0xffffff,0.4);//添加环境光到场景scene.add(directionLight);加载资源加载模型并播放模型中的所有动画。newGLTFLoader().load('../resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene);donuts=gltf.scene;mixer=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;//播放所有动画clips.forEach(function(clip){constaction=mixer.clipAction(clip);action.loop=THREE.LoopOnce;//在最后一帧动作停止.clampWhenFinished=true;action.play();});})加载环境纹理newRGBELoader().load('../resources/sky.hdr',function(texture){scene.background=texture;texture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(scene,camera);});Animation使用requestAnimationFrame播放动画，并设置动画播放参数。函数动画（）{requestAnimationFrame（动画）;renderer.render（场景，相机）；控制.更新（）；如果（甜甜圈）{donuts.rotation.y+=0.01;}if(mixer){mixer.update(0.02);}}动画（）;最后，github的完整代码，感谢“大帅老源”和“庞达”两位老师组织本次活动，有兴趣的同学，加入猿创营（v：dashhuailaoyuan）一起交流学习。
