充值网站 模板,彩票网站建设哪里,网站建设实践报告3000字,银川微信网站三要素之间关系#xff1a;
有了虚拟场景Scene#xff0c;相机录像Camera#xff0c;在相机小屏幕上看到的Renderer
Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene#xff1a; 这个场景为三要素之一#xff0c;一切需要展示的东西都需…三要素之间关系
有了虚拟场景Scene相机录像Camera在相机小屏幕上看到的Renderer
Scene当前空间 Mesh人在场景 Camera相机录像 Renderer显示器上 首先先描述下Scene 这个场景为三要素之一一切需要展示的东西都需要添加到Scene里面也就是画布你需要在页面展示的东西都需要add到Scene中 在场景里面我们可以添加 Mesh网格模型、光源等
Mesh网格模型组成需要两部分 需要几何体Geometry和对应的材质模型Material
1、如何创建Scene、camera 、renderer 三要素并渲染
!DOCTYPE html
htmlheadtitlethree.js/titlemeta charsetutf-8style* {margin: 0;padding: 0;}/style
/headbodydiv idcontainer/div!-- 类似于创建 并设置别名 --script typeimportmap{imports: {three: https://cdn.jsdelivr.net/npm/three0.170.0/build/three.module.js,three/addons/: https://cdn.jsdelivr.net/npm/three0.170.0/examples/jsm/}}/script!-- 导入包名 --script typemoduleimport * as THREE from three;// 创建一个新的场景对象const scene new THREE.Scene();// 创建一个透视相机参数分别为视野角度、宽高比、近平面和远平面const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 创建一个WebGL渲染器const renderer new THREE.WebGLRenderer();// 设置渲染器的大小使其充满整个窗口renderer.setSize(window.innerWidth, window.innerHeight);// 将渲染器的DOM元素添加到文档的body中document.body.appendChild(renderer.domElement);/script
/body/html现在建立了场景、相机和渲染器但是页面还是不能正常渲染的~
Threejs提供了正投影相机OrthographicCamera (opens new window)和透视投影相机PerspectiveCamera
OrthographicCamera适用于CAD 图纸、工程图、UI 设计、2D 游戏等场景这些场景通常需要保持物体的比例和形状。 PerspectiveCamera适用于3D 游戏、虚拟现实、建筑设计等场景这些场景通常需要模拟真实世界的视觉效果。
透视投影相机PerspectiveCamera
透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间被称为视锥体只有视锥体之内的物体才会渲染出来视锥体范围之外的物体不会显示在Canvas画布上。
PerspectiveCamera( fov, aspect, near, far )第一个参数是视野角度FOV。视野角度就是无论在什么时候你所能在显示器上看到的场景的范围它的单位是角度(与弧度区分开)。默认值50
第二个参数是长宽比aspect ratio。 也就是你用一个物体的宽除以它的高的值。比如说当你在一个宽屏电视上播放老电影时可以看到图像仿佛是被压扁的。默认值1
最后两个参数是近截面near和远截面far。 当物体某些部分比摄像机的远截面远或者比近截面近的时候该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响但未来为了获得更好的渲染性能你将可以在你的应用程序里去设置它。near默认值0.1far默认值2000 创建正方体到场景中 // 创建一个网格模型const geometry new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体const material new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个材质对象const mesh new THREE.Mesh(geometry, material); // 创建一个网格模型对象scene.add(mesh); // 将网格模型对象添加到场景中这个时候Scene里面已经有了一个Mesh网格模型也就是一个人进入到了想要拍摄的场景之中。默认在原点坐标 我们也可以设置这个人站在哪里 // 创建一个网格模型const geometry new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体const material new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建一个材质对象const mesh new THREE.Mesh(geometry, material); // 创建一个网格模型对象mesh.position.set(1,1,1,) // 设置网格模型对象的位置scene.add(mesh); // 将网格模型对象添加到场景中这个时候 我们 场景Scene准备好了场景里面要拍摄的人Mesh也准备好了相机camera也准备好了这个时候我们需要相机放到一个可以拍摄到咱们物体的一个位置position然后让相机看向哪里呢
相机对象Camera具有位置属性.position通过位置属性.position可以设置相机的位置。 // 创建一个透视相机参数分别为视野角度、宽高比、近平面和远平面const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(5, 5, 5); 相机已经放到了xyz都为5的位置默认看向xyz都为000的位置现在我们想让它看向人也就是网格模型的位置 // 创建一个透视相机参数分别为视野角度、宽高比、近平面和远平面const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(5, 5, 5); // 设置相机方向(指向的场景对象) camera.lookAt(mesh.position); 这个时候 页面还是不展示嘻嘻 不慌~ 渲染场景 这是因为我们还没有对它进行真正的渲染。为此我们需要使用一个被叫做“渲染循环”render loop或者“动画循环”animate loop的东西。 /*** 动画函数* 该函数通过不断地请求下一帧来实现动画效果* 它在每一帧中调用渲染器来重新渲染场景和相机*/function animate() {// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}// 调用animate函数开始动画animate();这下就相当于一直在录像了~ 看下页面 我们添加一个坐标系这样就可以更好的看出所在的位置 辅助观察坐标系同样的添加到场景中 // 创建辅助观察坐标系const asesHelper new THREE.AxesHelper(200);scene.add(asesHelper);three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴对于three.js的3D坐标系默认y轴朝上 我们可以让Z轴朝上 // 默认是 0 1 0camera.up.x 0;camera.up.y 0;camera.up.z 1; 这个时候我们想让他跟随鼠标移动可拖动旋转我们使用
import { OrbitControls } from three/addons/controls/OrbitControls.js;const controls new OrbitControls(camera, renderer.domElement) function animate() {controls.update();// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}这时候我们就可以随意的拖动
我们可以设置这个人Mesh网格模型翻跟头比如我们让他跟随z轴渲染只需要在循环动画中增加旋转即可 function animate() {// 跟随Z轴旋转mesh.rotation.z 0.01;controls.update();// 请求下一帧动画requestAnimationFrame(animate);// 使用当前场景和相机进行渲染renderer.render(scene, camera);}好了到目前位置做了哪些
创建场景在场景中增加Mesh模型模型由几何体和它对应的材质组成设置了它的定位位置增加camera相机录像它的四个参数的含义位置position看向何方lookAt渲染器renderer增加辅助坐标系默认Y朝上增加控制器增加动画围绕z轴旋转
