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

threejs简单创建一个几何体(一)

1.下包引入

//下包
npm install three
yarn add three//引入
import * as THREE from 'three'

在这里插入图片描述

2.创建场景,摄像机

	  // 1.创建场景const scene = new THREE.Scene()// 2.创建摄像机//第一个参数是视角,一般在60-90之间,第二个参数是场景的尺寸,一般取显示器的宽高,第三个参数是开始位置,第四个参数是结束位置const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)// 设置摄像机z轴的空间的位置camera.position.z = 3

3.创建渲染器

 	  // 3.创建渲染器const renderer = new THREE.WebGLRenderer()// 设置渲染器场景的大小renderer.setSize(window.innerWidth, window.innerHeight)// 把渲染器添加到页面中去document.body.appendChild(renderer.domElement)

4.创建几何模型,网格对象

这样创建的几何模型是纯色的方块,效果如上图

	  // 4.创建几何模型const box = new THREE.BoxGeometry(1, 1, 1)// 设置几何体的材质(纯色)const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 创建网格对象const cube = new THREE.Mesh(box, material)// 将网格对象添加到场景中去scene.add(cube)

添加贴图(皮肤)

import logo from '@/assets/dz.png'// 4.创建几何模型const box = new THREE.BoxGeometry(1, 1, 1)// 设置几何体皮肤(贴图)const texture = new THREE.TextureLoader().load(logo)const material = new THREE.MeshBasicMaterial({ map: texture })// 创建网格对象const cube = new THREE.Mesh(box, material)// 将网格对象添加到场景中去scene.add(cube)

在这里插入图片描述

5.场景渲染

这一步将前面的设置全部加入到画布中

	  // 5.场景渲染function animate () {requestAnimationFrame(animate)// 给网格对象添加动画cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)}animate()

6.响应式布局

拖动网页,刷新后画布尺寸发生变化,再次拖动窗口,会出现空白
在这里插入图片描述

 window.addEventListener('resize', () => {// 初始化相机camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)})

7.完整代码

<template><div class="container"></div>
</template>
<script>
import * as THREE from 'three'
import logo from '@/assets/dz.png'
export default {data () {return {}},mounted () {this.init()},methods: {init () {// 1.创建场景const scene = new THREE.Scene()// 2.创建摄像机const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)// 设置摄像机z轴的空间的位置camera.position.z = 4// 3.创建渲染器const renderer = new THREE.WebGLRenderer()// 设置渲染器场景的大小renderer.setSize(window.innerWidth, window.innerHeight)// 把渲染器添加到页面中去document.querySelector('.body').appendChild(renderer.domElement)// document.body.appendChild(renderer.domElement)// 4.创建几何模型const box = new THREE.BoxGeometry(1, 1, 1)// 设置几何体皮肤(贴图)const texture = new THREE.TextureLoader().load(logo)const material = new THREE.MeshBasicMaterial({ map: texture })// 设置几何体的材质(纯色)// const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 创建网格对象const cube = new THREE.Mesh(box, material)// 将网格对象添加到场景中去scene.add(cube)// 5.场景渲染function animate () {requestAnimationFrame(animate)// 给网格对象添加动画cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)}animate()// 响应式布局window.addEventListener('resize', () => {// 初始化相机camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)})}}
}
</script>
<style lang='scss'  scoped></style>

相关文章:

threejs简单创建一个几何体(一)

1.下包引入 //下包 npm install three yarn add three//引入 import * as THREE from three2.创建场景,摄像机 // 1.创建场景const scene new THREE.Scene()// 2.创建摄像机//第一个参数是视角,一般在60-90之间,第二个参数是场景的尺寸,一般取显示器的宽高,第三个参数是开始位…...

msfconsole数据库连接不了的问题【已解决】

msfconsole数据库连接 1.msf数据库端口 msf使用的是postgresql&#xff0c;这个数据库默认端口是5432 单个模块的使用可以不需要数据库&#xff0c;但是模块与模块之间需要沟通的时候就会用到数据库。 2.查看msf数据库连接状态 db_status #msf内部查看systemctl status p…...

7. Linux进程环境

进程是操作系统运行程序的一个实例,也是操作系统分配资源的单位。在Linux环境中,每个进程都有独立的进程空间,以便对不同的进程进行隔离,使之不会互相影响。深入理解Linux下的进程环境, 可以帮助我们写出更健壮的代码。 在 Linux 中,进程是程序的一次执行过程,它包含了程…...

[linux] 静态图和动态图

动态图&#xff08;Dynamic Graphs&#xff09;和静态图&#xff08;Static Graphs&#xff09;通常用来描述深度学习框架中模型的构建方式。 静态图&#xff08;Static Graphs&#xff09; 静态图是指模型的计算图在运行前就被定义好并且编译优化的方式。也就是说&#xff0c…...

1.Spring核心功能梳理

概述 本篇旨在整体的梳理一下Spring的核心功能,让我们对Spring的整体印象更加具体深刻,为接下来的Spring学习打下基础。 本片主体内容如下: Bean的生命周期依赖注入的实现Bean初始化原理推断构造方法原理AOP的实现这里要说明一下,我们这里说到的Spring,一般指的是Spring F…...

活动预告:如何培养高质量应用型医学人才?

在大数据时代与“新医科”建设的背景下&#xff0c;掌握先进的医学数据处理技术成为了医学研究与应用的重要技能。 为了更好地培养社会所需要的高质量应用型医学人才&#xff0c;许多高校已经在广泛地开展面向医学生的医学数据分析教学工作。 在“课-训-赛”育人才系列活动的…...

蓝桥杯算法错题记录-基础篇

文章目录 本文还在跟新&#xff0c;最新跟新时间3/11&#xff01;&#xff01;&#xff01; 格式一定要符合要求&#xff0c;&#xff08;输入&#xff0c;输出格式&#xff09;1. nextInt () next() nextLine() 的注意事项2 .数的幂 a^2等3.得到最大长度&#xff08;最大...&a…...

Java知识点之单例模式

1、单例模式&#xff08;Binary Search&#xff09; 单例模式确保某个类只有一个实例&#xff0c;而且自行实例化并向整个系统提供这个实例。在计算机系统中&#xff0c;线程池、缓存、日志对象、对话框、打印机、显卡的驱动程序对象常被设计成单例。这些应用都或多或少具有资…...

Flutter第三弹:常用的Widget

目标&#xff1a; 1&#xff09;常用的Widget有哪些&#xff1f;有什么特征&#xff1f; 2&#xff09;开发一个简单的登录页面。 一、Flutter常用Widget 对于Flutter来说&#xff0c;一切皆Widget. 常用的Widget&#xff0c;包括一些基础功能的Widget. 控件名称功能备注…...

Dynamic Wallpaper v17.4 mac版 动态视频壁纸 兼容 M1/M2

Dynamic Wallpaper Engine 是一款适用于 Mac 电脑的视频动态壁纸&#xff0c; 告别单调的静态壁纸&#xff0c;拥抱活泼的动态壁纸。内置在线视频素材库&#xff0c;一键下载应用&#xff0c;也可导入本地视频&#xff0c;同时可以将视频设置为您的电脑屏保。 应用介绍 Dynam…...

Windows / Mac应用程序在Linux系统中的兼容性问题 解决方案

Linux系统可以通过多种方式提高与Windows或Mac应用程序的兼容性。这里有一些解决方案 Windows应用程序兼容性解决方案&#xff1a; Wine Wine是一个允许Linux和Unix系统上运行Windows应用程序的兼容层。 它不是模拟器&#xff0c;而是实现了Windows API的开源实现。 许多W…...

Net Core 使用Mongodb操作文件(上传,下载)

Net Core 使用Mongodb操作文件&#xff08;上传&#xff0c;下载&#xff09; 1.Mongodb GridFS 文件操作帮助类。 GridFS 介绍 https://baike.baidu.com/item/GridFS/6342715?fraladdin DLL源码&#xff1a;https://gitee.com/chenjianhua1985/mongodb-client-encapsulati…...

适用于系统版本:CentOS 6/7/8的基线安全检测脚本

#!/bin/bash #适用于系统版本&#xff1a;CentOS 6/7/8 echo "----------------检测是否符合密码复杂度要求----------------" #把minlen&#xff08;密码最小长度&#xff09;设置为8-32位&#xff0c;把minclass&#xff08;至少包含小写字母、大写字母、数字、特殊…...

Seata源码流程图

1.第一阶段分支事务的注册 流程图地址&#xff1a;https://www.processon.com/view/link/6108de4be401fd6714ba761d 2.第一阶段开启全局事务 流程图地址&#xff1a;https://www.processon.com/view/link/6108de13e0b34d3e35b8e4ef 3.第二阶段全局事务的提交 流程图地址…...

英飞凌电源管理PMIC的安全应用

摘要 本篇文档主要用来介绍英飞凌电源管理芯片TLF35584的使用&#xff0c;基于电动助力转向应用来介绍。包含一些安全机制的执行。 TLF35584介绍 TLF35584是英飞凌推出的针对车辆安全应用的电源管理芯片&#xff0c;符合ASIL D安全等级要求&#xff0c;具有高效多电源输出通道&…...

快速在Linux系统安装MySQL

虚拟机使用docker安装MySQL 使用docker拉去镜像 查看mysql的镜像 docker search mysql拉去mysql镜像 docker pull mysql查看下载的镜像 docker images启动容器 docker start mysql进入MySQL容器 docker exec -it mysql /bin/bash登录mysql mysql -u root -p检查是否进入…...

数据库相关理论知识(有目录便于直接锁定相关知识点+期末复习)

一&#xff0c;数据模型&#xff0c;关系型数据模型&#xff0c;网状模型&#xff0c;层次模型 1.数据库模型是用来描述和表示现实世界中的事物、概念以及它们之间的关系的工具&#xff0c;但是并不是越专业越好&#xff0c;还要平衡它的模型的复杂性、通用性和成本效益等因素…...

NCC环境配置

一、后端配置 1.安装eclipse汉化插件 2.安装svn插件...

用python实现Dubins曲线生成

Dubins曲线是连接两个具有指定方向和位置的点的最短路径&#xff0c;其中路径受到固定曲率约束&#xff08;如车辆的转向限制&#xff09;。Dubins曲线常用于机器人路径规划、车辆轨迹规划等领域。 Dubins曲线可以分为三种类型&#xff1a;CCC (Curve-Curve-Curve), CCL (Curv…...

智能技术上的“是”并不代表具体领域的“应该”

技术上的“是”并不代表具体领域的“应该” 。技术上的“是”仅仅是指某种方法或技术在实践中是否可行或有效&#xff0c;而不涉及是否该采取这种方法或技术。决定是否采取某种方法或技术还需要考虑伦理、法律、可行性等其他方面的因素。技术的发展可能会有各种可能性&#xff…...

业务系统对接大模型的基础方案:架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

Java入门学习详细版(一)

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...