【技术调研】三维(1)-ThreeJs-基础常识及第一个程序

news2024/12/23 23:15:30

前言

​ 公司有网页三维以及客户端、vr三维相关项目机会,需要对相关技术进行调研,进行项目可行性评估和大致成本评估。基于此对三维一些内容进行调研。

什么是three.js

​ Three.js是一款基于原生WebGL封装通用Web 3D引擎。由于前文已经了解过webGL,知道通过webGL的API我们能绘制出三维物体及动画。此处可以把three.js理解为一个封装好的专门用来处理webGL三维动画的javascript库。比如可以直接通过api生成一个几何体,而不用像使用webGL原生API那样去写每个点的坐标、索引等等。既然是库,那么我们主要从库的使用方法入手进行相关学习。

​ three.js相关资料很多,如threejs官网、threejs中文网。对于零基础的初学者,建议查看后者。

一些基础概念

属性名称 描述
场景(Scene) 是一个三维空间,所有物品的容器,可以把场景想象成一个空房间,接下来会往房间里放要呈现的物体、相机、光源等。可以配合 chrome 插件使用,抛出 window.scene 即可实时调整 obj 的信息和材质信息。
相机(Camera) 必须要往场景中添加一个相机,相机用来确定位置、方向、角度,相机看到的内容就是我们屏幕中看到的内容。 正交相机:无论物体距离相机距离远或者近,最终渲染的图片大小都保持不变,适用于渲染2D场景或者UI元素 透视相机:近大远小,类似人眼
物体对象(Mesh) 包括二维物体(点、线、面)、三维物体、模型等等。
光源(Light) 场景中的光照,如果不添加光照场景将会是一片漆黑,包括全局光、平行光、点光源等。
渲染器(Renderer) 相当于咔擦一下的拍照动作,得到一张静态照片。取值代表渲染方式,如 WebGLcanvas2Dcss3D
控制器(Control) 可通过键盘、鼠标控制相机的移动。

场景Scene相机Camera渲染器Renderer三个是最重要的基本概念,接下来,通过“第一个3D案例”进行详细了解。

threejs文件包及源码下载

最新版本

three.js官网 可以下载three.js文件包,默认是最新版本的,three.js官网的文档一般也是当前最新版本。

历史版本下载

github链接查看所有版本threejs:https://github.com/mrdoob/three.js/releases 。选择你需要的版本three.js文件包下载。

threejs文件包目录介绍

下载three.js文件包解压后,你可以看到如下目录(不同版本会略有差异)。

three.js-文件包
└───build——three.js相关库,可以引入你的.html文件中。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件,本地离线方式预览threejs文档
└───examples——大量的3D案例,是你平时开发参考学习的最佳资源
    │───jsm——threejs各种功能扩展库
└───src——Three.js引擎的源码,有兴趣可以阅读。
    │
└───editor——Three.js的可视化编辑器,可以编辑3D场景
    │───index.html——打开应用程序  

在这里插入图片描述

第一个threejs程序

使用 NPM 和构建工具进行安装

  1. 安装 Node.js。我们需要它来管理依赖项和运行构建工具。

  2. 在项目文件夹中通过 终端 安装 three.js 和构建工具 Vite。Vite 将在开发过程中使用,但不会被打包成为最终网页的一部分。当然,除了 Vite 你也可以使用其他支持导入 ES Modules 的现代构建工具。

    # three.js
    npm install --save three
    
    # vite
    npm install --save-dev vite
    

绘制一个物体

通过案例,了解场景、相机。

调整相机位置,可以查看物体不同面。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body {
      margin: 0; }
		</style>
	</head>
	<body>
		<script type="module">
			import * as THREE from "three";
			// 1.创建场景
			const scene = new THREE.Scene();
			
			// 2.创建透视相机 有几种不同的相机,案例使用透视摄像机
			const camera = new THREE.PerspectiveCamera(
			  45, // 视野角度 单位是角度
			  window.innerWidth / window.innerHeight, // 相机宽高比 拍出图片的宽高比?涉及到图片压缩
			  //  当物体某些部分比摄像机的远截面远或者比近截面近的时候,该部分将不会被渲染到场景中。
			  0.1, // 近截面
			  1000 // 远截面 
			);
			// 设置相机位置  Z轴正方向从屏幕中穿出来
			camera.position.z = 5;
			camera

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

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

相关文章

人工智能技术导论——基于产生式规则的机器推理

在引出本章的内容之前先介绍一个概念 知识 知识的概念 知识&#xff08;Knowledge&#xff09;是人们在改造客观世界的实践中形成的对客观事物&#xff08;包括自然的和人造的&#xff09;及其规律的认识&#xff0c;包括对事物的现象、本质、状态、关系、联系和运动等的认识…

大数据技术体系架构

数据源 社交媒体平台 云平台 网站资源 物联网&#xff08;IOT&#xff09; 数据库 特点 分布式 数据源一般分布在不同的设备上&#xff0c;这些设备通常由网络连接在一起&#xff0c;网络空间的安全及其重要&#xff1b; 异构性 数据的来源广泛&#xff0c;比如社交媒…

Qt常用控件——QRadioButton和QCheckBox

文章目录 QRadioButtonQAbstractButton信号实现简单的点餐页面QCheckBox QRadioButton QRadioButton是单选按钮&#xff0c;可以让我们在多个选项当中选择一个 作为QAbstractButton和QWidget的子类&#xff0c;它们的属性和语法&#xff0c;对于QRadioButton同样适用 QAbstrac…

springboot+vue+mybatis计算机毕业设计医护系统的设计与实现+PPT+论文+讲解+售后

近些年来&#xff0c;随着科技的飞速发展&#xff0c;互联网的普及逐渐延伸到各行各业中&#xff0c;给人们生活带来了十分的便利&#xff0c;医护系统的设计与实现利用计算机网络实现信息化管理&#xff0c;使整个医护系统的发展和服务水平有显著提升。 本文拟采用Eclipse开发…

【尚跑】2024陕西淳化天然氧吧半程马拉松赛149顺利完赛

1、赛事背景 奔跑美丽淳化&#xff0c;畅游天然氧吧。9月8日上午&#xff0c;2024淳化天然氧吧半程马拉松赛在淳化县润镇东街鸣枪开跑&#xff0c;4000名马拉松爱好者相聚美丽淳化&#xff0c;赏荞麦花海、闻硕果飘香&#xff0c;共同开启这场挑战自我、超越极限的奔跑之旅 本次…

EasyRecovery破解版下载无需注册,easyrecovery数据恢复软件免费版激活码密钥

EasyRecovery易恢复是一款功能强大的数据恢复软件&#xff0c;为无数人群解决了数据丢失的烦恼&#xff0c;为工作生活带去了便捷。无数使用者在使用过后&#xff0c;都肯定了其强大的数据恢复功能。具体来说&#xff0c;EasyRecovery易恢复可以恢复多方面的数据&#xff0c;Ea…

如何规避SQL注入漏洞

1 引言 对于很多初学者而言&#xff0c;SQL注入攻击是一种很容易被忽略的安全漏洞&#xff0c;其原理很简单&#xff0c;在日常编码中需要注意规避&#xff0c;养成良好的系统安全意识。 2 原理 SQL注入漏洞产生的根本原因&#xff0c;就是在编码过程中手动拼接sql参数造成的…

os模块函数

1、常用命令 os.getcwd() 返回当前工作目录 os.listdir() 返回指定文件路径下的文件夹列表或者文件列表 os.mkdir 创建文件夹,不能创建递归文件夹,也就是上一层文件夹必须存在,不存在时会报错,同时在指定目录下有相同的文件夹名称,再创建会报错 os.makedirs 可以创建…

[基于 Vue CLI 5 + Vue 3 + Ant Design Vue 3 搭建项目] 01 安装 nodejs 环境

文章目录 下载安装测试 这里让我们去看看如何安装一下 nodejs 的环境 下载 通过官网进行下载安装包 官网 https://nodejs.org/zh-cn点击 下载 Node.js (LTS) 开始下载 安装 下载完成之后&#xff0c;双击进行安装 开始进行安装了 这样&#xff0c;node.js 就安装好了 测试 …

计算机毕业设计 | springboot旅行旅游网站管理系统(附源码)

1&#xff0c;绪论 1.1 背景分析 随着人们生活水平的提高和对休闲旅游的日益重视&#xff0c;旅游业已成为全球最大的经济产业之一。越来越多的人选择通过在线方式进行旅行预订&#xff0c;这种趋势为旅游网站提供了巨大的商机。用户体验是决定旅游网站成功与否的关键因素。良…

TD综合教程——粒子切换和音轮(附思路和工程文件)

一、粒子切换 整体思路&#xff1a; 给constant中的color实时滑条数值但是没有变化 解决办法&#xff1a;在这里使用的rgb不是0-255的色域&#xff0c;而是0-20&#xff0c;使用Math CHOP改变即可 二、音轮 整体思路&#xff1a; 在math中输入双声道音频后&#xff0c;可以使…

WinCC V7.5与S7-1200 PLC 通信

自WinCC V7.2版本起&#xff0c;软件新增加了 "SIMATIC S7-1200, S7-1500 Channel"通道,用于WinCC与 S7-1200/S7-1500 PLC之间的通信。此驱动只支持以太网通讯&#xff0c;使用 TCP/IP 协议。 工控人加入PLC工业自动化精英社群 文档示例的软/硬件环境硬件&#xff1…

QLORA:高效微调量化大型语言模型

人工智能咨询培训老师叶梓 转载标明出处 传统的16位精度微调需要超过780GB的GPU内存&#xff0c;对于参数量极大的模型&#xff0c;如65B&#xff08;即650亿参数&#xff09;的模型&#xff0c;在资源有限的情况下大模型的微调几乎是不可能的。华盛顿大学的研究者团队提出了一…

您的计算机已被.rmallox、.hmallox勒索病毒感染?恢复您的数据的方法在这里!

导言 近年来&#xff0c;勒索病毒攻击手段不断升级&#xff0c;其中双重勒索策略更是成为了攻击者们的“新宠”。这种策略不仅通过加密受害者的文件来要求赎金&#xff0c;还进一步威胁要泄露或公开其敏感数据&#xff0c;实现了对受害者的双重打击。面对如此严峻的网络安全形…

[ubuntu]opencv4.9.0源码编译报错undefined reference to ‘TIFFReadRGBxxxxx‘及解决方法

今天在编译Opencv4.89.0的时候报了上面这个错误&#xff0c;原因是和anaconda环境冲突&#xff0c;因为此时是在激活的conda环境下编译的。 解决方法&#xff1a;conda deactivate 关闭conda环境&#xff0c;再进行编译&#xff0c;就OK了。记得要删除build缓存重新cmake然后ma…

【OpenCV-直方图与傅里叶变换】图像的基本变换、傅里叶变换、直方图

import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB %matplotlib inline def cv_show(img,name):cv2.imshow(name,img)cv2.waitKey()cv2.destroyAllWindows()1 直方图 1.1 cv2.calcHist(images,channels,mask,histSize,ra…

浪潮信息:构建高效、安全数据存储底座的领航者

浪潮信息在最新IDC发布的《中国企业级外部存储市场跟踪报告&#xff0c;2024Q1》中表现抢眼&#xff0c;以11.4%的市场销售额占比稳居中国存储市场第二&#xff0c;同比增长率高达13.6%&#xff0c;领跑头部厂商。这标志着浪潮信息在推动中国存储市场持续增长中扮演了关键角色&…

智能语音技术在人机交互中的应用与发展

摘要&#xff1a;本文主要探讨智能自动语音识别技术与语音合成技术在构建智能口语系统方面的作用。这两项技术实现了人机语音通信&#xff0c;建立起能听能说的智能口语系统。同时&#xff0c;引入开源 AI 智能名片小程序&#xff0c;分析其在智能语音技术应用场景下的意义与发…

电商平台的仅退款,如何“卷”出一个千亿IPO?

“快递柜第一股”&#xff0c;丰巢登陆港交所 当英国走进工业革命时代&#xff0c;狄更斯曾经这样形容那个充满着激情、创造和无限可能的世界&#xff0c;“这是最好的时代&#xff0c;也是最坏的时代。” 如今&#xff0c;随着运费险、仅退款、直播带货的出现&#xff0c;中…

【最新华为OD机试E卷-支持在线评测】字母组合(200分)多语言题解-(Python/C/JavaScript/Java/Cpp)

🍭 大家好这里是春秋招笔试突围 ,一枚热爱算法的程序员 💻 ACM金牌🏅️团队 | 大厂实习经历 | 多年算法竞赛经历 ✨ 本系列打算持续跟新华为OD-E/D卷的多语言AC题解 🧩 大部分包含 Python / C / Javascript / Java / Cpp 多语言代码 👏 感谢大家的订阅➕ 和 喜欢�…