Threejs环境、透视相机、坐标系、光源

文章目录

  • 如何引入threejs
    • npm方式
    • script方式
    • script module方式
  • 基本流程与坐标
  • 摄像机
  • Geometry(几何体)和Material(材质)
  • 光源

如何引入threejs

对于很多刚刚上手threejs的朋友，可能第一步引入threejs就出问题了，
明明已经导入了，就是这样问题那样问题，所以我们首先来看一下threejs的引入问题。

3种方式:

  1. npm安装依赖，使用webpack之类的打包工具处理
  2. script直接导入
  3. script module方式import

npm方式

# 安装项目依赖
npm install three

// import引入three.js
import * as THREE from 'three';

这种方式通常需要结合其他打包工具一起使用，否则还是需要像第3种方式一样。

script方式

先下载threejs相关包

官网
threejs下载

然后：

<script src='js/three.min.js'></script>

这种方式最方便，但是不推荐，因为r160+就不支持了

但可以使用下面的方式

script module方式

<script type="importmap">
    {
        "imports": {
            "three": "./js/three.module.js",
            "three/addons/": "./js/jsm/"
        }
    }
</script>
<script type="module">
    import * as THREE from "three";
    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
    const scene = new THREE.Scene();
</script>

2点注意：

  1. type的方式必须是module，才能使用import
  2. importmap表示映射关系，以免每次写完整的路径，例如上面就是将./js/three.module.js路径映射为three，import就可以直接from three

这种方式也可以使用npm three来安装依赖:

导入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	//创建场景
	const scene = new THREE.Scene();
	//创建透视投影相机，视角45度，画幅比例 宽比高，近平面距离0.1，远平面1000
	const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
	//创建渲染器
	const renderer = new THREE.WebGLRenderer();
	//渲染器canvas宽高设为与窗口一致
	renderer.setSize(window.innerWidth, window.innerHeight);
	//将渲染器对应的dom元素添加到body中
	document.body.appendChild(renderer.domElement);
	//定义一个几何体
	const geometry = new THREE.SphereGeometry(3, 30, 30);
	//定义一种材质，显示为线框
	const material = new THREE.MeshBasicMaterial({
		color: 0xB3DD,
		wireframe: true
	});
	//网孔(Mesh)是用来承载几何模型的一个对象，可以把材料应用到它上面
	const ball = new THREE.Mesh(geometry, material);
	//把几何模型添加到场景中，对象被添加到原点(0,0,0)坐标。
	scene.add(ball);
	//移动相机位置
	camera.position.z = 8;

	function render() {
		//渲染循环，以每秒60次的频率来绘制场景
		requestAnimationFrame(render);
		//设置球体绕y轴旋转
		ball.rotation.y += 0.005;
		renderer.render(scene, camera);
	}
	render();
</script>

基本流程与坐标

  1. threejs首先需要一个场景Scene作为容器用来放物体
  2. 需要一些物体放入场景中
  3. 需要一个相机Camera来观察场景
  4. 需要一个Renderer来渲染相机看到的指定场景，如WebGLRenderer渲染完成就可以获取到一个dom元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 渲染
	renderer.render(scene, camera);

</script>

threejs是右手坐标系，X轴向右、Y轴向上，Z轴垂直屏幕向外。
右手坐标系

坐标系
我们可以看到对应的轴和我们设置的颜色一致。

摄像机

相机是一个非常重要的概念，我们最终看到的都是摄像机看到的场景中物体。

相机在所有3D中基本都一样，最常用的就是透视摄像机PerspectiveCamera：

透视相机

  1. fov:摄像机视野角度
  2. aspect:摄像机裁面长宽比
  3. near:摄像机原点到近裁面距离
  4. far: 摄像机原点到远裁面距离

透视相机示意图
透视相机参数说明

透视相机就是和我们生活中的相机一样，和眼睛看到的也差不多，近大远小，距离相机近的物体显示的大，距离相机远的物体显示的小。

如果不知道怎么设置，可以直接使用下面的设置：

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

Geometry(几何体)和Material(材质)

// 添加立方体
const geometry = new THREE.BoxGeometry(2, 2, 2);
const material = new THREE.MeshBasicMaterial({ color: 0xffecda });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 添加立方体
	const geometry = new THREE.BoxGeometry(2, 2, 2);
	const material = new THREE.MeshBasicMaterial({ color: 0xffecda });
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	
	// 渲染
	renderer.render(scene, camera);

</script>

cube

光源

three.js中有三种重要的光源：

  1. 环境光(Ambient Light):环境光是一种均匀的光照，它会均匀地照亮场景中的所有物体，不考虑光照源的位置和方向
  2. 方向光(Directional Light):方向光是一种平行光源，它具有确定的方向和强度，类似于太阳光
  3. 点光源(Point Light):点光源是一种位于特定位置的光源，它向所有方向发射光线，类似于灯泡

MeshBasicMaterial不受光源影响，可以使用MeshStandardMaterial

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>npm threejs</title>
	</head>
	<body>
	</body>
</html>
<script type="importmap">
	{
		"imports": {
			"three": "./node_modules/three/build/three.module.js",
			"three/addons/": "./node_modules/three/examples/jsm/"
		}
	}
</script>
<script type="module">
	import * as THREE from 'three';
	// 创建渲染器,画布
	const renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.pixelRatio = window.devicePixelRatio;
	renderer.setSize(window.innerWidth, window.innerHeight);
	// 画布添加到body中
	document.body.append(renderer.domElement);
	// 也可以添加到指定的元素中
	// document.getElementById('threeBox').appendChild(renderer.domElement);
	
	// 创建场景
	const scene = new THREE.Scene();
	
	// 创建相机
	const camera = new THREE.PerspectiveCamera(
	  75,
	  window.innerWidth / window.innerHeight,
	  0.1,
	  1000
	);
	
	
	// 创建物体
	const axis = new THREE.AxesHelper(5);
	// 设置x、y、z坐标颜色
	axis.setColors("pink",0xffff00,"blue");
	scene.add(axis);
	
	// 设置坐标位置，否则相机和物体默认都在坐标原点啥都看不见
	camera.position.set(5, 5, 10);
	camera.lookAt(0, 0, 0);
	
	// 添加立方体
	const geometry = new THREE.BoxGeometry(2, 2, 2);
	const material = new THREE.MeshStandardMaterial({ color: 0xffecda });
	const cube = new THREE.Mesh(geometry, material);
	scene.add(cube);
	
	const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
	scene.add(ambientLight);
	
	const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
	directionalLight.position.set(10, 0, 10);
	scene.add(directionalLight);

	// 渲染
	renderer.render(scene, camera);

</script>

光源效果

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

scala基础

scala基础

scala基础&#xff1a; hello world: 写scala可运行文件的注意事项1、如果一个scala文件要运行&#xff0c;class要改成object2、如果是class&#xff0c;就仅单纯代表一个类&#xff0c;如果是object代表的是单例对象3、scala语法中&#xff0c;一句话结束不需要加分号4、scal…
阅读更多...
Linux——进程间通信一(共享内存、管道、systrem V)

Linux——进程间通信一(共享内存、管道、systrem V)

一、进程间通信介绍 1.1、进程间通信的概念和意义 进程间通信(IPC interprocess communication)是一组编程接口&#xff0c;让不同进程之间相互传递、交换信息(让不同的进程看到同一份资源) 数据传输:一个进程需要将它的数据发送给另外一个进程 资源共享:多个进程之间共享同样…
阅读更多...
Hadoop-16-Hive HiveServer2 HS2 允许客户端远程执行HiveHQL HCatalog 集群规划 实机配置运行

Hadoop-16-Hive HiveServer2 HS2 允许客户端远程执行HiveHQL HCatalog 集群规划 实机配置运行

章节内容 上一节我们完成了&#xff1a; Metastore的基础概念配置模式&#xff1a;内嵌模式、本地模式、远程模式实机配置远程模式 并测试 背景介绍 这里是三台公网云服务器&#xff0c;每台 2C4G&#xff0c;搭建一个Hadoop的学习环境&#xff0c;供我学习。 之前已经在 V…
阅读更多...
Hadoop-YARN-Tutorial

Hadoop-YARN-Tutorial

Hadoop-YARN-Tutorial 1 What is YARN? Yarn is the acronym for yet another resource negotiator. Yarn是yet another resource negotiator的缩写。 Yarn is a resource manager created by separating the processing engine and the management function of mapreduce. …
阅读更多...
YOLOv8_obb数据集可视化[旋转目标检测实践篇]

YOLOv8_obb数据集可视化[旋转目标检测实践篇]

先贴代码，周末再补充解析。 这个篇章主要是对标注好的标签进行可视化，虽然比较简单，但是可以从可视化代码中学习到YOLOv8是如何对标签进行解析的。 import cv2 import numpy as np import os import randomdef read_obb_labels(label_file_path):with open(label_file_path,…
阅读更多...
ViewController 生命周期

ViewController 生命周期

ViewController 生命周期 ViewController 生命周期测试程序&#xff1a;ViewControllerLifeCircle ViewController 生命周期 ViewController 是 iOS 开发中 MVC 框架中的 C&#xff0c;ViewColllecter 是 View&#xff08;视图&#xff09;的 Collecter&#xff08;控制器&…
阅读更多...
Vim编辑器与Shell命令脚本

Vim编辑器与Shell命令脚本

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 目录 一、Vim文本编辑器 二、编写Shell脚本 三、流程控制语句 四、计划任务服务程序 致谢 一、Vim文本编辑器 “在Linux系统中一切都是文件&am…
阅读更多...
TQ15EG开发板教程：MPSOC创建fmcomms8工程

TQ15EG开发板教程：MPSOC创建fmcomms8工程

链接&#xff1a;https://pan.baidu.com/s/1jbuYs9alP2SaqnV5fpNgyg 提取码&#xff1a;r00c 本例程需要实现在hdl加no-OS系统中&#xff0c;通过修改fmcomms8/zcu102项目&#xff0c;实现在MPSOC两个fmc口上运行fmcomms8项目。 目录 1 下载文件与切换版本 2 编译fmcomms8项…
阅读更多...
【SpringCloud】概述 -- 微服务入门

【SpringCloud】概述 -- 微服务入门

在Java的整个学习过程中&#xff0c;大家势必会听见一些什么分布式-微服务、高并发、高可用这些专业术语&#xff0c;给人的感觉很高级&#xff0c;有一种高深莫测的感觉。可以看一下这篇博客对这些技术架构的演变有一个初步的认识: 服务端⾼并发分布式结构演进之路-CSDN博客文…
阅读更多...
Java开源ERP系统Axelor汉化方法初探

Java开源ERP系统Axelor汉化方法初探

Axelor简介 汉化过程介绍 定义语言和本地化 导出多语言记录 导入翻译 验证翻译 调整翻译 Axelor简介 2024年6月份Axelor ERP发布了8.1版本&#xff0c;适配JDK11及PostgreSQL12及以上版本&#xff08;7及以前版本适配JDK8及PostgreSQL10&#xff09;数据库。v8版本较之前…
阅读更多...
kubernetes集群部署：node节点部署和cri-docker运行时安装（四）

kubernetes集群部署：node节点部署和cri-docker运行时安装（四）

安装前准备 同《kubernetes集群部署&#xff1a;环境准备及master节点部署&#xff08;二&#xff09;》 安装cri-docker 在 Kubernetes 1.20 版本之前&#xff0c;Docker 是 Kubernetes 默认的容器运行时。然而&#xff0c;Kubernetes 社区决定在 Kubernetes 1.20 及以后的…
阅读更多...
昇思MindSpore学习入门-评价指标

昇思MindSpore学习入门-评价指标

当训练任务结束&#xff0c;常常需要评价函数&#xff08;Metrics&#xff09;来评估模型的好坏。不同的训练任务往往需要不同的Metrics函数。例如&#xff0c;对于二分类问题&#xff0c;常用的评价指标有precision&#xff08;准确率&#xff09;、recall&#xff08;召回率&…
阅读更多...
代码随想录算法训练Day58|LeetCode417-太平洋大西洋水流问题、LeetCode827-最大人工岛

代码随想录算法训练Day58|LeetCode417-太平洋大西洋水流问题、LeetCode827-最大人工岛

太平洋大西洋水流问题 力扣417-太平洋大西洋水流问题 有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个…
阅读更多...
调度系统揭秘（下）：调度算法与架构设计

调度系统揭秘（下）：调度算法与架构设计

文章目录 一、调度算法1.1、广度优先:1.2、深度优先1.3、总结广度优先搜索&#xff08;BFS&#xff09;深度优先搜索&#xff08;DFS&#xff09; 二、架构设计2.1、Master/Slave架构优劣分析 2.2、Leader架构优劣分析 2.3、总结 一、调度算法 在调度系统中&#xff0c;调度算…
阅读更多...
【】AI八股-神经网络相关

【】AI八股-神经网络相关

Deep-Learning-Interview-Book/docs/深度学习.md at master amusi/Deep-Learning-Interview-Book GitHub 网上相关总结&#xff1a; 小菜鸡写一写基础深度学习的问题&#xff08;复制大佬的&#xff0c;自己复习用&#xff09; - 知乎 (zhihu.com) CV面试问题准备持续更新贴 …
阅读更多...
本安防爆手机：危险环境下的安全通信解决方案

本安防爆手机：危险环境下的安全通信解决方案

在石油化工、煤矿、天然气等危险环境中&#xff0c;通信安全是保障工作人员生命安全和生产顺利进行的关键。防爆智能手机作为专为这些环境设计的通信工具&#xff0c;提供了全方位的安全通信解决方案。 防爆设计与材料&#xff1a; 防爆智能手机采用特殊的防爆结构和材料&…
阅读更多...
机械硬盘故障分析及损坏处理（坏道屏蔽）

机械硬盘故障分析及损坏处理（坏道屏蔽）

机械硬盘故障分析&#xff1a; 1、加电后没有声音就是电机不转&#xff0c;是电路问题&#xff0c;更换电路板解决。 2、加电后电机转&#xff0c;有连续敲击声音&#xff0c;或有异响&#xff0c;磁头损坏或机械故障。 3、加电后电机转&#xff0c;运行正常&#xff0c;BIOS无…
阅读更多...
建立数据通路(一)

建立数据通路(一)

指令周期(Instruction Cycle) 指令种类 Fetch(取得指令) 也就是从PC寄存器里找到对应的指令地址&#xff0c;根据指令地址从内存里把具体的指令&#xff0c;加载到指令寄存器中然后把PC寄存器自增&#xff0c;好在未来执行下一条指令 Decode(指令译码) 也就是根据指令寄存器里…
阅读更多...
Apache Seata新特性支持 -- undo_log压缩

Apache Seata新特性支持 -- undo_log压缩

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata新特性支持 – undo_log压缩 Seata新特性支持 – undo_log压缩 现状 & 痛点…
阅读更多...
类与对像（1）

类与对像（1）

好几个月没有写了&#xff0c;差了好多&#xff0c;这些天补回来吧。 接下来&#xff0c;让我们正式步入C与C语言开始不同的地方。 我对类的理解&#xff1a;类是对于具有相同或相似属性的数据集合。 类的关键词&#xff1a;class&#xff0c;public&#xff0c;protected&a…
阅读更多...
最新文章

Copyright @ 2022~2023