尧图网站建设 
Three.js 创建 VR 内容四步把一个普通 3D 场景送进头显原文出处Three.js Manual – How to create VR content本文基于官方手册「How to create VR content」章节整理用通俗方式带你看懂怎么用 Three.js 把已有的 WebGL 场景接入 WebXR、戴进 VR 头显里看。写在前面你手里已经有一个跑得不错的 Three.js 场景了——有Scene、有Camera、有WebGLRenderer平时在浏览器里转得挺好。现在想让它进 VR 头显里看是不是要大改答案是几乎不用大改。Three.js 把 WebXR 的复杂细节封装得相当干净你只需要动四处地方。这一篇就是一份极简上手指南照着四步走你的场景就能在头显里渲染了。小提示和 VR 对称的还有 AR增强现实Three.js 提供了ARButton用法和下面要讲的VRButton几乎一模一样想做 AR 内容把VRButton换成ARButton即可。一、整体工作流四步上手把 VR 接入一个 Three.js 应用核心就这四件事引入VRButton在页面上放一个「进入 VR」按钮告诉WebGLRenderer开启 XR 渲染把动画循环从requestAnimationFrame换成renderer.setAnimationLoop把按钮挂到页面上。下面逐一拆开讲最后给一份能直接跑的最小代码。二、第一步引入 VRButtonVRButton是 Three.js 官方提供的辅助类放在 addons 里。先把它 import 进来import{VRButton}fromthree/addons/webxr/VRButton.js;注意路径它在three/addons/webxr/下不是three/核心包。如果你用的是 npm 的three包对应路径是three/examples/jsm/webxr/VRButton.js。三、第二步创建按钮并挂到页面VRButton.createButton(renderer)干了两件关键的事探测兼容性它会生成一个按钮只有在当前浏览器/设备支持 VR 时才是可点的「ENTER VR」不支持时会显示提示文字比如「VR NOT SUPPORTED」。自动管理会话用户一点按钮它会帮你发起以及退出一个 VRXRSession你完全不用手写 WebXR 的requestSession那套复杂逻辑。你只要把它 append 到页面里document.body.appendChild(VRButton.createButton(renderer));划重点这一步要在renderer创建之后做因为按钮内部需要读取 renderer 来发起会话。把 renderer「交给」按钮就行别试图自己再造一个按钮去触发会话——那是重复造轮子还容易踩坑。四、第三步开启渲染器的 XR 模式接下来得明确告诉WebGLRenderer「我要做 XR 渲染了」。一行搞定renderer.xr.enabledtrue;这个开关默认是false。不打开它即使按钮能点、会话能起渲染出来的也不会是双目立体、跟随头显姿态的 VR 画面。记得在第一次render之前设置好。五、第四步换掉动画循环最容易漏的一步普通 Three.js 应用我们习惯这么写动画循环// ❌ VR 下不能用这套window.requestAnimationFrame(animate);在 VR 里渲染节奏由头显的显示刷新率驱动而不是浏览器的requestAnimationFrame。所以必须改用 Three.js 提供的renderer.setAnimationLoop()renderer.setAnimationLoop(function(){renderer.render(scene,camera);});⚠️ 这是新人最容易踩的坑沿用老的requestAnimationFrame循环结果画面要么不更新、要么姿态不动。记住——只要上了 WebXR动画循环一律用setAnimationLoop它会自动按头显节奏回调并且内部正确驱动相机姿态。六、完整最小代码把上面四步拼起来一个能进 VR 的最小骨架长这样import*asTHREEfromthree;import{VRButton}fromthree/addons/webxr/VRButton.js;// 1. 你的常规场景这里省略几何体细节constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);// 2. 开启 XR 渲染renderer.xr.enabledtrue;// 3. 放「进入 VR」按钮document.body.appendChild(VRButton.createButton(renderer));// 场景、相机、物体的常规搭建constscenenewTHREE.Scene();constcameranewTHREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.01,20);// 4. VR 专用动画循环renderer.setAnimationLoop(function(){renderer.render(scene,camera);});现实约束提醒WebXR必须在安全上下文HTTPS或 localhost下运行而且得有支持的设备如 Meta Quest 通过浏览器访问、或连接了头显的 PC。纯桌面浏览器没接头显时按钮会显示不支持——这是正常的不是代码写错了。总结创建 VR 内容的四步清单步骤关键代码作用1. 引按钮import { VRButton } from three/addons/webxr/VRButton.js引入 VR 入口控件2. 挂按钮document.body.appendChild( VRButton.createButton( renderer ) )生成可点按钮 自动管理会话3. 开 XRrenderer.xr.enabled true让渲染器进入 XR 模式4. 换循环renderer.setAnimationLoop( ... )用头显节奏驱动渲染别用 rAF延伸阅读three.js docs – WebXRManagerrenderer.xrthree.js docs – VRButtonthree.js examples – WebXR 全部示例MDN – WebXR Device API Three.js 创建 VR 内容：四步把一个普通 3D 场景送进头显
Three.js 创建 VR 内容四步把一个普通 3D 场景送进头显原文出处Three.js Manual – How to create VR content本文基于官方手册「How to create VR content」章节整理用通俗方式带你看懂怎么用 Three.js 把已有的 WebGL 场景接入 WebXR、戴进 VR 头显里看。写在前面你手里已经有一个跑得不错的 Three.js 场景了——有Scene、有Camera、有WebGLRenderer平时在浏览器里转得挺好。现在想让它进 VR 头显里看是不是要大改答案是几乎不用大改。Three.js 把 WebXR 的复杂细节封装得相当干净你只需要动四处地方。这一篇就是一份极简上手指南照着四步走你的场景就能在头显里渲染了。小提示和 VR 对称的还有 AR增强现实Three.js 提供了ARButton用法和下面要讲的VRButton几乎一模一样想做 AR 内容把VRButton换成ARButton即可。一、整体工作流四步上手把 VR 接入一个 Three.js 应用核心就这四件事引入VRButton在页面上放一个「进入 VR」按钮告诉WebGLRenderer开启 XR 渲染把动画循环从requestAnimationFrame换成renderer.setAnimationLoop把按钮挂到页面上。下面逐一拆开讲最后给一份能直接跑的最小代码。二、第一步引入 VRButtonVRButton是 Three.js 官方提供的辅助类放在 addons 里。先把它 import 进来import{VRButton}fromthree/addons/webxr/VRButton.js;注意路径它在three/addons/webxr/下不是three/核心包。如果你用的是 npm 的three包对应路径是three/examples/jsm/webxr/VRButton.js。三、第二步创建按钮并挂到页面VRButton.createButton(renderer)干了两件关键的事探测兼容性它会生成一个按钮只有在当前浏览器/设备支持 VR 时才是可点的「ENTER VR」不支持时会显示提示文字比如「VR NOT SUPPORTED」。自动管理会话用户一点按钮它会帮你发起以及退出一个 VRXRSession你完全不用手写 WebXR 的requestSession那套复杂逻辑。你只要把它 append 到页面里document.body.appendChild(VRButton.createButton(renderer));划重点这一步要在renderer创建之后做因为按钮内部需要读取 renderer 来发起会话。把 renderer「交给」按钮就行别试图自己再造一个按钮去触发会话——那是重复造轮子还容易踩坑。四、第三步开启渲染器的 XR 模式接下来得明确告诉WebGLRenderer「我要做 XR 渲染了」。一行搞定renderer.xr.enabledtrue;这个开关默认是false。不打开它即使按钮能点、会话能起渲染出来的也不会是双目立体、跟随头显姿态的 VR 画面。记得在第一次render之前设置好。五、第四步换掉动画循环最容易漏的一步普通 Three.js 应用我们习惯这么写动画循环// ❌ VR 下不能用这套window.requestAnimationFrame(animate);在 VR 里渲染节奏由头显的显示刷新率驱动而不是浏览器的requestAnimationFrame。所以必须改用 Three.js 提供的renderer.setAnimationLoop()renderer.setAnimationLoop(function(){renderer.render(scene,camera);});⚠️ 这是新人最容易踩的坑沿用老的requestAnimationFrame循环结果画面要么不更新、要么姿态不动。记住——只要上了 WebXR动画循环一律用setAnimationLoop它会自动按头显节奏回调并且内部正确驱动相机姿态。六、完整最小代码把上面四步拼起来一个能进 VR 的最小骨架长这样import*asTHREEfromthree;import{VRButton}fromthree/addons/webxr/VRButton.js;// 1. 你的常规场景这里省略几何体细节constrenderernewTHREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth,window.innerHeight);// 2. 开启 XR 渲染renderer.xr.enabledtrue;// 3. 放「进入 VR」按钮document.body.appendChild(VRButton.createButton(renderer));// 场景、相机、物体的常规搭建constscenenewTHREE.Scene();constcameranewTHREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.01,20);// 4. VR 专用动画循环renderer.setAnimationLoop(function(){renderer.render(scene,camera);});现实约束提醒WebXR必须在安全上下文HTTPS或 localhost下运行而且得有支持的设备如 Meta Quest 通过浏览器访问、或连接了头显的 PC。纯桌面浏览器没接头显时按钮会显示不支持——这是正常的不是代码写错了。总结创建 VR 内容的四步清单步骤关键代码作用1. 引按钮import { VRButton } from three/addons/webxr/VRButton.js引入 VR 入口控件2. 挂按钮document.body.appendChild( VRButton.createButton( renderer ) )生成可点按钮 自动管理会话3. 开 XRrenderer.xr.enabled true让渲染器进入 XR 模式4. 换循环renderer.setAnimationLoop( ... )用头显节奏驱动渲染别用 rAF延伸阅读three.js docs – WebXRManagerrenderer.xrthree.js docs – VRButtonthree.js examples – WebXR 全部示例MDN – WebXR Device API