3D世界里的“盗梦空间”！在方块里再造一个世界？高级特效get✅

有没有想过，游戏里的镜子、传送门、或者屏幕上播放的实时3D动画是怎么实现的？

答案就是一项黑科技——渲染目标（Render Targets）。它允许我们不直接渲染到屏幕，而是“偷偷地”渲染到一张幕后的贴图上，然后再把这张包含了另一个世界画面的贴图，应用到我们主场景的任意物体上。

🖼️ 核心思想：先画到“小画板”上

这个概念听起来很绕，我们用一个简单的比喻来理解：

想象一下，你不是直接在房间的墙壁上作画，而是：

先拿出一块小画板（这就是 WebGLRenderTarget）。
在这块小画板上，精心画了一幅动态的画（比如一个独立旋转的3D物体）。
最后，你把这块已经画好了动态内容的小画板，像一张照片一样，挂到墙上（应用为主场景里某个物体的贴图）。

于是，你就实现了“画中画”的神奇效果！

✨ 无穷的可能性

掌握了这项技术，你就能解锁无数种高级特效：

实时监控画面 📹: 在一面墙上显示另一个房间的实时3D影像。
神奇的传送门 🌀: 门的那一头是另一个动态的世界。
车内后视镜 🚗: 镜子里实时反射出身后的场景。
后期处理滤镜 🎞️: 实现电影级别的调色、模糊、辉光等屏幕特效。

🛠️ 盗梦空间：完整代码

下面的代码将完整演示这个“盗梦空间”的过程：我们将创建一个主场景，里面有一个立方体；同时，我们还会创建另一个独立的“内部”场景，里面有一个旋转的环面纽结。然后，我们会把“内部”场景实时渲染的结果，作为贴图应用到主场景的立方体上。

代码亮点：

创建了 mainScene 和 rtScene (Render Target Scene) 两个独立的场景。
在动画循环中，通过 renderer.setRenderTarget() 来回切换渲染目标，实现“先画到小画板，再画到主屏幕”的流程。

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js Render Targets</title><style>body { margin: 0; }canvas { display: block; }</style>
</head>
<body><script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.165.0/build/three.module.js","three/addons/": "https://unpkg.com/three@0.165.0/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 1. 主场景设置const mainScene = new THREE.Scene();mainScene.background = new THREE.Color(0x333333);const mainCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);mainCamera.position.z = 5;const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);new OrbitControls(mainCamera, renderer.domElement);// 2. 创建一个 Render Target (我们的小画板)const rt = new THREE.WebGLRenderTarget(512, 512);// 3. 创建 "内部" 场景 (画板上的内容)const rtScene = new THREE.Scene();rtScene.background = new THREE.Color(0x87CEEB);const rtCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 100); // 宽高比为1，匹配RT尺寸rtCamera.position.z = 3;// 为内部场景添加自己的灯光和物体rtScene.add(new THREE.AmbientLight(0xffffff, 0.5));rtScene.add(new THREE.DirectionalLight(0xffffff, 1));const rtKnot = new THREE.Mesh(new THREE.TorusKnotGeometry(1, 0.3, 100, 16),new THREE.MeshStandardMaterial({ color: 0xff0088, roughness: 0.2 }));rtScene.add(rtKnot);// 4. 在主场景创建一个立方体，并使用Render Target的纹理const cubeMaterial = new THREE.MeshBasicMaterial({ map: rt.texture });const mainCube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), cubeMaterial);mainScene.add(mainCube);// 5. 动画循环function animate(time) {time *= 0.001;// 让两个场景的物体都动起来rtKnot.rotation.x = time;rtKnot.rotation.y = time;mainCube.rotation.x = -time * 0.2;mainCube.rotation.y = -time * 0.2;// 关键步骤：先渲染到 Render Targetrenderer.setRenderTarget(rt);renderer.render(rtScene, rtCamera);// 然后再渲染到主屏幕renderer.setRenderTarget(null);renderer.render(mainScene, mainCamera);requestAnimationFrame(animate);}animate();</script>
</body>
</html>