ThreeJs的场景实现鼠标拖动旋转控制

        前面一个章节中已经实现在场景中放置一个正方体,并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的,我们需要添加一些控制器,使得通过鼠标控制正方体可以动起来,实现真正的3D效果,由此引入OrbitControls组件,他实质是改变相机的位置,实现从不同角度看场景中的物体。下面源码中已经将控制的部分加入了,在最下方,注释也写的很详细了。OrbitControls组件如果找不到在线引用的可以到我的csdn中下载

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--引入three.js,这是使用three必须的js文件,此处引入的是外网提供的three文件,如果引入有问题可以到官网下载three文件后引入本地的theee.js文件--><script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script><script src="three/OrbitControls.js"></script>
</head><body>
<script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 相机设置*///窗口宽度var width = window.innerWidth;//窗口高度var height = window.innerHeight;//窗口宽高比var k = width / height;//三维场景显示范围控制系数,系数越大,显示的范围越大var s = 200;//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);//设置相机位置camera.position.set(200, 300, 200);//设置相机方向(指向的场景对象)camera.lookAt(scene.position);/*** 光源设置*///新建点光源(常用光源分为点光源和环境光,点光源的效果类似灯泡,环境光的效果类似白天的太阳光)var point = new THREE.PointLight(0xffffff);//设置点光源的位置point.position.set(400, 200, 300);//将点光源添加到场景中scene.add(point);/*** 创建网格模型,也就是3D模型*///创建一个立方体几何对象Geometryvar geometry = new THREE.BoxGeometry(100, 100, 100);//给几何体创建材质,这里是改为蓝色,材质对象Materialvar material = new THREE.MeshLambertMaterial({color: 0x0000ff});//网格模型对象Meshvar mesh = new THREE.Mesh(geometry, material);//网格模型添加到场景中,每个模型最终都要添加到场景中才会被渲染scene.add(mesh);/*** 创建渲染器对象*///创建渲染器对象(渲染要等所有东西都加进去再渲染场景,创建和3D模型和光源没有先后顺序)var renderer = new THREE.WebGLRenderer();//设置渲染区域尺寸(设置的是整个屏幕的长度和宽度renderer.setSize(width, height);//设置渲染的背景色renderer.setClearColor(0xb9d3ff, 1);//body元素中插入canvas对象,也可以在页面中添加div,并加上id,通过id指定在某个div中渲染document.body.appendChild(renderer.domElement);//执行渲染操作   指定场景、相机作为参数renderer.render(scene, camera);//创建鼠标控制器    let controls = new THREE.OrbitControls(camera, renderer.domElement );//监听控制器,每次拖动后重新渲染画面controls.addEventListener('change', function () {renderer.render(scene, camera); //执行渲染操作});</script>
</body>
</html>

如果有问题,可以在我的评论区留言

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python15题day13

③continue的好处 break是跳出循环体&#xff0c;continue是跳过continue语句后面的代码块&#xff0c;循环并不停止 题目要求: 使用input函数接受用户的输入&#xff0c;如果用户输入的数值小于等于10&#xff0c;则判断是奇数还是偶数如果数值大于10&#xff0c;则输出“输入…

Flask扩展:简化开发的利器以及26个日常高效开发的第三方模块(库/插件)清单和特点总结

目录 寻找扩展 使用扩展 创建扩展 26个常用的Flask扩展模块 总结 原文&#xff1a;Flask扩展&#xff1a;简化开发的利器以及26个日常高效开发的第三方模块&#xff08;库/插件&#xff09;清单和特点总结 (qq.com) Flask是一个轻量级的Python Web框架&#xff0c;它提供…

【计算机网络】互联网公司的网络架构和业务场景

互联网公司的网络架构和业务场景 1. 互联网公司网络的组成1.1 网络的物理组成1.2 骨干网组成1.3 数据中心网络组成 2.互联网公司网络服务场景2.1 通用服务场景2.1.1 客户端到服务端请求真实网络过程2.1.2 客户端到服务端请求抽象网络过程2.1.3 负载均衡网络模型 2.2 边缘服务场…

python学习之路

python 初识python下载python安装python安装成功 idea中配置python环境并运行我的idea是2022版和上一个有点区别VSCode搭建Python开发环境(含Python环境搭建) 学习python 初识python 当我了解python时我决定试一试 首先了解一下什么是python,推荐廖雪峰老师的官网 python简介 …

C语言连接MySQL并执行SQL语句(hello world)

1.新建一个控制台项目 参考【VS2022 和 VS2010 C语言控制台输出 Hello World】VS2022 和 VS2010 C语言控制台输出 Hello World_vs2022源文件在哪_西晋的no1的博客-CSDN博客 2.安装MySQL 参考【MySQL 8.0.34安装教程】MySQL 8.0.34安装教程_西晋的no1的博客-CSDN博客 3.复制MySQ…

sentinel-dashboard-1.8.0.jar开机自启动脚本

启动阿里巴巴的流控组件控制面板需要运行一个jar包&#xff0c;通常需要运行如下命令&#xff1a; java -server -Xms4G -Xmx4G -Dserver.port8080 -Dcsp.sentinel.dashboard.server127.0.0.1:8080 -Dproject.namesentinel-dashboard -jar sentinel-dashboard-1.8.0.jar &…

计算机视觉 回头重新理解图像中的矩

一、人类的欲望 图像中的矩是一个十分古老的话题,这个东西的出现始于人类的欲望,想要找到一种自动且强大的图像分析方法。 比如我们要在图像中识别某一个物体,而这个物体在不同的成像条件下,表现出的高矮胖瘦方向位置颜色都不可能完全一致,这就为识别带来了巨大的困难,但…

m4a怎么转换mp3?4个方法包教包会

m4a怎么转换mp3&#xff1f;M4A是一种备受欢迎的音频文件格式&#xff0c;通常用于存储高保真音频数据。它代表着“MPEG-4 Audio”扩展名&#xff0c;这意味着它属于基于MPEG-4标准的音频格式之一。M4A格式有着众多的优势。首先&#xff0c;它能够提供出色的音质&#xff0c;并…

Sui主网升级至V1.10.1版本

升级要点 Sui协议版本升至&#xff1a;25 #13822 使用由仪式生成的验证密钥来验证zklogin交易中的证明&#xff0c;升级协议版本至25&#xff0c;启用JWK共识和3个OAuth提供商的zklogin标志。 #13422 在构建具有这些元素的Move代码时&#xff0c;可能会出现关于未使用常量…

中药材商城小程序的作用是什么

古往今来中药材的作用非常大&#xff0c;无论中医院还是相关药材作坊都会有大量人购买&#xff0c;随着互联网电商拓展更多商品类目&#xff0c;中药材也可以通过线上销售&#xff0c;让消费者随时购买到所需商品&#xff0c;商家也能获得更多生意。 那么通过【雨科】平台搭建中…

Python大数据之Python进阶(一)介绍

课程介绍 数据埋点本质上就是进行数据采集&#xff0c;数据埋点是对自身业务数据进行采集。要进行数据埋点就要了解我们的业务程序的开发流程&#xff0c;知道整个数据的传递过程&#xff0c;这样能让我们更加明确数据分析的业务需求&#xff0c;有利于数据埋点的准确性。 在…

QT基础入门——认识与创建QT(一)

前言&#xff1a; 前面学了Linux的基础命令、系统编程、网络编程&#xff0c;对LInux的使用也有了一个简单的了解与认识&#xff0c;之后的学习就要用到 imx6ull_pro这款开发板进行学习了&#xff0c;所以在使用前还是决定把QT的基础知识学习一下&#xff0c;好在后面的linu…

ssl证书申请

申请SSL证书其实没有那么复杂&#xff0c;给大家总结了一下&#xff0c; 就是提交一下域名配合解析就可以申请。 一、申请准备&#xff1a; 1、域名&#xff08;域名一般主域名或者子域名为主&#xff0c;比如&#xff1a;baidu.com或者bbs.baidu.com&#xff09; 2、邮箱&a…

C++ 运算符

在本文中&#xff0c;我们将借助示例学习C 中不同类型的运算符。 在编程中&#xff0c;运算符是对值或变量进行运算的符号。例如&#xff0c;是用于加法的运算符&#xff0c;而 - 是用于减法的运算符。 C 中的运算符可以分为六种类型&#xff1a; 算术运算符 赋值运算符 关系…

leetCode 198.打家劫舍 动态规划

198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#…

Jmeter+Ant+Git+Jenkins持续集成介绍

【软件测试面试突击班】如何逼自己一周刷完软件测试八股文教程&#xff0c;刷完面试就稳了&#xff0c;你也可以当高薪软件测试工程师&#xff08;自动化测试&#xff09; 一 简介 1.什么是ant? ant是构建工具 2.什么是构建 概念到处可查到&#xff0c;形象来说&#xff…

【小余送书第一期】《数据要素安全流通》参与活动,即有机会中奖哦!!

目录 1、背景介绍 2、本书编撰背景 3、本书亮点 4、本书主要内容 5、活动须知 1、背景介绍 随着大数据、云计算、人工智能等新兴技术的迅猛发展&#xff0c;数据已经成为我国经济社会发展的五大生产要素之一&#xff0c;《网络安全法》《个人信息保护法》《数据安全法》的…

datart:Invalid database configuration. Datart is running in demo mode

datart在IDEA配置好数据库连接之后&#xff0c;启动&#xff0c;报错&#xff1a; 【********* Invalid database configuration. Datart is running in demo mode *********】 原因是缺少一个变量 config 增加即可&#xff1a; 再次启动&#xff0c;就不会报无效数据库配置了…

【操作系统】调度算法的评价指标和三种调度算法

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaEE 操作系统 Redis 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 操作系统 一、调度算法的评价指标1.1 CPU利…

从小白到精通,十九项案例实践丨全流程HEC-RAS 1D/2D水动力与水环境模拟

水动力与水环境模型的数值模拟是实现水资源规划、环境影响分析、防洪规划以及未来气候变化下预测和分析的主要手段。然而&#xff0c;一方面水动力和水环境模型的使用非常复杂&#xff0c;理论繁复&#xff1b;另一方面&#xff0c;免费的水动力和水环境软件往往缺少重要功能&a…