当前位置： 首页 > news >正文

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

news 2026/2/8 14:38:07

        前面一个章节中已经实现在场景中放置一个正方体，并添加灯光使得正方体可见。但是由于是静态的还不能证明是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>

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

相关文章：

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

前面一个章节中已经实现在场景中放置一个正方体&#xff0c;并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的&#xff0c;我们需要添加一些控制器&#xff0c;使得通过鼠标控制正方体可以动起来&#xff0c;实现真正的3D效果&#xff0c;由此引入OrbitControls组件…...

编程日记 2023/10/1 7:24:33

jdk 管理工具比对 jEnv jabba SDKMAN

jEnv、jabba、SDKMAN 这三个 JDK 管理工具进行的比对&#xff1a; jEnv&#xff1a; 地址&#xff1a;https://github.com/jenv/jenv 作者&#xff1a;Gildas Cuisinier 最后更新时间&#xff1a;2021年5月26日 开发语言&#xff1a;Shell Jabba&#xff1a; 地址&#xff1…...

编程日记 2023/10/1 7:23:31

华为云云耀云服务器L实例评测｜部署在线图表和流程图绘制工具drawio

华为云云耀云服务器L实例评测&#xff5c;部署在线图表和流程图绘制工具drawio 一、云耀云服务器L实例介绍1.1 云服务器介绍1.2 优势及其应用场景1.3 支持镜像 二、云耀云服务器L实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 drawio3.1 drawio 介绍3.2 Docker 环…...

编程日记 2023/10/1 7:20:28

elementui引入弹出框报错：this.$alert is not defined 解决方案

1.按需引入文件element.js 注意&#xff1a;引入Message&#xff0c;MessageBox两个组件就行&#xff0c;alert包括在MessageBox里面了。 之前我引入了Alert组件&#xff0c;发现不行 2.在vue的prototype里注册伪名字 3.组件里直接调用就行了 4.实现效果 我发现elementui调用…...

编程日记 2023/10/1 7:19:27

docker的组件和资源管理

Docker是一种开源的容器化平台&#xff0c;它提供了一种轻量级、可移植和可扩展的方式来打包、部署和运行应用程序。Docker的构成包括以下几个关键组件&#xff1a; Docker Engine&#xff1a;Docker Engine是Docker的核心组件&#xff0c;它负责管理容器的生命周期和资源隔离…...

编程日记 2023/10/1 7:15:25

SEO的优化教程（百度SEO的介绍和优化）

百度SEO关键字介绍&#xff1a; 百度SEO关键字是指用户在搜索引擎上输入的词语&#xff0c;是搜索引擎了解网站内容和相关性的重要因素。百度SEO关键字可以分为短尾词、中尾词和长尾词&#xff0c;其中长尾词更具有针对性和精准性&#xff0c;更易于获得高质量的流量。蘑菇号-…...

编程日记 2023/10/1 7:14:24

Tomcat以及UDP

一、Tomcat 服务端 自定义 S Tomcat服务器 S &#xff1a;Java后台开发 客户端 自定义 C 浏览器 B 认识一些常用的目录&#xff1a; bin&#xff1a;存放开始和结束的程序 conf&#xff1a;配置文件 lib&#xff1a;组成包 logs&#xff1a;输出日志 webapps&#x…...

编程日记 2023/10/1 7:12:22

NLP 04(GRU)

一、GRU GRU (Gated Recurrent Unit)也称门控循环单元结构,它也是传统RNN的变体,同LSTM一样能够有效捕捉长序列之间的语义关联&#xff0c; 缓解梯度消失或爆炸现象&#xff0c;同时它的结构和计算要比LSTM更简单,它的核心结构可以分为两个部分去解析: 更新门、重置门 GRU的内…...

编程日记 2023/10/1 7:11:21

BUUCTF reverse wp 51 - 55

findKey shift f12 找到一个flag{}字符串, 定位到关键函数, F5无效, 大概率是有花指令, 读一下汇编 这里连续push两个byte_428C54很奇怪, nop掉下面那个, 再往上找到函数入口, p设置函数入口, 再F5 LRESULT __stdcall sub_401640(HWND hWndParent, UINT Msg, WPARAM wPara…...

编程日记 2023/10/1 7:10:20

WebGL笔记：使用鼠标绘制多个线条应用及绘制动感线性星座

使用鼠标绘制多个线条 多个线条&#xff0c;肯定不是一笔画过的&#xff0c;而是多次画的线条既然是多线&#xff0c;那就需要有个容器来管理它们 1 &#xff09;建立容器对象 建立一个 lineBox 对象&#xff0c;作为承载多边形的容器 // lineBox.js export default class …...

编程日记 2023/10/1 7:06:16

nodejs+vue 汽车销售系统elementui

第三章 系统分析 10 3.1需求分析 10 3.2可行性分析 10 3.2.1技术可行性&#xff1a;技术背景 10 3.2.2经济可行性 11 3.2.3操作可行性&#xff1a; 11 3.3性能分析 11 3.4系统操作流程 12 3.4.1管理员登录流程 12 3.4.2信息添加流程 12 3.4.3信息删除流程 13 第四章 系统设计与…...

编程日记 2023/10/1 7:03:14

leetcode76 Minimum Window Substring

给定两个字符串s和t&#xff0c; 找到s的一个子串&#xff0c;使得t的每个字符都出现在子串中&#xff0c;求最短的子串 由于要每个字符出现&#xff0c;所以顺序其实没有关系 因此我们可以定义一个map&#xff0c;统计t中字符出现次数 然后在s中慢慢挪动滑动窗口&#xff0c;…...

编程日记 2023/10/1 7:02:13

简单工厂模式~

我们以生产手机作为应用场景展开讲解&#xff01; 手机是一个抽象的概念&#xff0c;它包含很多的品牌&#xff0c;例如华为&#xff0c;苹果&#xff0c;小米等等&#xff0c;因此我们可将其抽象为一个接口&#xff0c;如下所示&#xff1a; public interface tel {void pro…...

编程日记 2023/10/1 7:01:11

基于Java的会员管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09;有保障的售后福利 代码参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...

编程日记 2023/10/1 7:00:11

数据结构 图 并查集 遍历方法 最短路径算法 最小生成树算法 简易代码实现

文章目录 前言并查集图遍历方法广度优先遍历深度优先遍历 最小生成树算法Kruskal算法Prim算法 最短路径算法Dijkstra算法BellmanFord算法FloydWarshall算法 全部代码链接 前言 图是真的难&#xff0c;即使这些我都学过一遍&#xff0c;再看还是要顺一下过程&#xff1b;说明方…...

编程日记 2023/10/1 6:59:10

idea Springboot 教师标识管理系统开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 springboot 教师标识管理系统是一套完善的信息系统&#xff0c;结合springboot框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用springboot框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统 具有完整的源代码和数据库&…...

编程日记 2023/10/1 6:58:08

2023-9-30 JZ36 二叉搜索树与双向链表

题目链接&#xff1a;二叉搜索树与双向链表 import java.util.*; /** public class TreeNode {int val 0;TreeNode left null;TreeNode right null;public TreeNode(int val) {this.val val;}} */ public class Solution {TreeNode pre null;public TreeNode Convert(Tree…...

编程日记 2023/10/1 6:57:08

在windows的ubuntu LTS中安装及使用EZ-InSAR进行InSAR数据处理

EZ-InSAR&#xff08;曾被称为MIESAR&#xff0c;即Matlab界面用于易于使用的合成孔径雷达干涉测量&#xff09;是一个用MATLAB编写的工具箱&#xff0c;用于通过易于使用的图形用户界面&#xff08;GUI&#xff09;进行干涉合成孔径雷达&#xff08;InSAR&#xff09;数据处理…...

编程日记 2023/10/1 6:56:06

腾讯mini项目-【指标监控服务重构】2023-08-25

今日已办 traefik proxy jaeger Prometheus prometheus | Prometheus 配置完依然无法实现 web-url的前缀访问【待解决】 Set span storage type : elasticsearch services:elasticsearch:image: elasticsearch:7.17.12container_name: elasticsearchnetworks:- backend # …...

编程日记 2023/10/1 6:55:05

数据挖掘（1）概述

一、数据仓库和数据挖掘概述 1.1 数据仓库的产生 数据仓库与数据挖掘&#xff1a; 数据仓库和联机分析处理技术(存储)。数据挖掘&#xff1a;在大量的数据中心挖掘感兴趣的知识、规则、规律、模式、约束(分析)。数据仓库用于决策分析&#xff1a; 数据仓库&#xff1a;是在数…...

编程日记 2023/10/1 6:52:02

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2026/2/7 9:13:45

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...

编程新知 2025/10/31 21:11:39

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

Ubuntu Cursor升级成v1.0

0. 当前版本低 使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开&#xff0c;快捷键也不好用&#xff0c;当看到 Cursor 升级后&#xff0c;还是蛮高兴的 1. 下载 Cursor 下载地址&#xff1a;https://www.cursor.com/cn/downloads 点击下载 Linux (x64) &#xff0c;…...

编程新知 2026/2/4 16:04:11

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2026/1/23 11:47:13

【Ftrace 专栏】Ftrace 参考博文

ftrace、perf、bcc、bpftrace、ply、simple_perf的使用Ftrace 基本用法Linux 利用 ftrace 分析内核调用如何利用ftrace精确跟踪特定进程调度信息使用 ftrace 进行追踪延迟Linux-培训笔记-ftracehttps://www.kernel.org/doc/html/v4.18/trace/events.htmlhttps://blog.csdn.net/…...

编程新知 2026/1/20 3:30:27

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类，这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前，需要明确协议的具体格式。例如，一个简单的…...

编程新知 2026/2/7 9:05:47