渲染第一个物体和场景1.基本概念三维物体应该在二维屏幕上渲染。首先需要创建一个场景来放置物体，然后到底如何显示三维内容，应该找一个摄像头，将摄像头放置在场景中的某个位置，然后渲染捕捉到的内容如果要显示它，请按相机。因此引入了三个基本概念：scene、camera、renderer。1.1场景constscene=newTHREE.Scene();1.2相机constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10);three.js中有几种??不同的相机，这里，我们使用的是PerspectiveCamera（透视相机）。第一个参数是视野(FOV)。可视角度是你在显示器上随时可以看到的景物的范围，它的单位是角度（区别于弧度）。第二个参数是纵横比。也就是说，您将对象的宽度除以其高度。例如，当您在宽屏电视上播放老电影时，图像可能会被压扁。接下来的两个参数是近段（near）和远段（far）。当对象的某些部分比相机的远部分更远或比近部分更近时，这些部分将不会渲染到场景中。也许你现在不用担心这个值的影响，但是以后为了得到更好的渲染性能，你可以在你的应用程序中设置它。下图中的圆锥体是上面设置视角、长宽比、近区和远区的演示中的摄像机透视圆锥体。1.3Renderer//初始化渲染器constrenderer=newTHREE.WebGLRenderer();//设置渲染的大小renderer.setSize(window.innerWidth,window.innerHeight);//console.log(renderer);//将bodydocument.body.appendChild(renderer.domElement);//使用渲染器通过相机渲染场景renderer.render(scene,camera);除了创建渲染器实例之外，我们还需要在应用程序中设置渲染器大小。例如，我们可以使用所需渲染区域的宽度和高度，使渲染器渲染的场景充满我们的应用程序。因此，我们可以将渲染器的宽高设置为浏览器窗口的宽高。对于性能敏感的应用程序，可以使用setSize传入一个较小的值，比如window.innerWidth/2和window.innerHeight/2，这将使应用程序以一半的长宽渲染场景。接下来将渲染器的dom元素(renderer.domElement)添加到我们的HTML文档中。渲染器是用来显示场景的画布元素给我们看的。最后一件事是用相机渲染场景。这句话可以将屏幕渲染到画布上并显示出来。renderer.render（场景，相机）；1.4添加立方体要创建立方体，我们需要一个BoxGeometry（立方体）对象。该对象包含立方体的所有顶点和面。接下来，对于这个立方体，我们需要给它一个材质来给它一个颜色。这里我们使用MeshBasicMaterial。所有材料都具有持有应用于它们的属性的对象。为了简单起见，我们只设置了一个颜色属性，值为0x00ff00，即绿色。这与CSS或Photoshop使用十六进制（十六进制颜色）颜色格式设置颜色的方式一致。第三步，我们需要一个Mesh（网格）。网格由几何体和应用于它的材料组成。我们可以直接将网格物体放入我们的场景中，让它在场景中自由移动。默认情况下，当我们调用scene.add()时，对象将添加到(0,0,0)坐标处。但是会使相机和立方体彼此相邻。为了防止这种情况发生，我们只需要将相机稍微向外移动即可。//添加对象//创建几何体constcubeGeometry=newTHREE.BoxGeometry(1,1,1);constcubeMaterial=newTHREE.MeshBasicMaterial({color:0xffff00});//根据几何体和材质创建对象constcube=newTHREE.Mesh(cubeGeometry,cubeMaterial);//添加几何体到场景scene.add(cube);2综合以上代码2.1在index.html中引入如下js代码：import*asTHREEfrom"three";//console.log(THREE);//目标：了解three.js最基本的内容//1.创建场景constscene=newTHREE.Scene();//2.创建相机constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//设置相机位置camera.position.set(0,0,10);scene.add(camera);//添加对象//创建几何体constcubeGeometry=newTHREE.BoxGeometry(1,1,1);constcubeMaterial=newTHREE.MeshBasicMaterial({color:0xffff00});//创建基于对象ongeometryandmaterialsconstcube=newTHREE.Mesh(cubeGeometry,cubeMaterial);//给场景添加几何体scene.add(cube);//初始化渲染器constrenderer=newTHREE.WebGLRenderer();//设置渲染大小renderer.setSize(window.innerWidth,window.innerHeight);//console.log(renderer);//webgl渲染的画布s内容添加到bodydocument.body.appendChild(renderer.domElement);//使用渲染器通过相机渲染场景renderer.render(scene,camera);2.1效果如下图渲染第二个物体和场景圈）场景、相机、渲染器上面已经介绍过了，这里不再赘述1.1加载gltf/glb模型：GLTFLoadernewGLTFLoader().load('../resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene);})1.2加载环境光HDR图像:RGBELoadernewRGBELoader().load('../resources/sky.hdr',function(texture){scene.background=texturetexture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(scene,camera)})1.3合并以上代码import*asTHREEfrom'three';import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";import{RGBELoader}from'three/examples/jsm/loaders/RGBELoader';letmixes;//创建场景constscene=newTHREE.Scene();//cameraconstcamera=new三.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10);//渲染器constrenderer=newTHREE.WebGLRenderer({antialias:true});//渲染器大小renderer.setSize(window.innerWidth,window.innerHeight);//渲染器添加到页面document.body.appendChild(renderer.domElement);//设置相机的位置camera.position.set(0.3,0.3,0.5)//添加控件控制器可以用鼠标控制物体constcontrols=newOrbitControls(camera,renderer.domElement)//创建一个平行光源，平行光是沿着特定方向发出的光。这种光表现为无限远，从它发出的光都是平行的。平行光常用来模拟太阳光的效果；太阳离得足够远，我们可以认为太阳的位置是无限远的，所以我们认为从太阳发出的光线也是平行的。constdirectionalLight=newTHREE.DirectionalLight(0xffffff,0.6)//向场景添加定向光scene.add(directionalLight)//加载甜甜圈模型letdonuts;newGLTFLoader().load('../resources/models/donuts.glb',(gltf)=>{scene.add(gltf.scene)donuts=gltf.scenemixes=newTHREE.AnimationMixer(gltf.scene);constclips=gltf.animations;clips.forEach(function(clip){constaction=mixes.clipAction(clip);action.loop=THREE.LoopRepeat;//播放动画action.play();//在最后一帧停止action.clampWhenFinished=false;})})//加载纹理newRGBELoader().load('../resources/sky.hdr',function(texture){scene.background=texturetexture.mapping=THREE.EquirectangularReflectionMapping;scene.environment=texture;renderer.outputEncoding=THREE.sRGBEncoding;renderer.render(scene,camera)})//播放动画方法functionanimate(){requestAnimationFrame(animate)renderer.render(scene,camera)if(donuts){donuts.rotation.y+=0.01}if(mixes){mixes.update(0.02)}}animate()1.4效果如下开始吧，跟我一起加入圆创影（v:dashhuailaoyuan），和一起交流学习！
