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…
阅读更多...
Eureka服务降级策略配置指南：确保微服务架构的弹性

Eureka服务降级策略配置指南：确保微服务架构的弹性

在微服务架构中&#xff0c;服务之间的依赖关系非常普遍。当一个服务不可用时&#xff0c;可能会导致整个系统的故障。服务降级是一种提高系统可用性的策略&#xff0c;它允许服务在某些条件不满足时提供降级的响应。Eureka作为Netflix开源的服务发现框架&#xff0c;可以与Hys…
阅读更多...
c与c++ 常用的字符与字符串处理的接口介绍：

c与c++ 常用的字符与字符串处理的接口介绍：

在 C 和 C 中&#xff0c;字符与字符串处理是非常基础和常见的操作。以下是一些常用的接口和函数&#xff1a; C 字符串处理接口 字符处理&#xff1a; char 类型&#xff1a;C 中用于表示单个字符。 字符串是以 null 结尾的字符数组&#xff0c;通常使用 char[] 或 char* 表…
阅读更多...
基于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;有…
阅读更多...
PHP框架中环境变量的管理和最佳实践

PHP框架中环境变量的管理和最佳实践

在现代Web开发中&#xff0c;环境变量的使用是确保应用程序在不同环境&#xff08;如开发、测试、生产&#xff09;中安全、灵活运行的关键。PHP框架提供了多种方式来管理和使用环境变量&#xff0c;本文将详细探讨这些方法&#xff0c;并提供一些最佳实践。 环境变量的重要性…
阅读更多...
理解async和await

理解async和await

async 和 await 是 JavaScript 中用于编写异步代码的两个关键字。它们让异步代码的编写更加简洁、易于理解和维护&#xff0c;类似于同步代码的写法。 async async 用于声明一个函数是异步的。这意味着这个函数在执行时不会阻塞 JavaScript 的主线程&#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月…
阅读更多...
影刀_扩展屏幕运行总结

影刀_扩展屏幕运行总结

首先&#xff0c;先看一个例子“&#xff1a; 滑块拼图验证免费版 1、影刀在扩展屏幕&#xff0c;谷歌在主屏幕。成功 2、影刀主屏幕&#xff0c;谷歌在扩展屏幕&#xff0c;失败。 3、都在扩展屏幕&#xff0c;失败。 4、都在主屏幕上&#xff0c;成功。从上面的例子可以看出…
阅读更多...
本地事务、全局事务、分布式事务

本地事务、全局事务、分布式事务

事务处理 事务处理几乎在每一个信息系统中都会涉及&#xff0c;它存在的意义是为了保证系统中所有数据都是符合期望的&#xff0c;且相互关联的数据之间不会产生矛盾&#xff0c;即数据状态的一致性&#xff08;Consistency&#xff09;。 按照数据库的经典理论&#xff0c;要…
阅读更多...
（七）[重制]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;…
阅读更多...
滑动窗口练习4-将x减到0的最小操作数

滑动窗口练习4-将x减到0的最小操作数

题目链接&#xff1a;**. - 力扣&#xff08;LeetCode&#xff09;**&#xff08;字节跳动&#xff09; 题目描述&#xff1a; 给你一个整数数组 nums 和一个整数 x 。每一次操作时&#xff0c;你应当移除数组 nums 最左边或最右边的元素&#xff0c;然后从 x 中减去该元素的…
阅读更多...
短剧app开发如何对接广告联盟？

短剧app开发如何对接广告联盟？

短剧app对接广告联盟是一个综合性的过程&#xff0c;涉及多个关键步骤。以下是一个大致的指南&#xff1a; 了解广告联盟&#xff1a; 对市场上的广告联盟进行全面了解&#xff0c;包括它们的类型、支持的广告格式&#xff08;如横幅广告、插屏广告、视频广告等&#xff09;、…
阅读更多...
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 接口 …
阅读更多...
spring-13

spring-13

Required 注解 Required 注解用于标记必需的属性或参数&#xff0c;它确保被标记的属性或参数在使用之前被赋值&#xff0c;否则会抛出异常。 下面是一个使用 Required 注解的完整代码示例&#xff1a; import org.springframework.beans.factory.annotation.Required;public…
阅读更多...
最新文章

Copyright @ 2022~2023