three.js 3d全景效果演示，侦探小游戏.zip

# Three.js 实现3D全景侦探小游戏 🕵️  ## 背景 > 你是**嘿嘿嘿侦探社**实习侦探🕵️，接到上级指派任务，到**甄开心小镇🏠**调查市民**甄不戳👨**宝石💎失窃案，根据线人**流浪汉老石👨‍🎤**提供的线索，小偷就躲在小镇，快把他找出来，帮甄不戳寻回失窃的宝石吧！ 本文使用 `Three.js` `SphereGeometry` 创建 `3D` 全景图预览功能，并在全景图中添加二维 `SpriteMaterial`、`Canvas`、三维 `GLTF` 等交互点，实现具备场景切换、点击交互的侦探小游戏。 ## 实现效果 左右滑动屏幕，找到 `3D` 全景场景中的 `交互点` 并点击，找出嫌疑人真正躲藏的位置。  已适配移动端，可以在手机上打开访问。  > `💡` 在线预览：<https://dragonir.github.io/3d-panoramic-vision/> ## 代码实现 ### 初始化场景 创建场景，添加摄像机、光源、渲染。 ```js // 透视摄像机 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100); camera.target = new THREE.Vector3(0, 0, 0); scene = new THREE.Scene(); // 添加环境光 light = new THREE.HemisphereLight(0xffffff); light.position.set(0, 40, 0); scene.add(light); // 添加平行光 light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 40, -10); scene.add(light); // 渲染 renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); ``` ### 使用球体实现全景功能 ```js // 创建全景场景 geometry = new THREE.SphereGeometry(500, 60, 60); // 按z轴翻转 geometry.scale(1, 1, -1); // 添加室外低画质贴图 outside_low = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/images/outside_low.jpg') }); // 添加室内低画质贴图 inside_low = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load('./assets/images/inside_low.jpg') }); mesh = new THREE.Mesh(geometry, outside_low); // 异步加载高清纹理图 new THREE.TextureLoader().load('./assets/images/outside.jpg', texture => { outside = new THREE.MeshBasicMaterial({ map: texture }); mesh.material = outside; }); // 添加到场景中 scene.add(mesh); ```  > `📌` 全景贴图如上图所示，图片来源于 `Bing`。 `💡` 球体 `SphereGeometry`  构造函数： ```js THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength) ``` * `radius`：半径； * `segmentsWidth`：经度上的分段数； * `segmentsHeight`：纬度上的分段数； * `phiStart`：经度开始的弧度； * `phiLength`：经度跨过的弧度； * `thetaStart`：纬度开始的弧度； * `thetaLength`：纬度跨过的弧度。 `💡` 基础网格材质 `MeshBasicMaterial` 球体的材质使用的是 `MeshBasicMaterial`, 是一种简单的材质，这种材质不受场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。 构造函数： ```js MeshBasicMaterial(parameters: Object) ``` `parameters` ：（可选）用于定义材质外观的对象，具有一个或多个属性。 属性： * `.alphaMap[Texture]`：`alpha` 贴图是一张灰度纹理，用于控制整个表面的不透明度。（`黑色：完全透明；白色：完全不透明`）。默认值为 `null`。 * `.aoMap[Texture]`：该纹理的红色通道用作环境遮挡贴图。默认值为 `null`。 * `.aoMapIntensity[Float]`：环境遮挡效果的强度。默认值为 `1`。零是不遮挡效果。 * `.color[Color]`：材质的颜色，默认值为白色 `0xffffff`。 * `.combine[Integer]`：如何将表面颜色的结果与环境贴图（如果有）结合起来。选项为`THREE.Multiply`（默认值），`THREE.MixOperation`，`THREE.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]`：定义线两端的外观。可选值为 `butt`，`round` 和 `square`。默认为 `round`。 * `.wireframeLinejoin[String]`：定义线连接节点的样式。可选值为 `round`, `bevel` 和 `miter`。默认值为 `round`。 * `.wireframeLinewidth[Float]`：控制线框宽度。默认值为 `1`。 `💡` `TextureLoader` `TextureLoader` 从给定的URL开始加载并将完全加载的 `texture` 传递给 `onLoad`。该方法还返回一个新的纹理对象，该纹理对象可以直接用于材质创建，加载材质的一个类，内部使用 `ImageLoader` 来加载文件。 构造函数： ```js TextureLoader(manager: LoadingManager) ``` * `manager`：加载器使用的 `loadingManager`，默认值为 `THREE.DefaultLoadingManager`。 方法： ```js .load(url: String, onLoad: Function, onProgress: Function, onError: Function) : Texture ``` * `url`：文件的 `URL` 或者路径，也可以为 `Data URI`。 * `onLoad`：加载完成时将调用。回调参数为将要加载的 `texture`。 * `onProgress`：将在加载过程中进行调用。参数为 `XMLHttpRequest` 实例，实例包含 `total` 和 `loaded` 参数。 * `onError`：在加载错误时被调用。 ### 添加交互点 新建交互点数组，包含每个交互点的名称、缩放比例、空间坐标。 ```js var interactPoints = [ { name: 'point_0_outside_house', scale: 2, x: 0, y: 1.5, z: 24 }, { name: 'point_1_outside_car', scale: 3, x: 40, y: 1, z: -20 }, { name: 'point_2_outside_people', scale: 3, x: -20, y: 1, z: -30 }, { name: 'point_3_inside_eating_room', scale: 2, x: -30, y: 1, z: 20 }, { name: 'point_4_inside_bed_room', scale: 3, x: 48, y: 0, z: -20 } ]; ``` #### 添加二维静态图片交互点  ```js let pointMaterial = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load('./assets/images/point.png') }); interactPoints.map(item => { let point = new THREE.Sprite(pointMaterial); point.name = item.name; point.scale.set(item.scale * 1.2, item.scale * 1.2, item.scale * 1.2); point.position.set(item.x, item.y, item.z); scene.add(point); }); ``` `💡` 精灵材质 `SpriteMaterial` 构造函数: ```js SpriteMaterial(parameters : Object) ``` * `parameters`：可选，用于定义材质外观的对象，具有一个或多个属性。材质的任何属性都可以从此处传入(包括从 `Material` 和 `ShaderMaterial` 继承的任何属性)。 * `SpriteMaterials` 不会被 `Material.clippingPlanes` 裁剪。 属性： `.alphaMap[Texture]`：`alpha` 贴图是一张灰度纹理，用于控制整个表面的不透明度。默认值为 `null`。 `.color[Color]`：材质的颜色，默认值为白色 `0xffffff`。 `.map` 会和 `color` 相乘。 `.map[Texture]`：颜色贴图。默认为 `null`。 `.rotation[Radians]`：`sprite` 的转动，以弧度为单位。默认值为 `0`。 `.sizeAttenuation[Boolean]`：精灵的大小是否会被相机深度衰减。