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，远平面1000const 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.mzph.cn/news/867294.shtml

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

相关文章

【搭建Nacos服务】centos7 docker从0搭建Nacos服务

【搭建Nacos服务】centos7 docker从0搭建Nacos服务

前言 本次搭建基于阿里云服务器系统为&#xff08;CentOS7 Linux&#xff09;、Nacos&#xff08;2.0.3&#xff09;、Docker version 26.1.4 本次搭建基于一个新的云服务器 安装java yum install -y java-1.8.0-openjdk.x86_64安装驱动以及gcc等前置需要的命令 yum install …
阅读更多...
【nvm管理nodejs版本，切换node指定版本】

【nvm管理nodejs版本，切换node指定版本】

nvm管理nodejs版本 nvm管理nodejs版本主要功能使用 nvm nvm管理nodejs版本 nvm&#xff08;Node Version Manager&#xff09;顾名思义node版本管理器&#xff0c;无须去node管网下载很多node安装程序;用于管理多个 Node.js 版本的工具。它允许你在同一台机器上同时安装和管理…
阅读更多...
Appium启动APP时报错Security exception: Permission Denial

Appium启动APP时报错Security exception: Permission Denial

报错内容Security exception: Permission Denial: starting Intent 直接通过am命令尝试也是同样的报错 查阅资料了解到&#xff1a;android:exported | App quality | Android Developers exported属性默认false&#xff0c;所以android:exported"false"修改为t…
阅读更多...
基于java+springboot+vue实现的图书商城管理系统（文末源码+Lw）283

基于java+springboot+vue实现的图书商城管理系统（文末源码+Lw）283

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本图书商城管理系统就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…
阅读更多...
rpm包下载

rpm包下载

内网无法下载、选择外网的一台机器下载rpm包 下载后上传rpm包 1、创建下载目录 mkdir /data/asap/test 2、下载能留存包的工具 sudo yum install yum-utils -y 报错就是环境问题没下载成功&#xff0c;我换了个环境正常的机器就可以了 3、下载rpm包到指定目录/data/asa…
阅读更多...
测试人员如何管理项目与风险预警

测试人员如何管理项目与风险预警

在平时工作过程中&#xff0c;你有没有因项目延时&#xff0c;需求频繁变更&#xff0c;开发提测质量不高&#xff0c;以及漏测的情况下&#xff0c;背了不少锅的情况呢&#xff1f; 作为测试人员&#xff0c;我们应该如何发挥积极主动性&#xff0c;进行项目管理&#xff0c;有…
阅读更多...
【学术会议征稿】2024年第十届机械制造技术与工程材料国际学术会议（ICMTEM 2024）

【学术会议征稿】2024年第十届机械制造技术与工程材料国际学术会议（ICMTEM 2024）

2024年第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09; 2024 10th International Forum on Manufacturing Technology and Engineering Materials 第十届机械制造技术与工程材料国际学术会议&#xff08;ICMTEM 2024&#xff09;将于2024年10月…
阅读更多...
（七）[重制]C++命名空间与标准模板库(STL)

（七）[重制]C++命名空间与标准模板库(STL)

​ 引言 在专栏C教程的第六篇C中的结构体与联合体中&#xff0c;介绍了C中的结构体和联合体&#xff0c;包括它们的定义、初始化、内存布局和对齐&#xff0c;以及作为函数参数和返回值的应用。在专栏C教程的第七篇中&#xff0c;我们将深入了解C中的命名空间&#xff08;nam…
阅读更多...
linux 基础命令、gcc的基础用法

linux 基础命令、gcc的基础用法

1、ls——>列出目录下的内容 语法&#xff1a;ls [-a -l -h] [Linux路径] &#xff08;1&#xff09;-a -l -h 是可选的选项 &#xff08;2&#xff09;Linux路径是此命令的可选参数 ①当不使用选项和参数&#xff0c;直接使用 ls 命令本体&#xff0c;表示&#xff1a;…
阅读更多...
kubernetes集群部署：环境准备及master节点部署（二）

kubernetes集群部署：环境准备及master节点部署（二）

主机名IPv4地址IPv6地址角色安装组件操作系统k8s130-node190192.168.XX.190240a:XX::190masterkubeadm、kubelet、containerdAnolis OS 8.94.19.91-28.1.an8.x86_64k8s130-node191192.168.XX.191240a:XX::191nodekubeadm、kubelet、cri-oAnolis OS 8.94.19.91-28.1.an8.x86_64k…
阅读更多...
Java基础-接口与实现

Java基础-接口与实现

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 Java 接口 什么是接口&#xff1f; 声明接口 实现接口 继承接口 接口的多继承 标记接口 Java 接口 …
阅读更多...
华为仓颉可以取代 Java 吗？

华为仓颉可以取代 Java 吗？

大家好&#xff0c;我是君哥。 在最近的华为开发者大会上&#xff0c;华为亮相了仓颉编程语言&#xff0c;这是华为历经 5 年&#xff0c;投入大量研发成本沉淀的一门编程语言。 1 仓颉简介 按照官方报告&#xff0c;仓颉编程语言是一款面向全场景智能的新一代编程语言&#…
阅读更多...
好消息！Stable Diffusion 3 允许商业化，很快开源更大版本模型

好消息！Stable Diffusion 3 允许商业化，很快开源更大版本模型

7月6日凌晨&#xff0c;著名开源大模型平台Stability AI修改了社区许可协议&#xff0c;最新发布的文生图模型Stable Diffusion 3 Medium允许商业化&#xff08;以下简称“SD3-M”&#xff09;。 如果企业、个人开发者每年收入低于100万美元&#xff08;大约726万元人民币&…
阅读更多...
《安全行业大模型技术应用态势发展报告（2024）》

《安全行业大模型技术应用态势发展报告（2024）》

人工智能技术快速迭代发展&#xff0c;大模型应用场景不断拓展&#xff0c;随着安全行业对人工智能技术的应用程度日益加深&#xff0c;大模型在网络安全领域的应用潜力和挑战逐渐显现。安全行业大模型技术的应用实践不断涌现&#xff0c;其在威胁检测、风险评估和安全运营等方…
阅读更多...
腐蚀服务器如何设置管理员

腐蚀服务器如何设置管理员

可以设置服主与管理员 控制台中设置&#xff08;需游戏账号在线&#xff09; 服主 添加&#xff1a;在控制台中输入ownerid空格SteamID 删除&#xff1a;在控制台中输入removeowner空格SteamID 管理员 添加&#xff1a;在控制台中输入moderatorid空格SteamID 删除&#…
阅读更多...
C++：二维数组的遍历

C++：二维数组的遍历

方式一&#xff1a; #include <vector> #include <iostream> int main() { // 初始化一个2x3的二维向量&#xff08;矩阵&#xff09; std::vector<std::vector<float>> matrix { {1.0, 2.0, 3.0}, // 第一行 {4.0, 5.0, 6.0} // 第二行 };…
阅读更多...
【Python文件】操作终极指南：高效管理和处理文件系统的必备技能

【Python文件】操作终极指南：高效管理和处理文件系统的必备技能

目录 ​编辑 1. 文件的基础操作 1.1 打开/关闭文件 ​编辑 示例代码 文件对象 使用with语句打开文件 2. 读文件 2.1 使用read方法读取文件 2.2 使用readline方法读取文件 2.3 使用readlines方法读取文件 2.4 使用for循环读取文件 3. 写文件 3.1 使用write方法写文…
阅读更多...
一张图说热泵

一张图说热泵

一张图说热泵
阅读更多...
B组亚太赛数学建模

B组亚太赛数学建模

问题1 1.对训练数据集进行数据清洗&#xff0c;处理缺失值和异常值。 2.采用散点图作为可视化手段。 3.采用皮尔逊相关系数进行相关性分析。 4.提出预防措施。 问题2 1.采用k-means聚类算法将洪水概率分为高中低三个群组。 2.通过线性回归模型计算特征权重。 3.选择特定…
阅读更多...
django高校教务系统-计算机毕业设计源码81661

django高校教务系统-计算机毕业设计源码81661

目 录 摘要 1 绪论 1.1 研究背景 1.2目的及意义 1.3论文结构与章节安排 2 高校教务系统设计分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分析 2.4…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023