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>

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

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

相关文章

SQLiteC/C++接口详细介绍之sqlite3类(六)

快速前往文章列表&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;五&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;七&#xff09; 19. sqlite3_changes与sqlite3_changes64 是SQLite中用…

【兆易创新GD32H759I-EVAL开发板】认识主芯片架构

GD32H759I是高性能的微控制器&#xff0c;采用ARM Cortex-M7处理器&#xff0c;是GD32微控制器系列的一部分。它专为各种应用设计&#xff0c;注重于提高处理能力、降低功耗&#xff0c;并配备全面的外设集合。以下是对其特性、架构以及潜在应用场景的详细介绍&#xff1a; **…

如何利用POI导出报表

一、报表格式 二、依赖坐标 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.16</version> </dependency> <dependency><groupId>org.apache.poi</groupId><art…

Linux中使用vim编辑器的时候提示:发现交换文件“XXX.swap“

目录 问题描述解决方案 问题描述 有时候vim编辑文件的时候 系统突然卡了 无奈只能强制退出关机 然后重启 这个时候想重新回来继续编辑刚刚的文件 注意:我这种操作方式 虽然之后可以继续正常编辑了 但是发现文件是没有保存的 vim XXX进去有如下提示 解决方案 注意:我这种操作…

springboot273基于JavaWeb的宠物商城网站设计与实现

宠物商城网站的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;商品信息因为其管理内容繁杂&#xff0c;管理数量繁多导…

C++:vector类

vector的介绍及使用 1. vector 是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c; vector 也采用的连续存储空间来存储元素。也就是意味着可以采用下标对 vector 的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改变的…

漏洞挖掘 | 任意密码重置 + 存储型XSS

还是老样子&#xff0c;打开谷歌镜像&#xff0c;搜索site:edu.cn指定域名&#xff0c;搭配关键字登陆&#xff0c;注册&#xff0c;忘记密码&#xff0c;等等&#xff0c;或者xxx系统比较容易挖出通杀。 逻辑漏洞挖掘思路 1.登陆 登陆处一般会出现 无验证码可爆破 验证码登陆…

【新手】在idea中配置tomcat服务器,并部署一个项目

目录 第一步&#xff1a;新建java项目第二步&#xff1a;新建完成后&#xff0c;按照步骤选择添加框架支持第三步&#xff1a;点击添加配置第四步&#xff1a;在web文件包下创建一个新的jsp第五步&#xff1a;在新建的jsp里编写java或者html 前言&#xff1a;本章学习的是在ide…

maven项目引入私有jar,并打包到java.jar中

私有jar存放位置 maven依赖 <dependency><groupId>com.hikvision.ga</groupId><artifactId>artemis-http-client</artifactId><version>1.1.10</version><scope>system</scope><systemPath>${project.basedir}/s…

代码随想录day19(2)二叉树:二叉树的最大深度(leetcode104)

题目要求&#xff1a;求出二叉树的最大深度 思路&#xff1a;首先要区分二叉树的高度与深度。二叉树的高度是任一结点到叶子结点的距离&#xff0c;而二叉树的深度指的是任一节点到根节点的距离&#xff08;从1开始&#xff09;。所以求高度使用后序遍历&#xff08;从下往上&…

v-model 粗略解析

v-model 粗略解析 v-model是什么&#xff1f; 双向数据绑定&#xff0c;可以从data流向页面&#xff0c;也可以从页面流向data通常用于表单收集&#xff0c;v-model 默认绑定 value 值书写形式&#xff1a; v-model:value"" 或 v-model v-model原理是什么&#xf…

蓝色经典免费wordpress模板主题

蓝色经典配色的免费wordpress建站主题&#xff0c;万能的wordpress建站主题。 https://www.wpniu.com/themes/24.html