使用three.js写全景图，使用sprite类canvas，结合射线，点击跳转指定全景图

最新推荐文章于 2024-05-17 09:00:00 发布
最新推荐文章于 2024-05-17 09:00:00 发布
阅读量2.8k 收藏 13
点赞数 3
分类专栏： three.js 文章标签： three.js raycaster sprite canvas 全景图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WDCCSDN/article/details/81214804
版权

话不多说上代码：

1、html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body onload="draw();">
</body>
<script src="js/three.js"></script>
<script src="js/panorama.js"></script>
</html>

2、js

	var key=4;
    var renderer;
    var camera;
    var scene;
    var light;
    var stats;
    var isUserInteracting = false,lon = 90,lat = 0,phi = 0, theta = 0,target = new THREE.Vector3();
    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();    //鼠标位置
    var mesh,texture=[],go_room=[];
    texture[0] = THREE.ImageUtils.loadTexture("images/1.jpg",null,function(t){});
    texture[1] = THREE.ImageUtils.loadTexture("images/2.jpg",null,function(t){});
    texture[2] = THREE.ImageUtils.loadTexture("images/3.jpg",null,function(t){});
    texture[3] = THREE.ImageUtils.loadTexture("images/4.jpg",null,function(t){});
    texture[4] = THREE.ImageUtils.loadTexture("images/5.jpg",null,function(t){});
    texture[5] = THREE.ImageUtils.loadTexture("images/6.jpg",null,function(t){});
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
    }
    function initCamera() {
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 11000);
        camera.target = new THREE.Vector3( 0, 0, 0 );
    }
    function initScene() {
        scene = new THREE.Scene();
    }
    function initLight() {
    }
    function initModel() {
        //声明一个球体
        var geometry = new THREE.SphereGeometry( 500, 60, 40 );
        // 反转X轴上的几何图形，使所有的面点向内。
        geometry.scale( -1, 1, 1 );
        //声明球体纹理
        if(texture[key-1]==undefined){
            texture[key-1]=THREE.ImageUtils.loadTexture("images/"+key+".jpg",null,function(t){});
        }
        var material = new THREE.MeshBasicMaterial({map:texture[key-1]});
        mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );
        initpos();
    }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
    function onDocumentMouseMove( event ) {
        if ( isUserInteracting === true ) {
            lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
            lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
        }
    }
    function onDocumentMouseUp( event ) {
        isUserInteracting = false;
    }
    function onDocumentMouseDown( event ) {
        //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
        raycaster.setFromCamera( mouse, camera );
        // 获取raycaster直线和所有模型相交的数组集合
        var intersects = raycaster.intersectObjects(go_room);
        console.log(intersects);
        if(intersects.length ==1){
            switch (intersects[0].object.name){
                case "room1":
                    changeScene(1);
                    break;
                case "room2":
                    changeScene(2);
                    break;
                case "room3":
                    changeScene(3);
                    break;
                case "room4":
                    changeScene(4);
                    break;
                case "room5":
                    changeScene(5);
                    break;
                case "room6":
                    changeScene(6);
                    break;
            }
        }else{
            event.preventDefault();
            isUserInteracting = true;
            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;
            onPointerDownLon = lon;
            onPointerDownLat = lat;
        }
    }
    function onDocumentMouseWheel( event ) {
        var fov = camera.fov + event.deltaY * 0.05;
        camera.fov = THREE.Math.clamp( fov, 10, 75 );
        camera.updateProjectionMatrix();
    }
    function onDocumentTouchStart( event ) {
        if ( event.touches.length == 1 ) {
            event.preventDefault();
            onPointerDownPointerX = event.touches[ 0 ].pageX;
            onPointerDownPointerY = event.touches[ 0 ].pageY;
            onPointerDownLon = lon;
            onPointerDownLat = lat;
        }
    }
    function onDocumentTouchMove( event ) {
        if ( event.touches.length == 1 ) {
            event.preventDefault();
            lon = ( onPointerDownPointerX - event.touches[0].pageX ) * 0.1 + onPointerDownLon;
            lat = ( event.touches[0].pageY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
        }
    }
    function animate() {
        update();
        requestAnimationFrame( animate );
    }
    function update() {
        if ( isUserInteracting === false ) {
            lon += 0.1;
        }
        lat = Math.max( - 85, Math.min( 85, lat ) );
        phi = THREE.Math.degToRad( 90 - lat );
        theta = THREE.Math.degToRad( lon );
        target.x = 500 * Math.sin( phi ) * Math.cos( theta );
        target.y = 500 * Math.cos( phi );
        target.z = 500 * Math.sin( phi ) * Math.sin( theta );
        camera.lookAt( target );
        renderer.render( scene, camera );
    }
    function draw() {
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        animate();
    }
    function changeScene(index){
        key=index;
        var material = mesh.material;
        if(texture[key-1]==undefined){
            texture[key-1]=THREE.ImageUtils.loadTexture("images/"+key+".jpg",null,function(t){});
        }
        material.map = texture[key-1];
        material.map.needsUpdate = true;
        throwDir(key);
    }
    function throwDir(key){
        switch (key){
            case 1:
                for(var i=0;i<6;i++){
                    if(i==3){
                        go_room[i].position.set(3.5,0,-0.3);
                    }else{
                        go_room[i].position.set(100,100,100);
                    }
                    scene.add(go_room[i]);
                }
                break;
            case 2:
                for(var i=0;i<6;i++){
                    if(i==3){
                        go_room[i].position.set(3.5,0,-0.5);
                    }else{
                        go_room[i].position.set(100,100,100);
                    }
                    scene.add(go_room[i]);
                }
                break;
            case 3:
                for(var i=0;i<6;i++){
                    if(i==3){
                        go_room[i].position.set(3,0,1);
                    }else{
                        go_room[i].position.set(100,100,100);
                    }
                    scene.add(go_room[i]);
                }
                break;
            case 4:
                go_room[0].position.set(-2.5,-0.2,-0.6);
                scene.add(go_room[0]);
                go_room[1].position.set(-3.8,0.3,-0.3);
                scene.add(go_room[1]);
                go_room[2].position.set(-3.8,0.3,0.3);
                scene.add(go_room[2]);
                go_room[3].position.set(-3,100,-0.6);
                scene.add(go_room[3]);
                go_room[4].position.set(-2.5,-0.2,0.6);
                scene.add(go_room[4]);
                go_room[5].position.set(-1.7,0,3);
                scene.add(go_room[5]);
                break;
            case 5:
                for(var i=0;i<6;i++){
                    if(i==3){
                        go_room[i].position.set(0.5,0,-2);
                    }else{
                        go_room[i].position.set(100,100,100);
                    }
                    scene.add(go_room[i]);
                }
                break;
            case 6:
                for(var i=0;i<6;i++){
                    if(i==3){
                        go_room[i].position.set(-0.3,0,2);
                    }else{
                        go_room[i].position.set(100,100,100);
                    }
                    scene.add(go_room[i]);
                }
                break;
        }
    }
    function initpos(){
        go_room[0] = makeTextSprite( " ","☝卧室1",{
            "fontsize":20
        });
        go_room[0].name="room1";
        go_room[0].position.set(-2.5,-0.2,-0.6);
        scene.add(go_room[0]);


        go_room[1] = makeTextSprite( " ","☝卧室2",{
            "fontsize":20
        });
        go_room[1].name="room2";
        go_room[1].position.set(-3.8,0.3,-0.3);
        scene.add(go_room[1]);


        go_room[2] = makeTextSprite( " ","☝卧室3",{
            "fontsize":20
        });
        go_room[2].name="room3";
        go_room[2].position.set(-3.8,0.3,0.3);
        scene.add(go_room[2]);


        go_room[3] = makeTextSprite( " ","☝客厅",{
            "fontsize":20
        });
        go_room[3].name="room4";
        go_room[3].position.set(-3,100,-0.6);
        scene.add(go_room[3]);


        go_room[4] = makeTextSprite( " ","☝卫生间",{
            "fontsize":20
        });
        go_room[4].name="room5";
        go_room[4].position.set(-2.5,-0.2,0.6);
        scene.add(go_room[4]);


        go_room[5] = makeTextSprite( " ","☝厨房",{
            "fontsize":12
        });
        go_room[5].name="room6";
        go_room[5].position.set(-1.7,0,3);
        scene.add(go_room[5]);
    }
    window.addEventListener( 'resize', onWindowResize, false );
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
    document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    document.addEventListener( 'wheel', onDocumentMouseWheel, false );
    document.addEventListener( 'touchstart', onDocumentTouchStart, false );
    document.addEventListener( 'touchmove', onDocumentTouchMove, false );
    document.addEventListener( 'touchend', onDocumentMouseDown, false );
    function makeTextSprite( message,message_zw, parameters){
	    if ( parameters === undefined ) parameters = {};
	    var fontface = parameters.hasOwnProperty("fontface") ?
	        parameters["fontface"] : "Arial";
	    var fontsize = parameters.hasOwnProperty("fontsize") ?
	        parameters["fontsize"] : 30;
	    var borderThickness = parameters.hasOwnProperty("borderThickness") ?
	        parameters["borderThickness"] : 4;
	    var borderColor = parameters.hasOwnProperty("borderColor") ?
	        parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
	    var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?
	        parameters["backgroundColor"] : { r:0, g:0, b:0, a:1.0 };
	    var canvas = document.createElement('canvas');
	    var context = canvas.getContext('2d');
	    context.font = "Bold " + fontsize + "px " + fontface;
	    var metrics = context.measureText( message );
	    var textWidth = metrics.width;
	    context.fillStyle   = "rgba(" + backgroundColor.r + "," + backgroundColor.g + ","
	        + backgroundColor.b + "," + backgroundColor.a + ")";
	    context.strokeStyle = "rgba(" + borderColor.r + "," + borderColor.g + ","
	        + borderColor.b + "," + borderColor.a + ")";
	    context.lineWidth = borderThickness;
	    context.fillStyle = "#ff0000";
	    context.fillText( message, borderThickness, fontsize + borderThickness);
	    context.font =  40 + "px " + fontface;
	    context.fillText( message_zw, borderThickness, fontsize + borderThickness+40);
	    var texture = new THREE.Texture(canvas);
	    texture.needsUpdate = true;

	    var spriteMaterial = new THREE.SpriteMaterial(
	        { map: texture, useScreenCoordinates: false} );
	    var sprite = new THREE.Sprite( spriteMaterial );
	    sprite.scale.set(0.5,0.5,0.5);
	    return sprite;
	}

个人服务器，一兆带宽，全景图比较大，下载慢，需要等一会

查看地址：http://47.104.152.68/panorama/changeqjt.html

各位有没有啥处理图片的好方式尽量压缩图片，因为我的全景图平均每张有一兆大小，访问比较慢，请关注评论我

-Dayer-
关注
  • 3
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Three.JS以及A*寻路算法制作自动寻路场景（五）使用多view绘图实现小地图功能
每天学习一点点
07-22 3308
本节内容： 使用多view渲染同一场景方法简介 套用此方法，实现小地图功能，完成本DEMO 本节最终效果图： 使用多view渲染同一场景方法简介 主要参考的three.js官方案例（https://threejs.org/examples/?q=orb#webgl_multiple_views），效果如下： 查看本案例源代码，要实现多view渲染，需要定义一个views数组，存放...
three.js 源码注释（五十五）Material /SpriteCanvasMaterial.js
omni360的专栏
12-28 4455
SpriteCanvasMaterial方法根据参数parameters创建适用于canvas渲染器的Sprite(点精灵)的材质类型, parameters参数的格式看上面.SpriteCanvasMaterial对象的功能函数采用,定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material. TODO: SpriteCanvasMaterial和SpriteMaterial除了几个属性不一样,不知道是不是应用场景也不一样? <summary>SpriteCanvasMaterial<
Three.js 快速入门教程 07 - 场景物体添加标注
最新发布
最佳编码阿柚的博客
05-17 653
在开发 3D 可视化的项目中，往往会碰到要加场景中添加标注的需求。Three.js 内置了和两种渲染器，可以和方便的将可以将 HTML 元素与三维场景的内容相结合。
JS图片360度全景预览插件
ICode联盟
07-14 489
通过令人惊叹的360视角吸引您的客户,让您的产品充满震撼。JSCloudimage360View是一种简单的交互式资源,可用于提供产品的虚拟浏览。
canvas js 绘图插件_看完这篇，你也可以实现一个360度全景插件（一）原理篇
weixin_39583655的博客
11-23 672
导读本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。我们先来看一下插件的效果：如果你对Three.js已经很熟悉了，或者你想跳过基础理论，那么你可以直接从全景预览开始看起。本项目的github地址：https://github.com/ConardLi/tpanorama#一、理清关系#1.1 OpenGLOpenGL是用于渲染2D、3D量图形的跨语言、跨平台...
three.js Sprite标签(Canvas作为贴图)
u014291990的博客
01-07 928
注意：本节课主要是技术方案讲解，默认你有Canvas基础，如果没有Canvas基础，可以学习之后再来学习本节课内容。你可以使用Canvas绘制特定轮廓的标签，比如加上指引线或箭头，可以输入特定文字。把canvas画布当做图片，读取参数canvas画布上的像素值，创建纹理贴图。下面代码自动适配了不同长度的文字标注，文字符号越多，canvas画布越长。，如果还未加载完成，创建纹理时候，读取画布像素时候，会不包含图片。的函数，可以根据需要调用，标注任何需要标注的地方。精灵模型的颜色贴图，实现一个标签。
使用three.js制作的图像过渡效果.zip
01-06
- **加载图像（Loading Images）**：使用three.js的ImageLoader类加载2D图像，并将其转换为纹理（Texture）。 - **纹理映射（Texture Mapping）**：将图像纹理应用到3D几何体表面，创建2D图像在3D空间的效果。 - ...
使用three.js+canvas实现爱心代码+播放器效果.zip
05-13
在本项目中，我们主要探讨如何使用three.js和HTML5 Canvas技术来实现一个创新的爱心动画效果，并结合播放器功能，创造出独特的互动体验。以下是关于这个主题的详细知识点： 1. **Three.js**：Three.js 是一个基于 ...
WebGL/ThreeJS Sprite、SpriteMaterial通过精灵模型和Canvas画布Demo
12-01
在本Demo中，我们将深入探讨WebGL和Three.js中的Sprite和SpriteMaterial，以及如何结合Canvas画布进行更复杂的图形操作。 首先，让我们了解Sprite。在Three.js中，Sprite是一种特殊的几何体，它只由一个二维平面...
three.js 3D地球实例，支持国家点击和飞线
02-11
"three.js 3D地球实例，支持国家点击和飞线" 这个标题揭示了我们讨论的核心内容。它是一个基于three.js库的3D地球模型，具有交互性，允许用户点击不同国家，并展示飞线效果。这里的“飞线”可能指的是在地图上显示从...
three-spritetext:ThreeJS的基于Sprite的文本组件
04-27
import SpriteText from 'three-spritetext'; 或者 var SpriteText = require('three-spritetext'); 甚至 [removed][removed] 然后 var myText = new SpriteText('My text'); var myScene = new THREE.Scene(); ...
three.js-links:具有嵌入式链接和Sprite文本标签的可单击几何
05-01
three.js链接 具有嵌入式链接和Sprite文本标签的可单击几何。 将three.js-master（ ）文件夹放入此仓库中。
Three.js实现跳一跳(在线玩)
前端开发博客
04-28 9971
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群游戏地址：fwjzzz.gitee.io/jump[1]，点击原文链接可以试玩，git地址：gitee.com/fwjzzz/Jump[2]前言跳一跳是微信小程序[3]的一个小游戏。长按屏幕让小人蓄力跳跃，进行游玩。按照小人跳跃盒子的数量，以及特殊盒子加分项计算得分。游戏规则十分简单：长按鼠标蓄力、放手，方...
threejs 加载两个场景_three.js 场景切换
weixin_29935511的博客
01-12 2811
用6个面组成的立方体作为场景图，发现会出现变形的现象，css3DRenderer 不会变形，但是不方便增加文字，最后采用scene的背景作为场景，背景是用cubeTextureLoader()加载的。切换场景1切换场景2var width, height;var renderer;function initRender() {width = document.getElementById('can...
Threejs使用精灵Sprite作为标签，鼠标悬浮精灵上时鼠变小手
左本Web3D
02-14 8324
1，介绍 该示例使用的是 r95版本Three.js库。 主要实现功能：引用模型进行展示，使用精灵Sprite作为标签，鼠标悬浮精灵上时变小手。 效果图如下： 2，主要说明 使用精灵Sprite作为标签，SpriteMaterial作为材质，使用精灵作为标签，就需要把精灵对象插入到父对象中，作为子对会随着父对象的位置变化而跟着变化，代码如下： // 创建精灵函数，传入父对象 function createLableSprite_jcy(group) { var spriteM
Threejs进阶之十：让模型移动到鼠标点击的指定位置
九仞山的专栏
04-29 2501
介绍了让模型移动到鼠标点击的指定位置的详细思路和方法，里面用到了HTML中DOM获取坐标的属性和方法，Threejs中光线折射的方法，归一化，向量等知识
THREEJS中通过Raycaster获取鼠标与模型的交互点
weixin_44870969的博客
04-29 1211
注意：group中存放模型 // 适用于通过json得到的sprite精灵绘制的 //点击射线 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // document.getElementById("container").addEventListener('mousedown', onDocumentMouseDown, false); document.body.addEventListener('mou.
threejs使用Sprite精灵图结合射线实现点击Sprite
Kino的博客
07-04 1129
【代码】threejs使用Sprite精灵图结合射线实现点击Sprite。
Threejs多个相同格式模型同一页面加载切换
qq_53479183的博客
03-21 1276
Threejs多个相同格式模型单页面切换加载
使用three.js的Sprite实现火焰特效
05-24
要使用three.js的Sprite实现火焰特效，可以按照以下步骤操作： 1. 导入three.js库和需要用到的火焰贴图。 2. 创建一个SpriteMaterial材质，将火焰贴图作为材质的map属性。 3. 创建一个Sprite对象，并将SpriteMaterial材质赋值给它。 4. 设置Sprite对象的位置和缩放，使它看起来像是一个火焰。 5. 将Sprite对象添加到场景中。 下面是一个简单的示例代码，用于实现一个火焰特效： ```javascript // 导入three.js库和需要用到的火焰贴图 import * as THREE from 'three'; import fireTexture from './fire.png'; // 创建一个SpriteMaterial材质 const fireMaterial = new THREE.SpriteMaterial({ map: new THREE.TextureLoader().load(fireTexture), color: 0xffffff, blending: THREE.AdditiveBlending }); // 创建一个Sprite对象，并将SpriteMaterial材质赋值给它 const fire = new THREE.Sprite(fireMaterial); // 设置Sprite对象的位置和缩放，使它看起来像是一个火焰 fire.position.set(x, y, z); fire.scale.set(size, size, size); // 将Sprite对象添加到场景中 scene.add(fire); ``` 注意，在实际使用中，需要根据场景的实际情况调整火焰的位置和大小，以获得更好的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值