threejs 光影投射-与场景进行交互(六)

效果

场景中有三个立方体,三种颜色.点击变成红色,再点恢复自身原有颜色
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { log } from 'three/examples/jsm/nodes/Nodes.js'//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建场景
const scene = new THREE.Scene()
// 在场景中添加坐标辅助器
const axesHelper = new THREE.AxesHelper(10)//数据表示坐标轴的长度
scene.add(axesHelper)//将坐标轴添加到场景中
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建场景//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建透视相机
const camera = new THREE.PerspectiveCamera(45,//视角,可视范围window.innerWidth / window.innerHeight,//摄像机的宽高比0.1,//摄像机最近能看到的距离1000//摄像机最远能看到的距离
)
// 设置相机的位置
camera.position.x = 8
camera.position.y = 8
camera.position.z = 8
camera.lookAt(0, 0, 0)//摄像机的朝向
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建透视相机//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)//渲染器的尺寸大小
document.body.appendChild(renderer.domElement)//renderer.domElement就是canvas元素
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑创建渲染器//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓添加轨道控制器
// 添加相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true //打开惯性阻尼
controls.dampingFactor = 0.05//阻尼系数
controls.autoRotate = false//是否自动旋转(围绕着lookAt的坐标旋转)
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑添加轨道控制器//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓光影投射
// 创建几个正方体
const cube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: new THREE.Color('pink') }))
cube1.position.set(5, 0, 0)
scene.add(cube1)const cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: new THREE.Color('blue') }))
cube2.position.set(0, 0, 0)
scene.add(cube2)const cube3 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: new THREE.Color('yellowgreen') }))
cube3.position.set(-5, 0, 0)
scene.add(cube3)const raycaster = new THREE.Raycaster()// 创建射线
const mouse = new THREE.Vector2()// 创建鼠标向量
window.addEventListener('click', (e) => {// 这里的公式是一个用来将 clientX 或 clientY 坐标转换为范围从 -1 到 1 的坐标的公式mouse.x = (e.clientX / window.innerWidth) * 2 - 1mouse.y = -((e.clientY / window.innerHeight) * 2 - 1)raycaster.setFromCamera(mouse, camera)// 通过摄像机和鼠标位置更新射线// const intersects = raycaster.intersectObjects(scene.children)// 计算物体和射线的焦点const intersects = raycaster.intersectObjects([cube1, cube2, cube3])// 计算物体和射线的焦点// intersects.length>0表示射线碰到物体if (intersects.length > 0) {if (intersects[0].object.isSelect) {intersects[0].object.material.color.set(intersects[0].object.baseColor)intersects[0].object.isSelect = falsereturn}intersects[0].object.isSelect = trueintersects[0].object.baseColor = intersects[0].object.material.color.getHex()intersects[0].object.material.color.set(0xff0000)}console.log('===================================点击事件开始');console.log(`点击事件相对于window的位置坐标(${e.clientX},${e.clientY})`);console.log(`点击事件转换后的位置坐标(${mouse.x},${mouse.y})`);console.log('获取的物体与射线的焦点信息', intersects);console.log('===================================点击事件结束');
})//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑光影投射//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓渲染
window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight//重置相机的宽高比camera.updateProjectionMatrix()//更新相机的投影矩阵renderer.setSize(window.innerWidth, window.innerHeight)//重置渲染器的宽高比
})function animate() {controls.update()renderer.render(scene, camera)//渲染=相机+场景requestAnimationFrame(animate)//下一帧继续调用渲染函数
}
animate()
//↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑渲染

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

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

相关文章

运算放大器(运放)积分器电路

积分器电路 运算放大器(运放)积分器电路是在图2运放反相放大器的电路上增加一个积分电容构成,该积分电容并联在运算放大器的反馈电阻上,见图1。 运算放大器(运放)反相放大器电路 设计目标 输入fMin输入f0dB输入fMax输出VoMin输出VoMax电源Vcc电源Vee1…

互联网的起源与发展历程:从ARPANET到现代网络社会

ARPANET(1969年): 1969年,ARPANET上线,最初连接了加州大学洛杉矶分校、斯坦福研究所、加州大学圣巴巴拉分校和犹他大学。ARPANET的设计目的是创建一个分布式的网络系统,以确保在部分网络受到攻击时&#xf…

【源码+硬件说明+接线】Arduino-ESP32 http访问播放网络mp3音乐并获取获取远程服务器文件并存SD卡

前言 最近跟浩楠哥接了一个外包,不得不说人总得逼自己一把就可以学到很多东西,这次收获不小,就把一部分困扰我一段时间的部分放出来给大家看看,避免大家踩我相同的坑 1. 硬件准备 1.1 Esp32Wroom 主控使用esp32Wroom,我具备蓝牙,wifi,低功耗蓝牙功能,配合Arduino库作…

Go-知识并发控制mutex

Go-知识并发控制mutex 1. 介绍2. 数据结构2.1 Mutex 结构体2.2 Mutex 方法 3. 加锁解锁过程3.1 简单加锁3.2 加锁被阻塞3.3 简单解锁3.4 解锁并唤醒协程 4. 自旋过程4.1 什么是自旋4.2 自旋条件4.3 自旋的优势4.4 自旋的问题 5. Mutex 模式5.1 Normal 模式5.2 Starving 模式(饥…

Python基础-连接Mysql数据库

一、pymysql pymsql 是 Python 中操作 MySQL 的原生模块,其使用方法和 MySQL 的SQL语句几乎相同 1、下载安装 pip3 install pymysql2、执行SQL 执行 SQL 语句的基本语法: 需要注意的是:创建链接后,都由游标来进行与数据库的操…

[Linux内核驱动]内存动态申请

内核空间内存动态申请 更多详细内容可以查看我的github kmalloc() 函数原型: void *kmalloc(size_t size, gfp_t flags);参数说明: size:要分配的内存块的大小,以字节为单位。flags:分配标志,用于指定内…

挑战与机遇的交织

AI与音乐创作:挑战与机遇的交织 引言 近年来,人工智能技术的迅猛发展使得其在各个领域都展现出了巨大的潜力和影响力,音乐创作领域也不例外。最近上线的音乐大模型,无疑是这一趋势的一个重要节点,它极大地降低了素人…

市场价格到底是因为什么而变动?

在外汇及广泛的金融市场中,影响金融工具价格起伏的因素纷繁复杂。然而,万变不离其宗,无论是哪个市场,价格的最终决定力量始终是供需之间的平衡法则。 对于外汇、大宗商品等金融市场而言,表面上似乎受宏观经济数据、央…

FastBoot刷机获取root权限(Magisk)

1.首先要下载ADB、Fastboot等工具。 1.ADB、Fastboot工具 https://developer.android.com/studio/releases/platform-tools 2.安装FastBoot的USB驱动 https://developer.android.com/studio/run/oem-usb 2.下载对应的镜像 https://developers.google.com/android/images?…

Ubuntu系统配置C/C++编译环境

在Ubuntu系统中安装和学习C语言非常的方便,与Windows复杂的环境配置不同,Ubuntu提供了多种C/C开发工具,如GCC(GNU Compiler Collection)、GDB(GNU Debugger)和Valgrind等。这些工具不仅功能强大…

24.1 部署-交叉编译、压缩二进制文件、Docker容器

1. 交叉编译 Go语言的优越性之一是可在众多环境下运行,其中包括: 操作系统 windows、darwin、plan9、solaris、linux、netbsd/openbsd/freebsd、android体系架构 386/amd64、arm/arm64、ppc64/ppc64le、mips/mipsle/mips64/mips64le 使用go env命令可…

穿越时空的金星奥秘:揭秘古代天文学的惊人成就

在浩瀚的历史长河中,人类对宇宙的探索从未停止。而在中国古代,一项惊人的天文发现,至今仍让世界为之惊叹。那就是西汉时期的《五星占》,一部揭示金星会合周期的珍贵文献,其精确度之高,足以令现代天文学家瞠…

【AI基础】大模型资源整理

开局一张图,全靠硬凑: 硬拼一个雷达图: AI大模型,这是核心智能助手,基于大模型搭建的拿来就用的成熟应用平台应用分享,基于大模型搭建的拿来就用的小应用AI开发,基于大模型开发小应用 学习资源…

基于gunicorn+flask+docker模型高并发部署

好的,今天我们将讨论如何使用 Gunicorn Flask Docker 来实现高并发部署。这个模型是一个流行的组合,用于部署Python编写的Web应用程序,特别是使用Flask框架的应用程序。Gunicorn是一个Python WSGI HTTP服务器,而Docker提供了一个…

容器之分栏窗体构件演示

代码; #include <gtk-2.0/gtk/gtk.h> #include <glib-2.0/glib.h> #include <gtk-2.0/gdk/gdkkeysyms.h> #include <stdio.h>int main(int argc, char *argv[]) {gtk_init(&argc, &argv);GtkWidget *window;window gtk_window_new(GTK_WINDO…

智慧园区解决方案PPT(53页)

## 1.1 智慧园区背景及需求分析 - 智慧园区的发展历程包括园区规划、经济、产业、企业、管理、理念的转变&#xff0c;强调管理模式创新&#xff0c;关注业务综合化、管理智慧化等发展。 ## 1.2 国家对智慧园区发展的政策 - 涉及多个国家部门&#xff0c;如工信部、住建部、…

抖音开放平台代开发小程序,上传模板代码

大家好&#xff0c;我是小悟 抖音小程序第三方平台开发着力于解决抖音生态体系内的小程序管理问题&#xff0c;一套模板&#xff0c;随处部署。能尽可能地减少服务商的开发成本&#xff0c;服务商只用开发一套小程序代码作为模板就可以快速批量的孵化出大量的商家小程序。 第…

Service方法增加@Asyn注解后导致bean无法找到 NoSuchBeanDefinitionException

Service方法增加Asyn注解后导致bean无法找到 NoSuchBeanDefinitionException 场景处理方法原因 场景 首先确认的是Service添加了Service或Component等注解&#xff0c;另外也增加了ComponentScan确定扫描的包路径是包含对应Service的&#xff0c;但就是无法找到这个bean。 通…

开放式耳机怎么选?五款劲爆机型强势PK!2024推荐版!

身为健身达人&#xff0c;我对耳机的要求可不低。开放式耳机让我在健身时既能享受音乐&#xff0c;又能清晰听到教练的指导。它佩戴舒适&#xff0c;不易掉落&#xff0c;而且音质出色&#xff0c;让我沉浸于运动的节奏中。市面上开放式耳机种类繁多&#xff0c;我为大家挑选了…

Omnivore:全能开源稍后阅读神器,让文字爱好者畅享阅读乐趣!

热门开源项目推荐 项目地址&#x1f517;&#x1f517;&#x1f517;&#x1f517; https://gitcode.com/omnivore-app/omnivore/overview Omnivore&#xff1a;全能开源稍后阅读神器 Omnivore App 介绍 Omnivore是一个完整的开源稍后阅读解决方案&#xff0c;专为喜欢文字…