《vue 实践之 three.js 学习》

news2024/12/23 23:02:49

目录

  • three.js 学习
    • 包安装
    • 导包
    • 基础API学习
    • Three.js 三要素
      • 【图文展示】
    • 透视相机
    • three.js 渲染器 之 WebGLRenderer
      • WebGLRenderer 实例化


three.js 学习

个人博客地址:

图片


包安装

"three": "^0.153.0"

命令:npm install --save three

–save (项目依赖包) --save-dev (项目开发依赖包)

导包

import * as THREE from ‘three’

as 取别名

基础API学习

THREE: {
	Scene() {},
	PerspectiveCamera() {},
	WebGLRenderer() {},
	BoxGeometry() {},
}

Three.js 三要素

场景(scene)、相机(camera)、渲染器(renderer)

[备注:这里使用的THREE 是作者自己代码命名的一个变量名称,你们也可以命名 Three 等其他语义化名称]
1. 创建场景:THREE.Scene()
2. 创建透视相机:THREE.PerspectiveCamera()
3. 创建渲染器:THREE.WebGLRenderer()

【图文展示】

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

透视相机

为渲染器提供可渲染的范围

1. 实例化:
	const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) // 创建透视相机

three.js 渲染器 之 WebGLRenderer

1. 简介:WebGLRenderer 渲染器,three.js 最常用的渲染器之一
2. 主要作用:将一个三维场景渲染成一个二维图片显示在canvas画布上

WebGLRenderer: {
	setSize() {},
	
}

WebGLRenderer 实例化

1. new WebGLRenderer(obj)  // obj - 对象类型,作为渲染器的行为配置,如果没有传,则使用的是默认值

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

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

相关文章

模板初阶(C++)

目录 泛型编程 引入 模板 函数模板 函数模板的概念 函数模板格式 函数模板的原理 函数模板的实例化 隐式实例化 显式实例化 模板参数的匹配原则 类模板 类模板的定义格式 类模板的实例化 泛型编程 引入 我们在实际编写代码中,经常会遇到不同的类型需要实现同一种功…

使用纯C#语言实现4K图像平移显示性能的潜能测试

在介绍“熊猫视图.Net图形控件”系列文章中, 【“熊猫视图.Net图形控件”介绍链接】https://blog.csdn.net/mosangbike/article/details/126026801有对显示图像文件的测试结果,当时测试的不太严谨。今天抽时间详细测试了一下。 从网上找了一张Jpg图像作…

windows下安装配置 elasticsearch | kibana | analysis-ik

简介 elasticsearch是一款非常强大的开源搜索引擎,支持Restful风格,可以帮助我们从海量的数据中快速找到用户所需要的内容。是当前最流的开源企业级搜索引擎,能够达到近实时搜索、稳定、可靠、快速、安装使用方便。 elasticsearch结合kibana、…

wireshark使用-(2)运行时自动分包

现如今的网络通信分析基本都逃不开wireshark这个工具,而运行长时间的网络包往往过大,我们只想关注指定时间段的网络包,所以分包就显得尤为重要,好在wireshark工具自带这个功能,方便运行时能自动按时间,按大…

05.JavaWeb-Servlet(上)

目录 1.Servlet基础 1.1 Servlet概述 1.2 Servlet开发入门 1.2.1 Servlet接口及实现类 1.2.2实现Servlet程序 2.Servlet的请求与响应 2.1HttpServletRequest 2.1.1获取请求参数(常用) 2.1.2 获取请求方法 2.1.3获取与请求关联的会话对象 2.1.…

Vue总结

这里写自定义目录标题 一、Vue基本结介绍1、Vue 项目示例2、Vue 开发工具3、HTML 基本结构4、HTML 常用标签二、vue常用指令1、v-model 双向绑定a、v-model 修饰符2、插值3、条件渲染1、v-if 和 v-show 区别4、v-on 简介5、属性绑定6、 v-for 简介三、vue环境安装1、Vue 脚手架…

node基础与fs模块学习笔记

了解Node.js与内置模块 什么是Node.js? Node.js is an open-source, cross-platform JavaScript runtime environment. node.js是一个开源跨平台的js运行环境。 前端的运行环境就是浏览器。 注意:Node.js中无法调用DOM和BOM等浏览器内置API。 Node.js中的顶级对象…

【大数据工具】Zookeeper 分布式集群和伪分布式安装

Zookeeper 安装 zookeeper 安装包下载地址:https://archive.apache.org/dist/zookeeper/ 1. 伪分布式部署 说明:伪分布即在一台服务器上通过不同端口模拟出分布式集群的效果,分布式一般 3 台起,一主两从。 说明:伪…

华为OD机试真题 Java 实现【斗地主之顺子】【2023 B卷 100分】,附详细解题思路

一、题目描述 在斗地主扑克牌游戏中,扑克牌由小到大的顺序为: 3.4.5.6.7.8.9.10.J.Q.K A.2,玩家可以出的扑克牌阵型有: 单张、对子、顺子、飞机、炸弹等。 其中顺子的出牌规则为: 由至少 5 张由小到大连续递增的扑克牌组成,且不能包含 2。 …

RK1126 NPU yolov5 6.2

基于 rk npu , 实现 yolov5 6.2 模型推理 实现过程 ⚡️​ 编译 opencv 需根据自己路径修改. cmake -D CMAKE_BUILD_TYPERELEASE \-D CMAKE_C_COMPILER./gcc-arm-8.3-2019.02-x86_64-arm-linux-gnueabihf/bin/arm-linux-gnueabihf-gcc \-D CMAKE_CXX_COMPILER./gc…

VMware虚拟机Ubuntu磁盘空间扩充详细教程

文章目录 一、写在前面二、具体步骤三、最后总结 一、写在前面 最近在做Linux内核相关实验的时候,发现有时候我们编译出来的内核太大,如果VMware虚拟机空间分配不足会导致编译Linux内核失败,经过摸索,发现可以扩充Ubuntu的磁盘空间…

【Rust日报】2023-06-05 Effective Rust: 35种提升 Rust 代码的方法

Effective Rust: 35种提升Rust代码的方法 这是一本关于 Rust 的最佳实践指南的电子书,其中包含了很多 Rust 编程的技巧和建议。 这篇指南分为多个章节,涵盖了 Rust 编程的各个方面, 他分别从 类型, 概念, 依赖, 工具 等几大类上阐述了 35 种提高 Rust 代…

记录--你真的能区分JavaScript的各种导入导出方式吗?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 🛰🛰 我们在无论是在查阅别人的代码,还是在实际项目开发的过程中,肯定都会使用导入导出的功能,有时候我们会搞混这几种方式到底有什么区…

有哪些比较好的游戏图标推荐

游戏图标设计在游戏UI中占有非常重要的地位。例如,当我们看到一个游戏的启动图标时,很容易区分它是哪个游戏。设计游戏图标不仅是一个图形,也是一个标志。 本文将通过各种游戏图标设计素材分享游戏图标的类别和设计游戏图标的思考。 1. 游戏…

基于SSM+JSP的大学生校园兼职系统设计与实现

博主介绍: 大家好,我是一名在Java圈混迹十余年的程序员,精通Java编程语言,同时也熟练掌握微信小程序、Python和Android等技术,能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架下…

wsl连接usb设备,以及挂载u盘

目录 wsl连接usb设备 安装usbinpd-win 配置 在kali中做写的配置 在wsl中的配置 在kali中查看附加结果 报错 挂载u盘,查看u盘的内容 wsl连接usb设备 安装usbinpd-win winget install --interactive --exact dorssel.usbipd-win 配置 在kali中做写的配置 s…

Java 21 将不再有public static void main !

之前的Java是这样: Java 21会是这样: 看到这个消息,我最大的感受是: 卧槽,怎么就Java 21了?!我还在用Java 8 呢! 实际上,从Java 8 到Java 21,中间也就是Java…

“Pull”和“Push”支付的区别

下图展示了“Pull”和“Push”支付的工作原理。 当我们在商家处刷信用卡/借记卡时,这是一种“Pull”支付,资金从持卡人的账户发送到商家。商家从持卡人的账户中取款,而持卡人批准交易。 通过Visa Direct或Mastercard Send,推送支付…

WebRTC实战 | 视频云

前言 WebRTC是当前实时通信领域的重要技术之一,具有广泛的应用前景。可以实现音频、视频和数据的实时传输。支持点对点通信、多方会议、屏幕共享等多种应用场景,同时具有高质量、低延迟、强安全性等特点,是开发实时通信应用的理想选择。可以应…

从“嘿,Siri”到元宇宙,苹果还有多远距离要走?

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 在当前的科技浪潮中,元宇宙的概念凭借其无限的想象力和可能性,像一颗耀眼的新星吸引着世界的目光。巨大的发展潜力,吸引着一波又一波的企业,前赴后继地向元宇宙发起冲锋。 在这…