three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图</title>
    <script src="js/three.js"></script>
    <script src="js/jquery.js"></script>
</head>

<body>
    <div id="myContainer"></div>
    <script>
        //定义相机、场景、渲染器
        var myCamera, myScene, myRenderer;
        var lon = 0, lat = 0, phi = 0, theta = 0;
        //创建TextureLoader 纹理加载器加载图片
        var myTextureLoader = new THREE.TextureLoader();
        myTextureLoader.load('img/img050.jpg', function (myTexture) {
            init(myTexture);
            animate();
        });

        function init(myTexture) {
            //antialias 是否执行抗锯齿。默认为false;alpha 是否可以设置背景色透明。默认为false
            myRenderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
            myRenderer.setSize(window.innerWidth, window.innerHeight);
            $("#myContainer").append(myRenderer.domElement);
            //创建透视相机PerspectiveCamera
            myCamera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000);
            myScene = new THREE.Scene();
            
            /*
            WebGLCubeRenderTarget(size : Number, options : Object)
            size - 大小,以像素为单位。默认值为 1。
            options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。以下是合理选项:
                wrapS - 默认是ClampToEdgeWrapping.
                wrapT - 默认是ClampToEdgeWrapping.
                magFilter - 默认是.LinearFilter.
                minFilter - 默认是LinearFilter.
                generateMipmaps - 默认是false.
                format - 默认是RGBAFormat.
                type - 默认是UnsignedByteType.
                anisotropy - 默认是 1. 
                encoding - 默认是LinearEncoding.
                depthBuffer - 默认是true.
                stencilBuffer - 默认为false。
            */
           //使用全景图设置场景背景
            myScene.background = new THREE.WebGLCubeRenderTarget(1024).fromEquirectangularTexture(myRenderer, myTexture);
        }
		
		   //更多源码 点击下方链接下载
    </script>
</body>

</html>

源码下载地址

three.js从入门到精通系列教程004 - three.js透视相机(PerspectiveCamera)滚动浏览全景大图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/334084.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【React】脚手架创建项目

文章目录 创建React项目目录结构分析了解PWA脚手架中的webpack 创建React项目 ◼ 创建React项目的命令如下&#xff1a; ​  注意&#xff1a;项目名称不能包含大写字母 ​  另外还有更多创建项目的方式&#xff0c;可以参考GitHub的readme 命令&#xff1a; create-rea…

【算法Hot100系列】字母异位词分组

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

202408读书笔记|《半小时漫画红楼梦12》——鲜花着锦,烈火烹油,不是东风压了西风,就是西风压了东风

202408读书笔记|《半小时漫画红楼梦12》——鲜花着锦&#xff0c;烈火烹油&#xff0c;不是东风压了西风&#xff0c;就是西风压了东风 1. 关系图谱绘制2. 摘录3. 人物关系 1. 关系图谱绘制 https://blog.csdn.net/qq_40985985/article/details/127822673https://blog.csdn.ne…

鸿蒙开发环境配置-Windows

背景 入局鸿蒙开发&#xff0c;发现在 Windows 下面配置安装相关环境并没有像 Mac 一样简单&#xff0c;过程中遇到了一些问题记录一下。 Devceo Studio 下载安装 目前鸿蒙的 IDE 最新版是 4.0&#xff0c;通过这个连接可以下载&#xff0c;鸿蒙4.0下载连接。选择符合我们电…

零基础学Python(2)— 安装Python开发工具之PyCharm

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。PyCharm是由JetBrains公司开发的一款Python开发工具。在Windows、Mac OS和Linux操作系统中都可以使用。它具有语法高亮显示、Project&#xff08;项目&#xff09;管理代码跳转、智能提示、自动完成、调试、单元测试和版本…

leetcode:1736. 替换隐藏数字得到的最晚时间(python3解法)

难度&#xff1a;简单 给你一个字符串 time &#xff0c;格式为 hh:mm&#xff08;小时&#xff1a;分钟&#xff09;&#xff0c;其中某几位数字被隐藏&#xff08;用 ? 表示&#xff09;。 有效的时间为 00:00 到 23:59 之间的所有时间&#xff0c;包括 00:00 和 23:59 。 …

IDEA的一些基本操作

修改类名&#xff1a; 新建文件&#xff1a; 删除文件&#xff1a; 新建模块&#xff1a;

Vue 3 hooks的基本使用及疑问

前言 vue3也用过一段时间了&#xff0c;hooks听说过&#xff0c;但是一直没有用过。公司的前端项目里也没有相应的应用&#xff0c;因此打算系统的学习一下。 hooks与普通函数的区别 以实现一个加法功能为例。 普通函数未抽离 <template><div class"box&quo…

RIP基础实验配置

要使用RIP完成以上命令需求 1&#xff0c;首先划分ip地址 有图可见有四个网段需要划分 192.168.1.0/26 192.168.3.0/26 192.168.7.0/26 192.168.5.0/26 给两个骨干网段&#xff0c;给两个环回接口&#xff0c;由下图所示&#xff1a; 其次&#xff0c;规划好ip后在各个接口…

【论文阅读】Relation-Aware Graph Transformer for SQL-to-Text Generation

Relation-Aware Graph Transformer for SQL-to-Text Generation Abstract SQL2Text 是一项将 SQL 查询映射到相应的自然语言问题的任务。之前的工作将 SQL 表示为稀疏图&#xff0c;并利用 graph-to-sequence 模型来生成问题&#xff0c;其中每个节点只能与 k 跳节点通信。由…

YOLOv8-TensorRT C++ ubuntu部署

YOLOv8-TensorRT C ubuntu20.04部署 先要安装好显卡驱动、CUDA、CUDNN 以ubuntu20.04、显卡1650安装470版本的显卡驱动、11.3版本的CUDA及8.2版本的CUDNN为例 下载TensorRT 进入网站&#xff1a; https://developer.nvidia.com/nvidia-tensorrt-8x-download 进行勾选下载…

Java 全栈知识点问题汇总(上)

Java 全栈知识点问题汇总&#xff08;上&#xff09; 1 Java 基础 1.1 语法基础 面向对象特性&#xff1f;a a b 与 a b 的区别3*0.1 0.3 将会返回什么? true 还是 false?能在 Switch 中使用 String 吗?对equals()和hashCode()的理解?final、finalize 和 finally 的不同…

CSS常见元素类型 盒子模型

文章目录 常见元素类型块元素内联元素空元素修改元素类型测试元素类型 盒子模型标准文本流:外边距和内边距测试盒子模型 常见元素类型 块元素 常见块元素: div p h1~h6 ul li img 这些元素结束之后自带换行&#xff0c;一行只能存在一个元素&#xff0c;无法横向排列&#xf…

SpringBoot 项目中后端实现跨域的5种方式!!!

文章目录 SpringBoot 项目中后端实现跨域的5种方式&#xff01;&#xff01;&#xff01;一、为什么会出现跨域问题二、什么是跨域三、非同源限制四、Java后端 实现 CORS 跨域请求的方式1、返回新的 CorsFilter(全局跨域)2、重写 WebMvcConfigurer(全局跨域)3、使用注解 (局部跨…

智慧灌区解决方案:针对典型灌区水利管理需求

​随着国家对农业水利的重视,各地积极推进智慧灌区建设,以实现对水资源的精准调度和科学化管理。下面我们针对典型灌区水利管理需求,推荐智慧灌区解决方案。 一、方案构成智慧水利解决方案- 智慧水利信息化系统-智慧水利平台-智慧水利公司 - 星创智慧水利 一、方案构成 (一)水…

当MySql有字段为null,索引是否会失效

sql执行过程中,使用is null 或者is not null 理论上都会走索引,由于优化器的原因导致索引失效变成全表扫描,或者说是否使用索引和NULL值本身没有直接关系,和执行成本有关系。 数据行记录如何存储NULL值的&#xff1f; InnoDB 提供了 4 种行格式 Redundant:非紧凑格式,5.0 版…

openGauss:准备知识1【IP地址/SSH协议/PuTTY安装和使用】

最近研究在openEuler 22.03 LTS上使用openGauss数据库。如果想要远端访问服务器&#xff0c;那么就先要了解IP地址、SSH协议等内容。 IP代表“Internet Protocol”&#xff0c;是一种网络协议&#xff0c;它定义了计算机在网络上的地址和数据传输方式。简言之&#xff0c;可以…

机器人持续学习基准LIBERO系列6——获取并显示实际深度图

0.前置 机器人持续学习基准LIBERO系列1——基本介绍与安装测试机器人持续学习基准LIBERO系列2——路径与基准基本信息机器人持续学习基准LIBERO系列3——相机画面可视化及单步移动更新机器人持续学习基准LIBERO系列4——robosuite最基本demo机器人持续学习基准LIBERO系列5——…

git 删除 submodule 子模块的步骤

实验有效&#xff0c;这里删除了两个 submodule。 1, 执行删除 submodule mkdir tmp1 && cd tmp1 && git clone --recursive ssh://gitaaa.bbb.ccc.git \ && cd ccc/ && git checkout -b abranch_01 \ && git submodule deinit -f…

内存泄漏检测组件的实现

内存泄漏是在没有自动GC的编程语言里面&#xff0c;经常发生的一些问题。要实现一个内存泄露的检测组件&#xff0c;有两个需求&#xff1a; 能够检测出来内存泄漏能够判断出来哪一个地方的申请没有释放&#xff08;哪一行引起的泄漏&#xff09; 方案1&#xff1a;借助mtrac…