经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
Three.js 实现3D全景侦探小游戏🕵?
来源:cnblogs  作者:Dragonir  时间:2021/12/17 11:42:20  对本文有异议

背景

你是嘿嘿嘿侦探社实习侦探???,接到上级指派任务,到甄开心小镇??调查市民甄不戳??宝石??失窃案,根据线人流浪汉老石?????提供的线索,小偷就躲在小镇,快把他找出来,帮甄不戳寻回失窃的宝石吧!

本文使用 Three.js SphereGeometry 创建 3D 全景图预览功能,并在全景图中添加二维 SpriteMaterialCanvas、三维 GLTF 等交互点,实现具备场景切换、点击交互的侦探小游戏。

实现效果

左右滑动屏幕,找到 3D 全景场景中的 交互点 并点击,找出嫌疑人真正躲藏的位置。

已适配移动端,可以在手机上打开访问。

?? 在线预览:https://dragonir.github.io/3d-panoramic-vision/

代码实现

初始化场景

创建场景,添加摄像机、光源、渲染。

  1. // 透视摄像机
  2. camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
  3. camera.target = new THREE.Vector3(0, 0, 0);
  4. scene = new THREE.Scene();
  5. // 添加环境光
  6. light = new THREE.HemisphereLight(0xffffff);
  7. light.position.set(0, 40, 0);
  8. scene.add(light);
  9. // 添加平行光
  10. light = new THREE.DirectionalLight(0xffffff);
  11. light.position.set(0, 40, -10);
  12. scene.add(light);
  13. // 渲染
  14. renderer = new THREE.WebGLRenderer();
  15. renderer.setPixelRatio(window.devicePixelRatio);
  16. renderer.setSize(window.innerWidth, window.innerHeight);
  17. container.appendChild(renderer.domElement);

使用球体实现全景功能

  1. // 创建全景场景
  2. geometry = new THREE.SphereGeometry(500, 60, 60);
  3. // 按z轴翻转
  4. geometry.scale(1, 1, -1);
  5. // 添加室外低画质贴图
  6. outside_low = new THREE.MeshBasicMaterial({
  7. map: new THREE.TextureLoader().load('./assets/images/outside_low.jpg')
  8. });
  9. // 添加室内低画质贴图
  10. inside_low = new THREE.MeshBasicMaterial({
  11. map: new THREE.TextureLoader().load('./assets/images/inside_low.jpg')
  12. });
  13. mesh = new THREE.Mesh(geometry, outside_low);
  14. // 异步加载高清纹理图
  15. new THREE.TextureLoader().load('./assets/images/outside.jpg', texture => {
  16. outside = new THREE.MeshBasicMaterial({
  17. map: texture
  18. });
  19. mesh.material = outside;
  20. });
  21. // 添加到场景中
  22. scene.add(mesh);

?? 全景贴图如上图所示,图片来源于 Bing

?? 球体 SphereGeometry

构造函数:

  1. THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
  • radius:半径;
  • segmentsWidth:经度上的分段数;
  • segmentsHeight:纬度上的分段数;
  • phiStart:经度开始的弧度;
  • phiLength:经度跨过的弧度;
  • thetaStart:纬度开始的弧度;
  • thetaLength:纬度跨过的弧度。

?? 基础网格材质 MeshBasicMaterial

球体的材质使用的是 MeshBasicMaterial, 是一种简单的材质,这种材质不受场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形,而且也可以显示几何体的线框。

构造函数:

  1. MeshBasicMaterial(parameters: Object)

parameters :(可选)用于定义材质外观的对象,具有一个或多个属性。

属性:

  • .alphaMap[Texture]alpha 贴图是一张灰度纹理,用于控制整个表面的不透明度。(黑色:完全透明;白色:完全不透明)。默认值为 null
  • .aoMap[Texture]:该纹理的红色通道用作环境遮挡贴图。默认值为 null
  • .aoMapIntensity[Float]:环境遮挡效果的强度。默认值为 1。零是不遮挡效果。
  • .color[Color]:材质的颜色,默认值为白色 0xffffff
  • .combine[Integer]:如何将表面颜色的结果与环境贴图(如果有)结合起来。选项为THREE.Multiply(默认值),THREE.MixOperationTHREE.AddOperation。如果选择多个,则使用 .reflectivity 在两种颜色之间进行混合。
  • .envMap[Texture]:环境贴图。默认值为 null
  • .lightMap[Texture]:光照贴图。默认值为 null
  • .lightMapIntensity[Float]:烘焙光的强度。默认值为 1
  • .map[Texture]:纹理贴图。默认为 null
  • .morphTargets[Boolean]:材质是否使用 morphTargets。默认值为 false
  • .reflectivity[Float]:环境贴图对表面的影响程度,默认值为 1,有效范围介于 0(无反射)和 1(完全反射)之间。
  • .refractionRatio[Float]:折射率不应超过 1。默认值为 0.98
  • .specularMap[Texture]:材质使用的高光贴图。默认值为 null
  • .wireframe[Boolean]:将几何体渲染为线框。默认值为 false(即渲染为平面多边形)。
  • .wireframeLinecap[String]:定义线两端的外观。可选值为 buttroundsquare。默认为 round
  • .wireframeLinejoin[String]:定义线连接节点的样式。可选值为 round, bevelmiter。默认值为 round
  • .wireframeLinewidth[Float]:控制线框宽度。默认值为 1

?? TextureLoader

TextureLoader 从给定的URL开始加载并将完全加载的 texture 传递给 onLoad。该方法还返回一个新的纹理对象,该纹理对象可以直接用于材质创建,加载材质的一个类,内部使用 ImageLoader 来加载文件。

构造函数:

  1. TextureLoader(manager: LoadingManager)
  • manager:加载器使用的 loadingManager,默认值为 THREE.DefaultLoadingManager

方法:

  1. .load(url: String, onLoad: Function, onProgress: Function, onError: Function) : Texture
  • url:文件的 URL 或者路径,也可以为 Data URI
  • onLoad:加载完成时将调用。回调参数为将要加载的 texture
  • onProgress:将在加载过程中进行调用。参数为 XMLHttpRequest 实例,实例包含 totalloaded 参数。
  • onError:在加载错误时被调用。

添加交互点

新建交互点数组,包含每个交互点的名称、缩放比例、空间坐标。

  1. var interactPoints = [
  2. { name: 'point_0_outside_house', scale: 2, x: 0, y: 1.5, z: 24 },
  3. { name: 'point_1_outside_car', scale: 3, x: 40, y: 1, z: -20 },
  4. { name: 'point_2_outside_people', scale: 3, x: -20, y: 1, z: -30 },
  5. { name: 'point_3_inside_eating_room', scale: 2, x: -30, y: 1, z: 20 },
  6. { name: 'point_4_inside_bed_room', scale: 3, x: 48, y: 0, z: -20 }
  7. ];

添加二维静态图片交互点

  1. let pointMaterial = new THREE.SpriteMaterial({
  2. map: new THREE.TextureLoader().load('./assets/images/point.png')
  3. });
  4. interactPoints.map(item => {
  5. let point = new THREE.Sprite(pointMaterial);
  6. point.name = item.name;
  7. point.scale.set(item.scale * 1.2, item.scale * 1.2, item.scale * 1.2);
  8. point.position.set(item.x, item.y, item.z);
  9. scene.add(point);
  10. });

?? 精灵材质 SpriteMaterial

构造函数:

  1. SpriteMaterial(parameters : Object)
  • parameters:可选,用于定义材质外观的对象,具有一个或多个属性。材质的任何属性都可以从此处传入(包括从 MaterialShaderMaterial 继承的任何属性)。
  • SpriteMaterials 不会被 Material.clippingPlanes 裁剪。

属性:

.alphaMap[Texture]alpha 贴图是一张灰度纹理,用于控制整个表面的不透明度。默认值为 null
.color[Color]:材质的颜色,默认值为白色 0xffffff.map 会和 color 相乘。
.map[Texture]:颜色贴图。默认为 null
.rotation[Radians]sprite 的转动,以弧度为单位。默认值为 0
.sizeAttenuation[Boolean]:精灵的大小是否会被相机深度衰减。(仅限透视摄像头。)默认为 true

使用同样的方法,加载嫌疑人二维图片添加到场景中。

  1. function loadMurderer() {
  2. let material = new THREE.SpriteMaterial({
  3. map: new THREE.TextureLoader().load('./assets/models/murderer.png')
  4. });
  5. murderer = new THREE.Sprite(material);
  6. murderer.name = 'murderer';
  7. murderer.scale.set(12, 12, 12);
  8. murderer.position.set(43, -3, -20);
  9. scene.add(murderer);
  10. }

添加三维动态模型锚点

通过加载地标锚点形状的 gltf 模型来实现三维动态锚点,加载 gltf 需要单独引入 GLTFLoader.js,地标模型使用 Blender 构建。

  1. var loader = new THREE.GLTFLoader();
  2. loader.load('./assets/models/anchor.gltf', object => {
  3. object.scene.traverse(child => {
  4. if (child.isMesh) {
  5. // 修改材质样式
  6. child.material.metalness = .4;
  7. child.name.includes('黄') && (child.material.color = new THREE.Color(0xfffc00))
  8. }
  9. });
  10. object.scene.rotation.y = Math.PI / 2;
  11. interactPoints.map(item => {
  12. let anchor = object.scene.clone();
  13. anchor.position.set(item.x, item.y + 3, item.z);
  14. anchor.name = item.name;
  15. anchor.scale.set(item.scale * 3, item.scale * 3, item.scale * 3);
  16. scene.add(anchor);
  17. })
  18. });

需要在 requestAnimationFrame 中通过修改模型的 rotation 来实现自传动画效果。

  1. function animate() {
  2. requestAnimationFrame(animate);
  3. anchorMeshes.map(item => {
  4. item.rotation.y += 0.02;
  5. });
  6. }

添加二维文字提示

可以使用 Canvas 创建文字提示添加到场景中。

  1. function makeTextSprite(message, parameters) {
  2. if (parameters === undefined) parameters = {};
  3. var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Arial";
  4. var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] : 32;
  5. var borderThickness = parameters.hasOwnProperty("borderThickness") ? parameters["borderThickness"] : 4;
  6. var borderColor = parameters.hasOwnProperty("borderColor") ? parameters["borderColor"] : { r: 0, g: 0, b: 0, a: 1.0 };
  7. var canvas = document.createElement('canvas');
  8. var context = canvas.getContext('2d');
  9. context.font = fontsize + "px " + fontface;
  10. var metrics = context.measureText(message);
  11. var textWidth = metrics.width;
  12. context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + "," + borderColor.b + "," + borderColor.a + ")";
  13. context.lineWidth = borderThickness;
  14. context.fillStyle = "#fffc00";
  15. context.fillText(message, borderThickness, fontsize + borderThickness);
  16. context.font = 48 + "px " + fontface;
  17. var texture = new THREE.Texture(canvas);
  18. texture.needsUpdate = true;
  19. var spriteMaterial = new THREE.SpriteMaterial({ map: texture });
  20. var sprite = new THREE.Sprite(spriteMaterial);
  21. return sprite;
  22. }

使用方法:

  1. outsideTextTip = makeTextSprite('进入室内查找');
  2. outsideTextTip.scale.set(2.2, 2.2, 2)
  3. outsideTextTip.position.set(-0.35, -1, 10);
  4. scene.add(outsideTextTip);
  • ?? Canvas 画布可以作为 Three.js 纹理贴图 CanvasTextureCanvas 画布可以通过 2D API 绘制各种各样的几何形状,可以通过 Canvas 绘制一个轮廓后然后作为 Three.js 网格模型、精灵模型等模型对象的纹理贴图。
  • ?? measureText()方法返回一个对象,该对象包含以像素计的指定字体宽度。如果您需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法。measureText 语法:context.measureText(text).width

添加三维文字提示

由于时间有限,三维文字 本示例中并未用到,但是在页面中使用 3D 文字会实现更好的视觉效果,想了解具体实现细节,可以阅读我的另一篇文章,后续的鼠标捕获等内容也在该文中有详细讲解。

?? 传送门:使用three.js实现炫酷的酸性风格3D页面

鼠标捕获

使用 Raycaster 获取点击选中网格对象,并添加点击交互。

  1. function onDocumentMouseDown(event) {
  2. raycaster.setFromCamera(mouse, camera);
  3. var intersects = raycaster.intersectObjects(interactMeshes);
  4. if (intersects.length > 0) {
  5. let name = intersects[0].object.name;
  6. if (name === 'point_0_outside_house') {
  7. camera_time = 1;
  8. } else if (name === 'point_4_inside_bed_room') {
  9. Toast('小偷就在这里', 2000);
  10. loadMurderer();
  11. } else {
  12. Toast(`小偷不在${name.includes('car') ? '车里' : name.includes('people') ? '人群' : name.includes('eating') ? '餐厅' : '这里'}`, 2000);
  13. }
  14. }
  15. onPointerDownPointerX = event.clientX;
  16. onPointerDownPointerY = event.clientY;
  17. onPointerDownLon = lon;
  18. onPointerDownLat = lat;
  19. }

场景切换

  1. function update() {
  2. lat = Math.max(-85, Math.min(85, lat));
  3. phi = THREE.Math.degToRad(90 - lat);
  4. theta = THREE.Math.degToRad(lon);
  5. camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
  6. camera.target.y = 500 * Math.cos(phi);
  7. camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
  8. camera.lookAt(camera.target);
  9. if (camera_time > 0 && camera_time < 50) {
  10. camera.target.x = 0;
  11. camera.target.y = 1;
  12. camera.target.z = 24;
  13. camera.lookAt(camera.target);
  14. camera.fov -= 1;
  15. camera.updateProjectionMatrix();
  16. camera_time++;
  17. outsideTextTip.visible = false;
  18. } else if (camera_time === 50) {
  19. lat = -2;
  20. lon = 182;
  21. camera_time = 0;
  22. camera.fov = 75;
  23. camera.updateProjectionMatrix();
  24. mesh.material = inside_low;
  25. // 加载新的全景图场景
  26. new THREE.TextureLoader().load('./assets/images/inside.jpg', function (texture) {
  27. inside = new THREE.MeshBasicMaterial({
  28. map: texture
  29. });
  30. mesh.material = inside;
  31. });
  32. loadMarker('inside');
  33. }
  34. renderer.render(scene, camera);
  35. }
  • ?? 透视相机的属性创建完成后我们可以根据个人需求随意修改,但是相机的属性修改后,需要调用 updateProjectionMatrix() 方法来更新。
  • ?? THREE.Math.degToRad:将度转化弧度。

到这里,3D 全景功能全部实现。

?? 完整代码:https://github.com/dragonir/3d-panoramic-vision

总结

本案例主要涉及到的知识点包括:

  • 球体 SphereGeometry
  • 基础网格材质 MeshBasicMaterial
  • 精灵材质 SpriteMaterial
  • 材质加载 TextureLoader
  • 文字纹理 Canvas
  • 鼠标捕获 Raycaster

参考资料

作者:dragonir 本文地址:https://www.cnblogs.com/dragonir/p/15700163.html

原文链接:http://www.cnblogs.com/dragonir/p/15700163.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号