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.rhkb.cn/news/375536.html

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

相关文章

测试状态缩略语

测试状态缩略语

术语和缩写解释Pass当测试用例执行完成后&#xff0c;测试结果符合预期结果的情况下&#xff0c;则该测试用例判断为测试通过Fail当测试用例执行完成后&#xff0c;测试结果与预期不符的情况下&#xff0c;则该测试用例判断为测试不通过。NA表示测试结果为"不适用"或…
阅读更多...
dataX入门

dataX入门

下载dataX https://datax-opensource.oss-cn-hangzhou.aliyuncs.com/202308/datax.tar.gz 然后 下载后解压至本地某个目录&#xff0c;进入bin目录&#xff0c;即可运行同步作业&#xff1a; $ cd {YOUR_DATAX_HOME}/bin $ python datax.py {YOUR_JOB.json} 要求你有python…
阅读更多...
[Vulnhub] Stapler wp-videos+ftp+smb+bash_history权限提升+SUID权限提升+Kernel权限提升

[Vulnhub] Stapler wp-videos+ftp+smb+bash_history权限提升+SUID权限提升+Kernel权限提升

信息收集 IP AddressOpening Ports192.168.8.106TCP:21,22,53,80,123,137,138,139,666,3306, Using Nmap for scanning: $ nmap -p- 192.168.8.106 --min-rate 1000 -sC -sV The results are as follows: PORT STATE SERVICE VERSION 20/tcp closed ftp-data…
阅读更多...
Tomcat的安全配置

Tomcat的安全配置

1、生产环境优化 2、部分漏洞修复 转载自风险评估&#xff1a;Tomcat的安全配置&#xff0c;Tomcat安全基线检查加固-CSDN博客
阅读更多...
【排序算法】归并排序

【排序算法】归并排序

目录 一.基本思想 二.递归版本 三.非递归版本 四.特性总结 1.时间复杂度&#xff1a;O(N*logN) 2.空间复杂度&#xff1a;O(N) 3.稳定性&#xff1a;稳定 一.基本思想 归并排序是采用分治法的一个非常典型的应用。它将已经有序的序列合并为完全有序的序列&#xff0c;即…
阅读更多...
算法学习day10（贪心算法）

算法学习day10（贪心算法）

贪心算法&#xff1a;由局部最优->全局最优 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找出适合的贪心策略求解每一个子问题的最优解将局部最优解堆叠成全局最优解 一、摆动序列&#xff08;理解难&#xff09; 连续数字之间的差有正负的交替&…
阅读更多...
如何将libwebsockets库编译为x86架构

如何将libwebsockets库编译为x86架构

在之前的文章中&#xff0c;我们已经详细介绍了如何交叉编译libwebsockets并将其部署到ELF 1开发板上。然而在调试阶段&#xff0c;发现将libwebsockets在Ubuntu环境下编译为x86架构可能更为方便和高效。 通过在主机环境中编译运用x86架构下的libwebsockets库&#xff0c;可以…
阅读更多...
2024年，搞AI就别卷模型了

2024年，搞AI就别卷模型了

你好&#xff0c;我是三桥君 2022年11月30日&#xff0c;OpenAI发布了一款全新的对话式通用人工智能工具——ChatGPT。 该工具发布后&#xff0c;仅用5天时间就吸引了100万活跃用户&#xff0c;而在短短2个月内&#xff0c;其活跃用户数更是飙升至1亿&#xff0c;成为历史上增…
阅读更多...
github的使用

github的使用

1.如何将代码会滚到某个提交之前 在GitHub上将代码回滚到之前的版本&#xff0c;可以通过Git命令行实现。以下是几种常用的方法来实现回滚&#xff1a; 方法一&#xff1a;使用 git revert git revert 会生成一个新的提交&#xff0c;这个提交会撤销之前的某个提交的更改。这…
阅读更多...
【ARMv8/v9 GIC 系列 1.7 -- GIC PPI | SPI | SGI | LPI 中断使能配置概述】

【ARMv8/v9 GIC 系列 1.7 -- GIC PPI | SPI | SGI | LPI 中断使能配置概述】

请阅读【ARM GICv3/v4 实战学习 】 文章目录 GIC 各种中断使能配置PPIs（每个处理器私有中断）SPIs（共享外设中断）SGIs（软件生成的中断）LPIs（局部中断）GIC 各种中断使能配置 在ARM GICv3和GICv4架构中，不同类型的中断（如PPIs、SPIs、SGIs和LPIs）可以通过不同的方式进…
阅读更多...
allWebPlugin中间件实现ActiveX插件在谷歌、火狐、Edge浏览器使用

allWebPlugin中间件实现ActiveX插件在谷歌、火狐、Edge浏览器使用

下载并安装allWebPlugin中间件 1、请从下面地址下载allWebPlugin中间件产品&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1xUyQDzOabh7mU7J7TYhtig?pwdz3q0 提取码&#xff1a;z3q0 如下图所示&#xff0c;下载最新allWebPlugin_x86_v2.0.0.14_stable_20240707…
阅读更多...
CUDA原子操作

CUDA原子操作

代码 #include <cuda_runtime.h> #include <stdio.h>__global__ void atomicAddAndGet(int *result, int *valueToAdd) {// 原子加法int addedValue atomicAdd(result, *valueToAdd);// 通过原子操作后读取值&#xff0c;确保是加法后的值addedValue *valueToAd…
阅读更多...
三级_网络技术_04_中小型网络系统总体规划与设计

三级_网络技术_04_中小型网络系统总体规划与设计

1.下列关于路由器技术特征的描述中&#xff0c;正确的是()。 吞吐量是指路由器的路由表容量 背板能力决定了路由器的吞吐量 语音、视频业务对延时抖动要求较低 突发处理能力是以最小帧间隔值来衡量的 2.下列关于路由器技术特征的描述中&#xff0c;正确的是()。 路由器的…
阅读更多...
RGB LCD 彩条显示实验

RGB LCD 彩条显示实验

目录 一.RGB TFT-LCD简介 1.1分辨率 1.2像素格式 1.3LCD屏幕接口 1.4LCD时间参数 1.5RGB LCD屏幕时序 1.6像素时钟 二.实验任务 三.模块设计与仿真 3.1读ID模块设计 3.1.1模块设计 3.1.2波形绘制 3.1.3modelsim仿真波形 3.2时钟分频模块 3.2.1模块设计 3.2.2绘制…
阅读更多...
算法力扣刷题记录 三十七【二叉树层序遍历】

算法力扣刷题记录 三十七【二叉树层序遍历】

前言 二叉树递归遍历和二叉树迭代遍历 实现的前中后序遍历都归类深度搜索&#xff1b; 广度搜索如何实现&#xff1f;一层结束&#xff0c;再继续下一层搜索&#xff1a;层序遍历。 一、题目阅读 【102.二叉树的层序遍历】 给你二叉树的根节点 root &#xff0c;返回其节点值…
阅读更多...
服务攻防——中间件Jboss

服务攻防——中间件Jboss

文章目录 一、Jboss简介二、Jboss渗透2.1 JBoss 5.x/6.x 反序列化漏洞&#xff08;CVE-2017-12149&#xff09;2.2 JBoss JMXInvokerServlet 反序列化漏洞&#xff08;CVE-2015-7501&#xff09;2.3 JBossMQ JMS 反序列化漏洞&#xff08;CVE-2017-7504&#xff09;2.4 Adminis…
阅读更多...
【逆向基础】十、工具分享之DIE(Detect It Easy)

【逆向基础】十、工具分享之DIE(Detect It Easy)

一、简介 DIE&#xff08;Detect It Easy&#xff09;是一款可以轻松检测PE文件的程序&#xff1b;其主要作用是查壳&#xff0c;并将pe文件的内容解析出来&#xff0c;包括PE文件中包含的导入函数、导出函数的名称及地址&#xff0c;入口函数地址等&#xff0c;是技术人员分析…
阅读更多...
如何在小红书上面有效地种草？

如何在小红书上面有效地种草？

文末领取小红书电商开店运营教程&#xff01; 小红书是一个以内容分享为主的社交平台&#xff0c;大家喜欢在这里分享自己的生活体验和心得&#xff0c;其中就包括各种产品的使用感受。 那么我们要想在小红书上有效地种草&#xff0c;首先就需要了解并掌握小红书的种草文化。 …
阅读更多...
Elasticsearch详细介绍

Elasticsearch详细介绍

B站对应视频&#xff1a; Elasticsearch01-01.为什么学习elasticsearch_哔哩哔哩_bilibili 大多数日常项目&#xff0c;搜索肯定是访问频率最高的页面之一。目前搜索功能是基于数据库的模糊搜索来实现的&#xff0c;存在很多问题。 首先&#xff0c;查询效率较低。 由于数据…
阅读更多...
libcoap3对接华为云平台

libcoap3对接华为云平台

文章目录 前言一、平台注册二、引入源码库1.libcoap仓库编译2.分析网络报文3.案例代码4.编译&运行 总结 前言 通过libcoap3开源代码库对接华为云平台&#xff0c;本文章将讨论加密与不加密的方式对接华为云平台。 一、平台注册 首先&#xff0c;你需要在华为云平台上创建…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发