相关文章推荐
讲道义的脸盆  ·  解析或序列化 XML - ...·  1 月前    · 
跑龙套的单杠  ·  分享6个对象数组去重的方法开发者社区·  1 月前    · 
纯真的炒饭  ·  MongoDB数据库中更新与删除数据 - ...·  1 月前    · 
体贴的红金鱼  ·  在 Office 加载项中使用 ...·  1 月前    · 
满身肌肉的八宝粥  ·  【Day31】ChatGPT請教教我：Jes ...·  3 天前    · 
活泼的大葱  ·  Excel VBA入门（九）操作工作薄 - ...·  2 年前    · 
逼格高的打火机  ·  ASP.NET Core中的Blazor组件 ...·  2 年前    · 
腹黑的铅笔  ·  AppleScript ...·  2 年前    · 
心软的红金鱼  ·  reactjs - How to use ...·  2 年前    · 
玩篮球的西装  ·  spring cloud ...·  2 年前    · 
Code  ›  three.js全景搭建 、锚点标注添加、 OrbitControls 轨道方向控制 、 场景切换_东湖高新第一会所掌门人的博客
mesh const
https://blog.csdn.net/qq_42359718/article/details/114012073
魁梧的机器人
2 年前

背景： 公司产品预演全景参访
实现： 场景查看 锚点标注
关键点： 二维点击转换三维坐标轴、 锚点绘制、场景切换、数据格式设计

未实现： 标注点添加gif 图片
添加视屏未实践 文档中有 添加视频的材质 可以尝试一下

一、 创建一个场景
为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象： 场景、相机和渲染器 ，这样我们就能透过摄像机渲染出场景。
直接看官网文档 贼详细 three.js 

// 场景
const scene = new THREE.Scene();
// 透视相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    *  透视相机四个参数 ：视野角度
    *      长宽比
    *      近截面
    *      远截面
 // 渲染器
const renderer = new THREE.WebGLRenderer();
// 渲染大小
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 几何体 --------
const geometry = new THREE.BoxGeometry();
// 球体 ----
	// SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
  // - radius：球体半径
  // - widthSegments,
  // - heightSegments：水平方向和垂直方向上分段数。widthSegments最小值为3，默认值为8。heightSegments最小值为2，默认值为6。
  // - phiStart：水平方向上的起始角,默认值0
  // - phiLenght：水平方向上球体曲面覆盖的弧度，默认Math.PI * 2
  // - thetaStart : 垂直方向上的起始角， 默认0
  // - thetaLength: 垂直方向是球体曲面覆盖的弧度，默认值为Math.PI
  const geometry = new THREE.SphereGeometry(500, 60, 40)
// -------------
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
 	默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
camera.position.z = 5;
const animate = function () {
	requestAnimationFrame( animate );
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render( scene, camera );
animate();
	- 加载图片 贴到纹理图  然后add 创建网格 添加到场景
	- 引用图片有两种方式
	（第二种方式 引入图片不清晰 应该是canvas 绘图的原因）

 let demo = new THREE.TextureLoader().load(vrImgurl)

// 方法一
  //防止跨域用canvas作为纹理
      let canvas = document.createElement("canvas");
      canvas.style.backgroundColor = "rgba(255,255,255,0)";
      let context = canvas.getContext("2d");
      let img = new Image();
      img.src = imgurl
      // img.src='';      //绘制全景图
      img.onload = function () {
        canvas.width = this.width;
        canvas.height = this.height;
        context.drawImage(img, 0, 0, this.width, this.height);
        let texture = new THREE.Texture();
        texture.image = canvas;
        texture.needsUpdate = true;//开启纹理更新
        texture.minFilter = THREE.LinearFilter;//minFilter属性：指定纹理如何缩小
        let material = new THREE.MeshBasicMaterial({
          map: texture,
          transparent: false
        });
        mesh = new THREE.Mesh(geometry, material);
        scene.add(mesh);

// 方法二、
  let demo = new THREE.TextureLoader().load(vrImgurl)
     let material = new THREE.MeshBasicMaterial({
         map: demo, // 此处使用 demo 的参数 图片更为清晰
         transparent: false,
   mesh = new THREE.Mesh(geometry, material)
             // 几何体  材料（渲染图）
     scene.add(mesh)

	1、先获取挂载元素的子节点
	2、由于mesh  和scene 是全局定义 所以需要清除  mesh && scene.remove(mesh)
	3、重新实例化即可

 // 初始化先删除子节点
        let container = document.getElementById('container')
        if (container.childNodes.length) {
            container.removeChild(container.childNodes[0])

`在轨道控制中 全景图方向与鼠标拖拽方向一致  如果需要翻转 则在源码找到`
	function rotateLeft( angle ) {
		sphericalDelta.theta -= angle;
	function rotateUp( angle ) {
		sphericalDelta.phi -= angle;
	// ---- 修改为 即可修正方向
	function rotateLeft( angle ) {
		sphericalDelta.theta += angle;
	function rotateUp( angle ) {
		sphericalDelta.phi += angle;

	import OrbitControls from 'three-orbitcontrols'
	// 在场景初始化完成后 初始化控制器
	  // 初始化控制器
  	const initcontrols = () => {
	    controls = new OrbitControls(camera, renderer.domElement)
	    console.log(controls,'--controls')
	      //是否可以缩放




    

	      controls.enableZoom = false
	      //是否自动旋转
	      controls.autoRotate = autoRotate // 动态控制是否制动旋转、
	      // 使动画循环使用时阻尼或自转 意思是否有惯性
	      controls.enableDamping = true;

锚点添加 关键点 二维视图获取三维场景中的点击坐标 （THREE.Raycaster）
 

1、获取点击时的坐标位置
	1-1、 创建场景时绑定 点击事件
	1-2、在当前相机所正视的世界方向建立 三维向量vector3
	1-3、 根据页面展示大小 设置该向量的x、y 和 z 分量。
	1-4、（重点）使用 光线投射Raycaster 计算鼠标在三维坐标中点击的坐标位置
	1-5、传入鼠标点击点击坐标在三维坐标中的中位置信息 		
2、绘制需要标注的精灵 Sprite
	在下面代码中可以 有具体添加步骤	
3、将绘制的精灵添加到 场景 全局 scene

    // 鼠標点击添加一个 确定点击位置  --  锚点 ---待配置 热点图片
    const onDocumentMouseDown = event => {
     * 1、 camera.target 当前相机所正视的世界空间方向 赋值给 vector
     * 2、根据配置页面 展示的宽高值 设置XYZ 轴
     * 3、 vector.unproject(camera) 在投影中使用的摄像机。
     * 4、 使用 光线投射Raycaster 计算鼠标在三维坐标中点击的坐标位置
     *     这将创建一个新的raycaster对象。
     *        let raycaster = new THREE.Raycaster(
     *            camera.position,
     *            vector.sub(camera.position).normalize() //初始化
     *        )
     *      Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float ) {
            origin —— 光线投射的原点向量。
            direction —— 向射线提供方向的方向向量，应当被标准化。
            near —— 返回的所有结果比near远。near不能为负值，其默认值为0。
            far —— 返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。）
        isUserInteracting = true
        if (forType === 'Equirectangular') {
            event.preventDefault()
            // let vector = new THREE.Vector3() //三维坐标对象
            let vector = camera.target
            console.log(vector, 'vector预计是坐标轴的位置')
            vector.set(
                ((event.clientX - 248) / (window.innerWidth - 248)) * 2 - 1,
                -((event.clientY - 32) / (window.innerHeight - 32)) * 2 + 1,
            // 在投影中使用的摄像机。
            vector.unproject(camera)
            // 这将创建一个新的raycaster对象。
            let raycaster = new THREE.Raycaster(
                camera.position,
                vector.sub(camera.position).normalize() //初始化 光线投射的原点向量
            raycaster.camera = camera
            // 得到 点击的坐标 或 点击的标注点 
            // intersects 每项中的object 的type 可以分辨 点击的是标注还是 场景图
            let intersects = raycaster.intersectObjects(scene.children)
            //如果绘制热点属于激活状态
            // 此处需要判断 是否有两个坐标为0
            let isOnShaft = []
            Object.keys(intersects[0].point).forEach(v => {
                if (intersects[0].point[v] === 0) {
                    isOnShaft.push(1)
   //---------------------------添加標注-----------------------------------------
   				// 打开添加热点 true    坐标轴中是否存在两坐标为0  打开删除热点开关 为fasle
            if (refIsHotspot.current && isOnShaft.length < 2 && !refIsDelete.current) {
            	// 绘制热点 
            	//	绘制图片有两种方式
            	//	一种直接引入 new img	
            	//	一种使用 canvas  
            		 	let canvas = document.createElement('canvas')
		                canvas.style.backgroundColor = 'rgba(255,255,255,0)'
		                let context = canvas.getContext('2d')
		                canvas.width = 128
		                canvas.height = 128
		                 context.drawImage(img, 0, 0, 128, 128)
                let img = new Image()
                img.src = hotspot //（ 标注使用的图片） 也可以使用canvas 绘制文字 
                img.onload = function () {
                    let texture = new THREE.Texture(img)
                    texture.needsUpdate = true
                    texture.minFilter = THREE.LinearFilter
                    var spriteMaterial = new THREE.SpriteMaterial({
                        map: texture,
                        transparent: false,
                     // 创建一个 sprite  物体
                    var sprite = new THREE.Sprite(spriteMaterial)
                    sprite.scale.set(30, 30, 30)
                    let rate = 0.8
                    var endV = new THREE.Vector3(
                        intersects[0].point.x * rate,
                        intersects[0].point.y * rate,
                        intersects[0].point.z * rate
                    sprite.position.copy(endV)
                    scene.add(sprite)
                    // addHotspot(intersects[0].point) //同步到全局数据
                //移除热点
            } else {
                if (!refIsDelete.current) return
                if (intersects.length > 0) {
                    const target = intersects[0]
                    console.log(!refIsHotspot.current, refIsDelete.current, '删除打印结果')
                    try {
                        if (target.object && target.object.type.length > 0) {
                            if (target.object.type.toLowerCase() === 'sprite') {
                                scene.remove(target.object)
                    } catch (e) {
                        console.log(e)

初始化 绘制热点
 
    //绘制多个跳转热点
    const drawJumpHotSpots = (variable, newsrc) => {
        console.log(variable, '锚点坐标轴数据 参数')
        variable.forEach(item => {
            let position = item.point
            // TextureLoader 异步记载图片




    

            var texture = new THREE.TextureLoader().load(gif)
            // SpriteMaterial 材质
            var spriteMaterial = new THREE.SpriteMaterial({
                map: texture,
                transparent: true,
            // 物体 Sprite
            var sprite = new THREE.Sprite(spriteMaterial)
            sprite.scale.set(30, 30, 30)
             * 此处添加自定义属性 不能跟原有属性重复避免报错
             * name: 添加锚点名称
             * ids: 唯一ID
             * iconUrl: 图标
            sprite.name = item.name
            sprite.ids = item.id
            sprite.iconUrl = ''
            let rate = 0.8
            var endV = new THREE.Vector3(position.x * rate, position.y * rate, position.z * rate)
            sprite.position.copy(endV)
            scene.add(sprite)

纹理图引入图片 （ 材质 加载图片）
 

// 方案一、
      	let texture = new THREE.TextureLoader().load(img)
       // // TextureLoader 异步记载图片
       var texture = new THREE.TextureLoader().load(gif)
       //  SpriteMaterial 材质
        var spriteMaterial = new THREE.SpriteMaterial({
           map: texture,
           transparent: true,
// 方案二、
        let texture = new THREE.Texture(img)
        texture.needsUpdate = true
        texture.minFilter = THREE.LinearFilter
        var spriteMaterial = new THREE.SpriteMaterial({
            map: texture,
            transparent: false,
         // 创建一个 sprite  物体
        var sprite = new THREE.Sprite(spriteMaterial)

鼠标点击二维坐标 转换三维坐标轴 信息 绘制标注点 （ Raycaster）
 

	// 我其实也没太理解里面的 API的具体参数
	// camera.target 全局声明的 透视相机
	//	(event.clientX - 248) / (window.innerWidth - 248)) * 2 - 1
		// 页面布局 全景图距离左方 248px 
	// (event.clientY - 32) / (window.innerHeight - 32)) * 2 + 1
		// 页面布局 全景图距离左方32pX	
	//  scene.children  >>> scene 为全局声明  let scene = new THREE.Scene()
 	let vector = camera.target
    console.log(vector, 'vector预计是坐标轴的位置')
     vector.set(
         ((event.clientX - 248) / (window.innerWidth - 248)) * 2 - 1,
         -((event.clientY - 32) / (window.innerHeight - 32)) * 2 + 1,
     // 在投影中使用的摄像机。
     vector.unproject(camera)
     // 这将创建一个新的raycaster对象。
     let raycaster = new THREE.Raycaster(
         camera.position,
         vector.sub(camera.position).normalize() //初始化 光线投射的原点向量
     raycaster.camera = camera
     // 得到 点击的坐标 或 点击的标注点 
     // intersects 每项中的object 的type 可以分辨 点击的是标注还是 场景图
     点击的坐标点上的 物体
     let intersects = raycaster.intersectObjects(scene.children)
     //如果绘制热点属于激活状态
     // 此处需要判断 是否有两个坐标为0 两个为0 时 添加的锚点会很大
     let isOnShaft = []  // 是否在坐标轴上
     Object.keys(intersects[0].point).forEach(v => {
         if (intersects[0].point[v] === 0) {
             isOnShaft.push('靓仔')

坐标轴展示 开发实用 （AxesHelper）
 

	  //  三维坐标轴 坐标轴长度
      var axesHelper = new THREE.AxesHelper(150);
      scene.add(axesHelpe  r);

数据格式设计
 

 panoramicData: [
            name: '会所',
            id: '2102271653',
            url: 'huisuo',
            active: true,
            // 锚点信息
            anchorPoint: [
                    point: {
                        x: 180.01349809670057,
                        y: 15.79023683858044,
                        z: 465.07418151652786,
                    id: '2102091411',
                    name: '海边',
                    iconUrl: 'haibian',
                    point: {
                        x: 247.4793362659326,
                        y: -189.1800093391692,
                        z: 390.2798175065487,
                    id: '202102181619',
                    name: '客厅',
                    iconUrl: 'keting',
            name: '海边',
            id: '2102091411',
            url: 'haibian',
            active: false,
            autoRotate: false,
            // 锚点信息
            anchorPoint: [
                    point: {
                        x: 374.5454984418328,
                        y: -5.458415157221607,
                        z: 330.55353704327746,
                    id: '202102181621',
                    name: '豪宅',
                    iconUrl: 'haozhai',
                    point: {
                        x: 140.18787952741366,
                        y: -97.9969695393665,
                        z: 468.933553788003,
                    id: '202102181619',
                    name: '客厅',
                    iconUrl: 'keting',
            name: '客厅',
            id: '202102181619',
            url: 'keting',
            active: false,
            autoRotate: false,
            // 锚点信息
            anchorPoint: [
                    point: {
                        x: 481.8527362463277,
                        y: -24.6389543862957,
                        z: 127.17004633132723,
                    id: '2102271653',
                    name: '会所',
                    iconUrl: 'huisuo',
                    point: {
                        x: 347.09301641855546,
                        y: -109.56249057173801,
                        z: 341.54549425701236,
                    id: '2102091411',
                    name: '海边',
                    iconUrl: 'haibian',
            name: '豪宅',
            id: '202102181621',
            url: 'haozhai',
            active: false,
            autoRotate: false,
            // 锚点信息
            anchorPoint: [
                    point: {
                        x: 85.2120582814672,
                        y: -0.4428222360704279,
                        z: 492.0249309249495,
                    id: '2102271653',
                    name: '会所',
                    iconUrl: 'huisuo',
                    point: {
                        x: 441.06070438164795,
                        y: -157.51582618415583,
                        z: 173.01486267642798,
                    id: '2102091411',
                    name: '海边',
                    iconUrl: 'haibian',
                                    通过使用three.js开发VR看房，以高仿真的实战授课模式，带你深入学习three.js框架、webgl的核心概念、让你了解VR看房是如何开发的，掌握这一知识后可以做VR全景、室内漫游等项目。
世界坐标和本地坐标
根据参照物的不同，Three.js将坐标分为世界坐标和本地坐标。即世界坐标是以Sence为参照进行描述的坐标信息，本地坐标是以父层级为参照进行描述的坐标信息。
一般，不明确指明是世界坐标，大多说的是本地坐标信息。
屏幕坐标和世界坐标
在屏幕上，对于用户的操作我们能获取的只能是屏幕坐标。在处理其与
需要在3d模型上实现标注的功能，一开始是直接通过添加一个普通的mesh来实现的，但是这样就会有一个问题-当视图缩放的时候，标注也会跟着一起放大缩小，影响视觉效果，因此需要实现一个不会随着视图一起放大或者缩小的mesh
明确方向
根据需求，可以知道我们其实需要实现的就是更改模型渲染的默认方式，而模型的渲染是由模型的MVP三个矩阵来决定的
再进一步分析MVP三个矩阵，Model矩阵决定模型的旋转、缩放和位移，View决定相机的变换， Projection决定模型最终到屏幕的输出。根据需求
                                    1.屏幕分辨率设置为480*8002.创建一张图片, 图片原大小为100*1003.改变图片锚点(1).图片锚点处于屏幕中心点的时候,锚点是一个雪花状的物体, 想象锚点是一个1*1像素的矩形, 锚点Min(0.5, 0.5), Max(0.5, 0.5), 中心点Pivot(0.5, 0.5), 图片的位置坐标(0,0),位置坐标是锚点和中心点水平方向的距离, 图片位于屏幕的中心。(2).单击cu...
                                    Three.js描绘点线面 （含满天星空Demo）1.点在three.js中利用THREE.Vector3()是用来缺点点的位置的，它的三个参数分别是对应于三维坐标的x轴，y轴和z轴。PointsMaterial 
来确定点的材质，最后是要使用THREE.Points( starsGeometry, starsMaterial )来创建这个点。var starsGeometry = new THRE
                                    OrbitControls是THREEJS中最常用的一个控制器，可以帮助我们实现以目标为焦点的旋转缩放，同时平移相机观察场景的操作，看上去是物体在进行变换，实际上所有的变化都是相机的相对位置在发生改变。今天就给大家讲解该空间实现的核心源码以及实现原理。
创建圆柱几何体
CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Floa
 
推荐文章
讲道义的脸盆  ·  解析或序列化 XML - XML：可扩展标记语言 | MDN
1 月前
跑龙套的单杠  ·  分享6个对象数组去重的方法开发者社区
1 月前
纯真的炒饭  ·  MongoDB数据库中更新与删除数据 - 龙恩0707
1 月前
体贴的红金鱼  ·  在 Office 加载项中使用 Office 对话框 API - Office Add-ins | Microsoft Learn
1 月前
满身肌肉的八宝粥  ·  【Day31】ChatGPT請教教我：Jest 單元測試（下) - 完整語法＆教學 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
3 天前
活泼的大葱  ·  Excel VBA入门（九）操作工作薄 - 东围居士 - 博客园
2 年前
逼格高的打火机  ·  ASP.NET Core中的Blazor组件介绍_基础应用_脚本之家
2 年前
腹黑的铅笔  ·  AppleScript 入门：探索macOS 自动化- 少数派
2 年前
心软的红金鱼  ·  reactjs - How to use snap SVG in react with next and TS? - Stack Overflow
2 年前
玩篮球的西装  ·  spring cloud gateway开发openApi统一鉴权_openapi鉴权_hjnjmjkj的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号