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

news2024/11/28 20:48:18

文章目录

  • 如何引入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.coloradmin.cn/o/1902818.html

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

相关文章

（阿里云在线播放）基于SpringBoot+Vue前后端分离的在线教育平台项目

（阿里云在线播放）基于SpringBoot+Vue前后端分离的在线教育平台项目

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…
阅读更多...
Apache Seata tcc 模块源码分析

Apache Seata tcc 模块源码分析

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 一 .导读 spring 模块分析中讲到&#xff0c;Seata 的 spring 模块会对涉及到分布式业务的 b…
阅读更多...
从4D CT灌注成像中使用时空卷积神经网络预测急性缺血性中风的特定治疗病变结果| 文献速递-深度学习自动化疾病检查

从4D CT灌注成像中使用时空卷积神经网络预测急性缺血性中风的特定治疗病变结果| 文献速递-深度学习自动化疾病检查

Title 题目 Predicting treatment-specific lesion outcomes in acute ischemic stroke from 4D CT perfusion imaging using spatio-temporal convolutional neural networks 从4D CT灌注成像中使用时空卷积神经网络预测急性缺血性中风的特定治疗病变结果 01 文献速递介绍…
阅读更多...
CentOS 6.5 配置国内在线yum源和制作openssh 9.8p1 rpm包 —— 筑梦之路

CentOS 6.5 配置国内在线yum源和制作openssh 9.8p1 rpm包 —— 筑梦之路

CentOS 6.5比较古老的版本了&#xff0c;而还是有一些古老的项目仍然在使用。 环境说明 1. 更换国内在线yum源 CentOS 6 在线可用yum源配置——筑梦之路_centos6可用yum源-CSDN博客 cat > CentOS-163.repo << EOF [base] nameCentOS-$releasever - Base - 163.com …
阅读更多...
架构师学习理解和总结

架构师学习理解和总结

1.架构设计理念 2.架构方法论 2.1需求分析 2.1.1常见需求层次 2.1.2 常见需求结果 2.1.3 需求与架构关系 2.2 领域分析 2.3 关键需求 2.4 概念架构设计 2.5 细化架构设计 2.6 架构设计验证 3.架构设计工具 3.1 DDD领域建模 3.2 41视图分析法 3.3 UML设计工具 4.架构师知…
阅读更多...
昇思11天

昇思11天

基于 MindSpore 实现 BERT 对话情绪识别 BERT模型概述 BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;是由Google于2018年开发并发布的一种新型语言模型。BERT在许多自然语言处理&#xff08;NLP&#xff09;任务中发挥着重要作用&am…
阅读更多...
《侃侃而谈 · 关于接外单的一些事》

《侃侃而谈 · 关于接外单的一些事》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
lspci

lspci

【原】Linux之PCIE三种空间解析 PCIe学习笔记——2.PCIe配置空间 PCIE学习&#xff08;2&#xff09;PCIE配置空间详解 开发者分享 | 使用 lspci 和 setpci 调试 PCIe 问题 b : 字节 w&#xff1a;word L&#xff1a; 4byte
阅读更多...
VSCode远程服务器如何上传下载文件（超方便！）

VSCode远程服务器如何上传下载文件（超方便！）

方法一&#xff1a; 1、在VSCode应用商店安装SFTP插件 2、然后就可以直接把文件拖进VSCode即可&#xff0c;如下图所示&#xff1a; 这里的目录是我远程服务器上的目录&#xff0c;可以直接将要上传的文件直接拖进需要的文件夹 3、如果要从远程服务器上下载文件到本地&#x…
阅读更多...
rkmpp移植与测试

rkmpp移植与测试

一、mpp交叉编译 MPP(Media Process Platform )是Rockchip提供的一款硬件编解码媒体处理软件平台&#xff0c;适用于Rockchip芯片系列。它屏蔽了有关芯片的复杂底层处理&#xff0c;屏蔽了不同芯片的差异&#xff0c;为使用者提供了一组MPI统一接口。如果想达到最好的效果&…
阅读更多...
java join与yield方法

java join与yield方法

join() join() 方法的主要作用是使当前线程&#xff08;调用 join() 方法的线程&#xff09;等待目标线程完成执行。当目标线程执行完毕后&#xff0c;当前线程才会继续执行。 代码示例&#xff1a; public class JoinExample {public static void main(String[] args) {Thr…
阅读更多...
由于找不到xinput1 3.dll无法继续执行重新安装程序

由于找不到xinput1 3.dll无法继续执行重新安装程序

如果您的计算机提示无法找到xinput1_3.dll文件&#xff0c;这可能表明您的计算机存在问题。在这种情况下&#xff0c;您需要立即对xinput1_3.dll文件进行修复&#xff0c;否则您的某些程序将无法启动。以下是解决无法找到xinput1_3.dll文件的方法。 一、关于xinput1_3.dll文件的…
阅读更多...
Splunk Enterprise 中的严重漏洞允许远程执行代码

Splunk Enterprise 中的严重漏洞允许远程执行代码

Splunk 是搜索、监控和分析机器生成大数据的软件领先提供商&#xff0c;为其旗舰产品 Splunk Enterprise 发布了紧急安全更新。 这些更新解决了几个构成重大安全风险的关键漏洞&#xff0c;包括远程代码执行 (RCE) 的可能性。 受影响的版本包括 * 9.0.x、9.1.x 和 9.2.x&…
阅读更多...
使用握手信号实现跨时钟域数据传输

使用握手信号实现跨时钟域数据传输

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 参考代码 描述 分别编写一个数据发送模块和一个数据接收模块&#xff0c;模块的时钟信号分别为clk_a&#xff0c;clk_b。两个时钟的频率不相同。数据发送模块循环发送0-7&#xff0c;在每个数据传输完成之后&#xf…
阅读更多...
WPS+Python爬取百度之星排名

WPS+Python爬取百度之星排名

运行效果 手动拉取 https://www.matiji.net/exam/contest/contestdetail/146 如果手动查找&#xff0c;那么只能通过翻页的方式&#xff0c;每页10行&#xff08;外加一行自己&#xff09;。 爬取效果预览 本脚本爬取了个人排名和高校排名&#xff0c;可以借助WPS或MS Offi…
阅读更多...
2024年中国陶瓷轴承用氮化硅粉体市场发展现状及重点竞争企业研究

2024年中国陶瓷轴承用氮化硅粉体市场发展现状及重点竞争企业研究

2024年中国陶瓷轴承用氮化硅粉体市场发展现状及重点竞争企业研究 氮化硅是一种硬度高、结构稳定、热膨胀系数小&#xff0c;抗氧化和抗侵蚀性能好的一种的陶瓷材料&#xff0c;可用于制造高性能氮化硅陶瓷结构件、坩埚涂层等。近年来&#xff0c;伴随着机械制造行业进一步向高精…
阅读更多...
计算机网络性能指标概述：速率、带宽、时延等

计算机网络性能指标概述：速率、带宽、时延等

在计算机网络中&#xff0c;性能指标是衡量网络效率和质量的重要参数。本文将综合三篇关于计算机网络性能指标的文章&#xff0c;详细介绍速率、带宽、吞吐量、时延、时延带宽积、往返时延&#xff08;RTT&#xff09; 和利用率的概念及其在网络中的应用。 1. 速率&#xff08;…
阅读更多...
C++之do-while陈述

C++之do-while陈述

回圈是用来进行进行重复性的工作&#xff0c;典型的回圈会进行下列三项基本任务 1.控制变数初始设定2. 回圈结束条件测试3. 调整控制变数的值 关键字(keyword) do与while构成C 中回圈的一种&#xff0c;常用于后测式的回圈&#xff0c;意思是回圈会先进行第一轮&#xff0c;然后…
阅读更多...
硅纪元应用评测 | 弱智吧大战GPT4o和Claude 3.5 Sonnet

硅纪元应用评测 | 弱智吧大战GPT4o和Claude 3.5 Sonnet

"硅纪元AI应用测评"栏目&#xff0c;深入解析和评测最新的人工智能应用&#xff0c;提供专业见解和实用建议。不论您是AI专家还是科技爱好者&#xff0c;都能找到权威、详尽的测评&#xff0c;帮助您在快速发展的AI领域中做出最佳选择。一起探索AI的真实潜力&#xf…
阅读更多...
YOLOv8改进 | 注意力机制 | 增强模型在图像分类和目标检测BAM注意力【小白必备 + 附完整代码】

YOLOv8改进 | 注意力机制 | 增强模型在图像分类和目标检测BAM注意力【小白必备 + 附完整代码】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023