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

最新推荐文章于 2023-11-30 17:11:50 发布
最新推荐文章于 2023-11-30 17:11:50 发布
阅读量1.1k 收藏
点赞数
分类专栏： Web3D 文章标签： Web3D
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010678947/article/details/132251048
版权

参考资料

知识点

  • 透视投影相机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 = 800
    const 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 = 800
    const 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 = 800
    const 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>
开心就是最好
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Three.js的渲染过程
from_the_star的博客
11-02 3924
主要基于WebGLRendere类的render方法开展，需要读者有基本的计算机图形知识，比如计算机图形管线（实时渲染管线）之类的。 在Three.js的渲染中，大概可以分为以下几步： 清空当前帧缓冲区，更新MVP矩阵； 将物体分为透明和不透明两类，按照离摄像机从近到远排序（也可在Object3D单独设置renderOrder）； 根据灯光信息，阴影计算，如果有开启平面裁剪就对进行剪裁； 开始逐个渲染物体，按以下顺序，背景、不透明物体、透明物体； 渲染前后还有两个类似于生命周期的回调函数，scene.on
THREE.WebGPURenderer：实验Three.js WebGPU渲染器
02-01
然后我可能会停止更新此项目，而改为为Three.js官方做出贡献。 三.WebGPU渲染器 实验Three.js WebGPU渲染器 / 通过Chrome Canary上的chrome：// flags打开＃enable-unsafe-webgpu进行演示。 链接
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
HuoZhiyan 的博客
12-26 2204
本文主要介绍了Three.js中的灯光与阴影，以及平行光与聚光灯的常用属性....
ThreeJs中场景（scene）、 相机（camera）、渲染器（renderer）等方法类使用
weixin_42508580的博客
10-10 8531
ThreeJs，是一个基于原生WebGL，轻量级，跨平台的Javascript库，可以在浏览器上结合HTML5的canvas,SVG或者WebGL，创建和展示3D模型和动画。允许我们在不依赖任何浏览器插件的情况下，创建一个GPU加速的3D动画场景，这可能得益于WebGL的出现，因为WebGL的底层实现是基于OpenGL。
Three.js入门之做一个简单的3D场景内添加标点的功能
sanye的博客
03-16 6928
什么是Three.js? 百度百科上是这么说的： Three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。 一些有用的链接 Three.js的基本概念：https://
VUE2+THREE.JS 模型上方显示信息框/标签(CSS3DSprite精灵模型)
c_x_m的博客
11-30 2252
CSS3DSprite精灵模型面向摄像机，场景缩放时，缩小放大跟随着，会被模型遮挡，可以被射线拾取。CSS3DRenderer用于通过CSS3的transform属性， 将层级的3D变换应用到DOM元素上。如果你希望不借助基于canvas的渲染来在你的网站上应用3D变换，那么这一渲染器十分有趣。同时，它也可以将DOM元素与WebGL的内容相结合。在添加标注前需要先给模型命名。
vue 中将three.js导入的3D模型给指定的元素初始化时展示tip；动态id名称和动态css；vue 中将three.js导入的3D模型中的tip随着元素位置的变化而变化
killerdoubie的博客
09-19 167
（2）在animate方法中查询到具体的要显示tip的对象后调用上面的labelTag方法 （在这里调用就是为了tip和元素的位置一起变化）可以根据某个标识去批量加载出对应的tip。（1）在methods中定义生成方法。
创建自定义着色器：在 Three.js 中定制渲染效果
左本Web3D
06-08 2555
Three.js 是一个功能强大的 WebGL 库，它提供了丰富的渲染功能和内置的着色器。然而，有时候你可能需要更加个性化和定制化的渲染效果，这就需要使用自定义着色器来实现。本篇博文将介绍如何在 Three.js 中创建自定义着色器，并展示一些常见的渲染效果定制示例。编写顶点着色器和片元着色器代码编写顶点着色器和片元着色器代码时，实际的实现会因特定的需求和场景而有所不同。以下是一个简单的示例，展示了一个基本的顶点着色器和片元着色器代码：// 片元颜色输出// 将片元颜色设置为红色。
three.js 09-03 之 Tween 动画
zhulx_sz 的博客
02-27 978
    Tween.js 是一个小型的 JavaScript 库，可以从 https://github.com/sole/tween.js 下载。这个库可以用来定义某个属性在两个值之间的过渡，自动计算起始值和结束值之间的所有中间值。这个过程叫 tweening（补间）。例如，你可以用这个库将一个网格 x 轴上的位置在 10 秒钟内从 10 递减到 3，如下代码片段所示：var tween = ne...
Three.js 开发之加载外部GLTF模型和压缩（一）
jiaweimin123的博客
02-26 3787
Three.js 开发3D智慧楼宇（Vue） 在VUE项目里使用three.js搭建智慧园区和楼宇，控制空调、灯光、窗帘的开关等设备，实现智能化楼宇。 环境搭建 除了vue项目所需要的基本依赖，可用vue-cli脚手架快速搭建不多介绍，我们还需要再额外安装three.js的一些依赖来开发： 这边用到了这2两个依赖，一个是整个three.js 的所有资源，一个是three的控件，控制选择缩放的，在package.json内，安装方法：cnpm i -D three three-orbit-controls即
Three.js渲染GeoJSON.zip
07-13
在IT领域，Three.js是一个非常流行的JavaScript库，用于在Web浏览器中创建3D图形。它利用WebGL技术，使得开发者可以构建丰富的交互式三维场景。本项目“Three.js渲染GeoJSON”聚焦于如何使用Three.js将地理数据...
three.js多相机技术
03-17
由于一个渲染器（renderer）对应一个相机（camera），当需要多个视图时会消耗大量内存； 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗； 内涵代码和思路文档
使用three.js在浏览器中渲染的 3d 场景.zip
07-14
总的来说，"使用three.js在浏览器中渲染的3D场景"项目涵盖了`three.js`的基础知识，包括场景创建、对象、材质、光源、动画以及模型加载等核心概念。通过学习和理解这些内容，你将能够创建出引人入胜的3D互动体验，...
Three.js创造一个三维太阳系动画.zip
08-23
2. **创建场景**：在Vue组件中初始化Three.js的场景、相机和渲染器。 3. **添加对象**：根据太阳系的实际情况，创建太阳、行星及其轨道，并设置初始位置和属性。 4. **编写动画逻辑**：在生命周期钩子函数中启动动画...
java毕设&课设-图书管理系统（完整的）.zip
07-21
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
奇异谱分析SSA做信号分解，信号去噪、分解
最新发布
07-21
奇异谱分析SSA做信号分解，信号去噪、分解 1.运行main文件，其余为子函数 2.可以做回归预测，分类预测，时间序列预测 3.可以做信号分解，算法优化，区间预测 4.可以做组合模型预测 5.可以做聚类
ASP电子政务档案管理系统(源代码+论文).rar
07-21
ASP电子政务档案管理系统(源代码+论文)
生物医药Ⅱ行业深度研究：带疱苗市场高速增长时代拉开序幕，大单品蓝海有望渐成.pdf
07-21
生物医药Ⅱ行业深度研究：带疱苗市场高速增长时代拉开序幕，大单品蓝海有望渐成
Three.js场景中的光源运用详解
"本章详细介绍了Three.js库中各种光源的使用，包括 AmbientLight、PointLight、SpotLight、DirectionalLight、HemisphereLight、AreaLight 和 LensFlare，以及如何调整和配置它们以实现不同的光照效果。" 在Three....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值