217. 综合实战：开放世界（十八）

上节把电脑画了出来：

2026-01-11 21.21.02.gif

这节加上电脑屏幕的内容。

用 CSS3DRenderer 来做，基于网页实现电脑屏幕。

首先加一下 CSS3DRenderer：

它会渲染一个 div，把它定位到 webgl 的canvas 上。

import { CSS3DRenderer } from 'three/examples/jsm/Addons.js';

const css3Renderer = new CSS3DRenderer();
css3Renderer.setSize(width, height);
css3Renderer.domElement.style.position = 'absolute';
css3Renderer.domElement.style.top = '0px';
css3Renderer.domElement.style.left = '0px';
css3Renderer.domElement.style.pointerEvents = 'none';
css3Renderer.domElement.style.zIndex = '1';

document.body.append(css3Renderer.domElement);
document.body.append(renderer.domElement);

渲染循环里调用下：

css3Renderer.render(scene, camera);

然后在电脑的位置创建一个 CSS3DObject：

const ele = document.getElementById('desktop');
if (ele) {

    css3dObj = new CSS3DObject(ele);
    css3dObj.rotateX(-Math.PI / 2);
    css3dObj.scale.set(0.01, 0.01, 0.01);
    css3dObj.position.y = 2;
    css3dObj.position.x = -0.16;

    gltf.scene.traverse(obj => {
        if (obj.isMesh) {
            obj.castShadow = true;

            if (obj.name === 'Object_5') {
                obj.add(css3dObj);
            }
        }
    });
}

这里的 Object_5 是屏幕的 mesh，之前遍历找过，这里就不找了。

然后把 id 为 desktop 的网页元素画一下：

<div id="desktop" style="display: none;">
  <img class="bg" src="./bg.png"/>
  <div class="app">
    <div class="logo"></div>
    <div class="name">浏览器</div>
  </div>
  <iframe class="browser" style="display: none;" src="/assets/threejs/b5c7c27c462211378dfee368618551a67209cb7c.image"></iframe>
</div>

在 style.css 加下对应的样式：


#desktop {
  width: 600px;
  height: 1100px;
  background: pink;
  backface-visibility: hidden;
  position: relative;
}
#desktop .bg {
  position: absolute;
  left: -250px;
  top: 250px;
  width: 1100px;
  height: 600px;
  rotate: -90deg;
}
#desktop .app {
  position: absolute;
  left: 50px;
  top: 900px;
  width: 100px;
  height: 100px;
  rotate: -90deg;
  cursor: pointer;
}
#desktop .app:hover {
  background: lightblue;
}

#desktop .app .logo {
  width: 50px;
  height: 50px;
  background: url(./chrome.png);
  background-size: cover;
  translate: 50% 0;
}

#desktop .app .name {
  font-size: 30px;
  color: white;
}

#desktop .browser {
  width: 900px;
  height: 600px;
  position: absolute;
  left: -150px;
  top: 250px;
  rotate: -90deg;
}

看下效果：

2026-01-11 21.49.51.gif

这样，电脑屏幕就出来了。

当然，因为 CSS3DObject 是在 canvas 之上加了一层 div，那自然是会遮挡场景里的物体的。

我们可以按 E 开始打电脑后再展示这个屏幕。

下节我们继续完善。

案例代码上传了小册仓库

217. 综合实战：开放世界（十八）

评论