threejs 多个画布多个场景，一个控制器

最新推荐文章于 2025-02-17 22:57:00 发布
最新推荐文章于 2025-02-17 22:57:00 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： threejs 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Ttowx/article/details/129500293
版权
该文章探讨了如何在three.js中定义场景、相机和渲染器，将canvas作为画布，并通过renderer.setViewport和renderer.setScissor方法进行多个场景的裁剪和显示。此外，还提到了控制器的创建以及画布大小的响应式更新，以适应不同设备的显示需求。通过动画循环渲染，实现了多场景在单个canvas上动态展示的功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.定义场景、相机、渲染器
在这里插入图片描述
canvas为画布，canvas为画布，renderer的渲染对象，即为renderer.domElement
content为各个div元素的父元素，为控制器中用于事件监听的HTML元素。
在这里插入图片描述
2.定义控制器
在这里插入图片描述

3.创建多个场景，向其中添加对象
在这里插入图片描述
4.画布大小响应式更新
在这里插入图片描述
5.动画循环渲染
在这里插入图片描述
在这里插入图片描述
实现核心要点：获得各个div在屏幕中的位置，设置裁剪成多个区域，从而实现多个场景的显示功能。

renderer.setViewport(left, bottom, width, height);
renderer.setScissor(left, bottom, width, height);
在这里插入图片描述
链接：https://threejs.org/manual/#zh/multiple-scenes
实例代码：`

three.js webgl - multiple elements `
threejs 加载两个场景_如何在Three.js中实现多场景（scene）绘制
weixin_33700875的博客
12-30 4593
JavaScript语言：JaveScriptBabelCoffeeScript确定var color = 0x000000;// Create your main scenevar scene = new THREE.Scene();// Create your main cameravar camera = new THREE.PerspectiveCamera(75, window.inne...
three.js多场景的应用
kfyzjd2008的博客
02-13 2226
其实多场景非常简单，只需要两步： 第一步 //启用或禁用剪裁检测. 若启用，则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响 renderer.setScissorTest( true ); 第二步 // setScissor 将剪裁区域设为(x, y)到(x + width, y + height) renderer.setScissor( x, y, w , h ); ...
Three.js 多重场景渲染示例
最新发布
weixin_38993701的博客
02-17 286
这是一个使用 Three.js 实现的页面滚动驱动的多场景切换效果示例。通过监听页面滚动,实现两个场景之间的平滑过渡,包括 3D 模型的位置移动、旋转变换等效果。
three.js多场景多元素
Zmikoo学习之路
09-26 743
<!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - multiple elements</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-s
threejs——多重场景渲染
weixin_41770018的博客
02-03 1339
前言 摸鱼时发现了这threejs实现的效果，从效果图中可以看出来，在滚动页面的时候，模型在进入不同的场景，或者说进入不同的页面，渲染模式改变了，下面我们一步一步拆解出这种效果是怎么实现的，首先第一步，先找到一个合适的模型，我是直接下载的这个原地址的飞机模型，我们加入一些自己的思考和实践来实现出这个效果。希望大家能够跟着一起做，效果实现起来很简单，但是过程中遇到的小细节，还是需要好好把握一下...
three.js添加多个画布
weixin_48433993的博客
07-14 317
多个场景的渲染需要多个画布，但是这样会导致加载模型纹理次数变多，基本方法是用一张canvas在整个背景中填充视口，利用其它元素作为每个虚拟画布，只在canvas中加载一个渲染器renderer，并为每个虚拟画布创建一个场景，这样只需要确保每个虚拟画布的位置，three.ja就会将他们渲染在整个屏幕中指定的位置。这样我们只添加了一个canvas，仅使用了一个webgl contexts，解决了webgl上下文数量限制问题。
Threejs多个画布，多个场景优化
slqgenius的博客
11-15 1188
Three.js中一个老生常谈的问题就是多个场景的渲染。比如当你想制作一个由多个三维图像构成的商业网站时，很容易想到的解决办法就是为每一个三维图像创建一张画布(Canvas)，并为每张画布添加一个渲染器(Renderer)。通常浏览器将其限制为 8 个，一旦超出这个数量，最先创建的WebGL上下文就会被自动弃用。不同WebGL上下文无法共享任何资源，这就意味着，假设你想要在两个Canvas中各加载一个10Mb的模型，并且每个模型都20Mb的纹理，那么这个模型和纹理将分别被加载两次。
multiview-expermental:优化的three.js多画布示例
05-08
仅使用一个场景和一个渲染器。 只是多个画布元素和相机 相机控制已实现 除非您与每个Canvas进行交互，否则它们不会以动画循环的方式进行渲染。 去做 每个网格的UUID 通过UUID删除 保存并加载
基于three.js编写的一个项目类示例代码
10-18
接下来，示例项目中展示的代码片段创建了一个Three.js的基类，这个基类封装了场景（Scene）、相机（Camera）、渲染器（Renderer）、控制器（Controls）的初始化以及一些方法。基类的构造函数接受一个参数对象，允许...
three.js多画布优化技术与相机控制实现
资源摘要信息:"该项目是一个通过使用three.js实现的多画布（multiview）实验性示例，它主要展示了如何在只有一个场景和一个渲染器的前提下，通过多个画布元素和相机来展示不同视角的渲染效果。项目中已经实现了相机...
使用3D引擎threeJS实现星空粒子移动效果
10-19
总之，使用three.js实现星空粒子移动效果是一个涉及到多个three.js组件与功能的应用场景。它展示了three.js如何将WebGL的复杂性封装成简单易用的API，使得开发者能够在网页上实现各种3D视觉效果。
threejs 切换场景
07-29
threejs切换场景 实现图朴上的切换效果， 而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部 等效果 ， threejs scene的切换 ， 视角的移动会导致页面不是很流畅，而且旋转也会有点小bug 直接切换场景，就不会存在这种的问题，值得收藏，学不会找博主 私信 看到了会回复
three.js多相机技术
03-17
由于一个渲染器（renderer）对应一个相机（camera），当需要多个视图时会消耗大量内存； 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗； 内涵代码和思路文档
three.js一个渲染器渲染双场景的相互覆盖问题
weixin_50867227的博客
08-30 1180
three.js一个渲染器渲染双场景的相互覆盖问题
3.js - 裁剪场景（多个scence）
pig_ning的博客
07-07 342
3.js - 裁剪场景（多个scence）
threejs 加载两个场景_threejs-创建场景
weixin_39709178的博客
12-20 356
创建场景，完成添加、删除物体的操作三个基本的组件创建场景，并通过GUI添加物体、删除物体、控制物体旋转function init() {//初始化 辅助库，监测动画的帧数据var stats = initStats();// 创建场景var scene = new THREE.Scene();// 创建相机var camera = new THREE.PerspectiveCamera(45, w...
threejs 加载两个场景_three.js多场景切换和资源释放代码示例（含一个简单的资源管理器原型实现）...
weixin_39630735的博客
12-20 1785
HTML导入代码模板：import * as THREE from '//techbrood.com/threejs/build/three.module.js';import {GLTFLoader} from '//techbrood.com/threejs/examples/jsm/loaders/GLTFLoader.js';class ResourceTracker {construct...
THREEJS多渲染器叠加
天边那朵云的博客
09-05 6443
一： 同一个renderer和camera， 多个scene，设置renderer.autoClear = false; 然后 renderer.render（scene1， camera）； renderer.render(scene2, camera); 二：创建多个 renderer ，多个scene， 可以共用同一 个camera <!DOCTYPE html&...
three.js 一个页面可以存在多个render吗_剖析 React 源码：render 流程（二）
weixin_39612817的博客
12-08 264
无标题这是我的剖析 React 源码的第三篇文章，如果你没有阅读过之前的文章，请务必先阅读一下 第一篇文章 中提到的一些注意事项，能帮助你更好地阅读源码。文章相关资料React 16.8.6 源码中文注释，这个链接是文章的核心，文中的具体代码及代码行数都是依托于这个仓库热身篇render 流程（一）此篇文章内容衔接 render 流程（一），当然不看上一篇文章也没什么问题，因为内容并没有强相关。现...
threejs Physijs 两个模型防止穿模
01-23
### 解决Three.js与Physijs中两个模型之间的穿模问题 为了有效防止在Three.js和Physijs中的物体之间发生穿模现象，确保物理模拟的准确性至关重要。这涉及到正确配置碰撞检测以及调整物理属性。 #### 正确初始化Physijs环境 确保按照官方文档说明加载必要的库文件，并设置好场景。由于Physijs实际上是Ammo.js和Three.js的部分内容封装而成[^1]，因此需要先引入这些依赖项： ```html <script src="https://cdn.jsdelivr.net/npm/three@0.140.0/build/three.min.js"></script> <script src="https://cdn.rawgit.com/chandlerprall/Physijs/a7e28ec9/build/js/physijs_worker.js"></script> <script src="https://cdn.rawgit.com/chandlerprall/Physijs/a7e28ec9/build/js/physijs.js"></script> ``` #### 设置合理的质量参数 对于每一个要参与物理计算的对象，在创建时为其指定适当的质量值。如果对象应该静止不动，则可以将其设为`Infinity`；而对于动态物体来说，合理分配较小的质量有助于提高仿真度。 ```javascript const boxGeometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个具有固定位置（无限大质量）的基础平面作为地面 const groundMaterial = Physijs.createMaterial( new THREE.MeshBasicMaterial({ color: 0xffffff }), .5, .3 ); const groundPlane = new Physijs.StaticPlaneMesh( new THREE.PlaneBufferGeometry(), groundMaterial ); scene.add(groundPlane); // 添加可移动立方体并赋予一定质量 const cubeMass = 1; // 千克单位下的质量设定 const movingCube = new Physijs.BoxMesh(boxGeometry, material, cubeMass); movingCube.position.set(x, y, z); // 初始化坐标 scene.add(movingCube); ``` #### 调整时间步长与时钟同步 保持渲染循环内的时间更新频率稳定非常重要。通过调用`simulate()`方法来推进物理世界的状态变化，建议每帧都执行此操作以维持良好的交互体验。 ```javascript function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); scene.simulate(undefined, 1); // 参数分别为dt (delta time), substeps } animate(); ``` 此外，还可以考虑增加更多细节上的优化措施，比如启用连续碰撞检测(CCD)，这对于快速运动的小型刚体尤其有用。同时也要注意网格复杂度的影响，过于复杂的几何形状可能会降低性能甚至影响到碰撞判断的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值