Three.js之相机、渲染器、光源、动画、性能监测

参考资料

  • 第一个3D案例—透视投影相机
  • 第一个3D案例—渲染器
  • …
  • Canvas画布布局和全屏

知识点

  • 透视投影相机PerspectiveCamera
  • WebGL渲染器WebGLRenderer
  • 辅助观察坐标系AxesHelper
  • 漫反射网格材质MeshLambertMaterial
  • 点光源PointLight
  • 点光源辅助观察PointLightHelper
  • 环境光AmbientLight
  • 平行光DirectionalLight
  • 平行光辅助观察DirectionalLightHelper
  • 相机控件OrbitControls
  • 请求动画帧window.requestAnimationFrame
  • canvas画布宽高度动态变化
  • 性能监控Stats

代码实现

  • 相机、渲染器、光

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质 // MeshBasicMaterial：不受光// MeshLambertMaterial：受光const material = new THREE.MeshLambertMaterial({color:0x0000ff,});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// // 点光源// const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);// pointLight.position.set(-200, 200, 200 );// scene.add( pointLight );// // 辅助点光源// const pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );// scene.add( pointLightHelper );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 0.2);scene.add( ambientLight );// 平行光const directionalLight = new THREE.DirectionalLight( 0xffffff, 1, 0, 0);// directionalLight.position.set(100, 0, 0);// directionalLight.position.set(0, 100, 0);// directionalLight.position.set(100, 100, 100);directionalLight.position.set(100, 60, 50);directionalLight.target = mesh;scene.add( directionalLight );// 辅助平行光const directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight, 10 );scene.add( directionalLightHelper );// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {renderer.render(scene, camera);});</script>
</html>

  • 动画

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 动画渲染// 跟踪时间var clock = new THREE.Clock();function render() {const spt = clock.getDelta() * 1000;console.log('🚀 ~ file: animation.html:59 ~ render ~ spt:', spt)requestAnimationFrame(render);mesh.rotation.y += 0.01;renderer.render(scene, camera);}render();// 控制器const controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener('change', () => {// 因为动画渲染了，所以这里可以省略// renderer.render(scene, camera);});</script>
</html>

  • 画布动态变化

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title><style>body {margin: 0;overflow: hidden;}</style>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js"}}</script><script type="module">import * as THREE from 'three';let width = window.innerWidth;let height = window.innerHeight;// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 填满浏览器window.onresize = function () {width = window.innerWidth;height = window.innerHeight;renderer.setSize(width, height);camera.aspect = width / height;camera.updateProjectionMatrix();}</script>
</html>

  • 性能监控

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import Stats from 'three/addons/libs/stats.module.js';const width = 800const height = 500// 场景const scene = new THREE.Scene();// 几何体const geometry = new THREE.BoxGeometry(100, 100, 100);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set(0, 0, 0);scene.add(mesh);for (let i = 0; i < 1000; i++) {// 几何体const geometry = new THREE.BoxGeometry(5, 5, 5);// 材质const material = new THREE.MeshBasicMaterial({color: 0x00ff00,transparent: true,opacity: 0.5});// 网格模型：物体const mesh = new THREE.Mesh(geometry, material);mesh.position.set((Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200, (Math.random() - 0.5) * 200);scene.add(mesh);}// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);camera.position.set(200, 200, 200);camera.lookAt(scene.position);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);// 性能监控const stats = new Stats()document.body.appendChild(stats.domElement);// 动画渲染// 跟踪时间var clock = new THREE.Clock();function render() {stats.update()const spt = clock.getDelta() * 1000;requestAnimationFrame(render);mesh.rotation.y += 0.01;renderer.render(scene, camera);}render();</script>
</html>

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

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

相关文章

Linux学习————redis服务

Linux学习————redis服务

目录 一、redis主从服务 一、redis主从服务概念 二、redis主从服务作用 三、缺点 四、主从复制流程 五、搭建主从服务 配置基础环境 下载epel源&#xff0c;下载redis​编辑 二、哨兵模式 一、概念 二、作用 三、缺点 四、结构 五、搭建 修改哨兵配置文件 启动服务…
阅读更多...
深入探索：解读创意的力量——idea的下载、初步使用

深入探索：解读创意的力量——idea的下载、初步使用

目录 ​编辑 1.IDEA的简介 2.IDEA的下载 2.1下载路径https://www.jetbrains.com/zh-cn/idea/download/?sectionwindows​编辑​ 2.2下载的步骤 3 idea的初步使用 3.1新建一个简单的Java项目 3.1.1首先需要创建一个新的工程 3.1.2创建一个新的项目&#xff08;模块&am…
阅读更多...
信息论基础知识

信息论基础知识

注意&#xff1a;本文只针对离散随机变量做出探讨&#xff0c;连续随机变量的情况不适用于本文探讨的内容&#xff01; &#xff08;一&#xff09;自信息 1. 自信息 I ( x ) − l o g n P ( x ) \color{blue}I(x) - log_{n}{P(x)} I(x)−logn​P(x) 注意&#xff1a; 若n …
阅读更多...
这些Wireshark过滤条件，让你的Wireshark网络分析变得更加高效

这些Wireshark过滤条件，让你的Wireshark网络分析变得更加高效

文章首发地址 Wireshark 是一款开源网络数据包分析工具&#xff0c;可以用于捕获、分析和调试网络数据包。在使用 Wireshark 进行数据包分析时&#xff0c;常常需要使用过滤条件来过滤数据包&#xff0c;以便查找特定的数据包或者分析网络性能。 过滤协议 过滤特定协议的数据…
阅读更多...
网络协议栈-基础知识

网络协议栈-基础知识

1、分层模型 1.1、OSI七层模型 1、OSI&#xff08;Open System Interconnection&#xff0c;开放系统互连&#xff09;七层网络模型称为开放式系统互联参考模型 &#xff0c;是一个逻辑上的定义&#xff0c;一个规范&#xff0c;它把网络从逻辑上分为了7层。 2、每一层都有相关…
阅读更多...
vue报错‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。

vue报错‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。

运行我的后台管理项目的时候报错&#xff1a;‘vue-cli-service’ 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 查看自己package.json中是否有vue 或者vue-cli-service 查看自己项目目录下有没有node_module文件夹&#xff0c;如果有删除&#xff0c;然后…
阅读更多...
typeScript 之 Number

typeScript 之 Number

工具: PlayeGround 源码&#xff1a; GitHub TypeScript 简介 数字的基本类型是number&#xff0c;它是双精度64位浮点数&#xff0c;在TypeScript和JavaScript中没有整数。 但是他们支持使用Number对象&#xff0c;它是对原始数值的包装对象。 const value new Number(pa…
阅读更多...
腾讯云宣布VPC网络架构重磅升级，可毫秒级感知网络故障并实现自愈

腾讯云宣布VPC网络架构重磅升级，可毫秒级感知网络故障并实现自愈

8月11日&#xff0c;腾讯云宣布VPC&#xff08;Virtual Private Cloud&#xff0c;云私有网络&#xff09;架构重磅升级。新架构采用多项腾讯核心自研技术&#xff0c;能够支撑用户构建业界最大 300万节点超大规模单VPC网络&#xff0c;并将转发性能最大提升至业界领先的200Gbp…
阅读更多...
Linux 虚拟内存入门

Linux 虚拟内存入门

在计算机系统中&#xff0c;物理内存是一种有限的资源&#xff0c;即使该系统支持内存扩展&#xff08;多插几根内存条&#xff09;&#xff0c;但是对于内存的安装也有最大限制。物理内存不一定是连续的&#xff0c;它可以作为一个不同地址的集合进行访问&#xff1b; 此外&am…
阅读更多...
06 为什么需要多线程；多线程的优缺点；程序 进程 线程之间的关系；进程和线程之间的区别

06 为什么需要多线程；多线程的优缺点；程序 进程 线程之间的关系；进程和线程之间的区别

为什么需要多线程 CPU、内存、IO之间的性能差异巨大多核心CPU的发展线程的本质是增加一个可以执行代码工人 多线程的优点 多个执行流&#xff0c;并行执行。&#xff08;多个工人&#xff0c;干不一样的活&#xff09; 多线程的缺点 上下文切换慢&#xff0c;切换上下文典型值…
阅读更多...
Python Opencv实践 - 在图像上绘制图形

Python Opencv实践 - 在图像上绘制图形

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png") print(img.shape)plt.imshow(img[:,:,::-1])#画直线 #cv.line(img,start,end,color,thickness) #参考资料&#xff1a;https://blog.csdn.ne…
阅读更多...
81 | Python可视化篇 —— Seaborn数据可视化

81 | Python可视化篇 —— Seaborn数据可视化

Seaborn是Python中一个基于Matplotlib的高级数据可视化库，它提供了更简单的API和更美观的图形样式，适用于数据探索和展示。在本教程中，我们将介绍Seaborn的基本概念和用法，并通过一些示例演示如何使用Seaborn来创建各种图表和图形。 文章目录 1. 导入Seaborn库和数据2. 数据…
阅读更多...
复古游戏库管理器RomM

复古游戏库管理器RomM

什么是 RomM &#xff1f; RomM&#xff08;代表 Rom Manager&#xff09;是一个专注于复古游戏的游戏库管理器。通过 Web 浏览器管理和组织您的所有游戏。受 Jellyfin 的启发&#xff0c;允许您从现代界面管理所有游戏&#xff0c;同时使用 IGDB 元数据丰富它们。 RomM 支持的…
阅读更多...
机器学习:隐马尔可夫模型(HMM)

机器学习:隐马尔可夫模型(HMM)

后续会回来补充代码 1 隐马尔可夫模型 隐马尔可夫模型(Hidden Markov Model,HMM)是可用于标注问题的统计学模型&#xff0c;描述由隐藏的马尔可夫链随机生成观测序列的过程。 1.1 数学定义 隐马尔可夫模型是关于时序的概率模型&#xff0c;描述由一个隐藏的马尔可夫链随机生成…
阅读更多...
Hbase-面试题

Hbase-面试题

1. Hbase-region切分 自动切分&#xff0c;默认情况下 2.0版本&#xff0c;第一次region的数据达到256M&#xff0c;会进行切分&#xff0c;以后就是每达到10G切分一次&#xff0c;切分完成后&#xff0c;会进行负载均衡&#xff0c;均衡到其他regionserver预分区自定义rowke…
阅读更多...
数据治理-组织变革

数据治理-组织变革

为什么要有组织变革 组织变更的原因是&#xff0c;数据管理&#xff0c;对大多数企业而言&#xff0c;意味着原有的思维理念、工作模式、写作方式和信息技术的改变。这些改变无法依赖单纯的技术创新优化实现&#xff0c;而是通过组织管理的变更来实现。 数据管理成功实践的机制…
阅读更多...
二叉树的完全性检验

二叉树的完全性检验

给定一个二叉树的 root &#xff0c;确定它是否是一个 完全二叉树 。 在一个 完全二叉树 中&#xff0c;除了最后一个关卡外&#xff0c;所有关卡都是完全被填满的&#xff0c;并且最后一个关卡中的所有节点都是尽可能靠左的。它可以包含 1 到 2h 节点之间的最后一级 h 。 示…
阅读更多...
【算法挨揍日记】day02——双指针算法_快乐数、盛最多水的容器

【算法挨揍日记】day02——双指针算法_快乐数、盛最多水的容器

202. 快乐数 202. 快乐数https://leetcode.cn/problems/happy-number/ 题目&#xff1a; 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个…
阅读更多...
【C#】获取已安装的应用名称、启动路径、安装位置、产品代码、卸载字符串等

【C#】获取已安装的应用名称、启动路径、安装位置、产品代码、卸载字符串等

代码 /// <summary>/// Windows信息/// </summary>public partial class WindowsInfo{private static List<AppInfo> GetInstalledAppInfos(){List<AppInfo> appInfos new List<AppInfo>();string SameApp "";void AddApp(RegistryK…
阅读更多...
宋浩高等数学笔记（十一）曲线积分与曲面积分

宋浩高等数学笔记（十一）曲线积分与曲面积分

个人认为同济高数乃至数学一中最烧脑的一章。。。重点在于计算方式的掌握&#xff0c;如果理解不了可以暂时不强求&#xff0c;背熟积分公式即可。此外本贴暂时忽略两类曲面积分之间的联系&#xff0c;以及高斯公式的相关内容&#xff0c;日后会尽快更新&#xff0c;争取高效率…
阅读更多...
最新文章

Copyright @ 2022~2023