Three CSS2D 渲染器月球绕地球旋转-易微帮

CSS2DRenderer(CSS 2D渲染器)

CSS2DRenderer（CSS 2D渲染器）可以把HTML元素作为标签标注到三维场景中，CSS2DRenderer是CSS3DRenderer（CSS 3D渲染器）的简化版本，它唯一支持的变换是位移。通过CSS2DRenderer我们可以将三维物体和基于HTML的标签相结合，来更好的表达场景中物体的信息。

构造函数

CSS2DRenderer()

方法

.getSize () 返回一个包含有渲染器宽和高的对象。

.render ( scene : Scene, camera : Camera ) 使用camera渲染scene。

.setSize (width : Number, height : Number) 将渲染器的尺寸调整为(width, height)

使用CSS2DRenderer

在安装的three包中找到 renderers 文件夹，里面包含了THREE.JS提供的渲染器。可以看到有两个js文件，分别是 CSS2DRenderer 和 CSS3DRenderer。这个js文件会返回两个变量：CSS2DObject, CSS2DRenderer （CSS3DObject, CSS3DSprite, CSS3DRenderer），分别是CSS2D 对象和渲染器（CSS3D会多一个）

CSS2DRenderer是threejs提供的扩展库，在threejs文件包目录examples/jsm/renderers/，文件夹下面可以找到CSS2DRenderer.js扩展库。

要使用CSS2DRenderer，我们需要先将其引入,

import { CSS2DObject, CSS2DRenderer } from 'three/addons/renderers/CSS2DRenderer.js'

CSS2DRenderer：渲染器是生成一个 DIV 容器，它的作用是能把 HTML 元素绑定到三维物体上，在 DIV 容器中各自的 DOM 元素分别封装到 CSS2DObject 的实例中，并在 scene 中增加。

一、创建HTML标签

1、创建html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
    </style>
</head>
<body>
<script type="importmap">
    {
      "imports": {
        "three": "../js/three.module.js",
        "three/jsm/": "../js/jsm/"
      }
    }
</script>

<script type="module" src="js/10CSS2D%20渲染器使用.js"></script>
</body>
</html>

二、创建场景Scene

1、引入 CSS2D 渲染器和创建物体的构造函数

import { CSS2DObject, CSS2DRenderer } from '../../js/jsm/renderers/CSS2DRenderer.js'

2、创建场景Scene, 相机camera 位置，渲染器 renderer

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 2.5, -5)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

2、创建环境光 AmbientLight，三向光 DirectionalLight

const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(0, 0, 1);
scene.add(dirLight);
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

3、地球和月球的图片贴图

const textureLoader = new THREE.TextureLoader();

const earthGeometry = new THREE.SphereGeometry(1, 16, 16);
const earthMaterial = new THREE.MeshPhongMaterial({
    specular: 0x333333,
    shininess: 5,
    map: textureLoader.load("../image/planets/earth_atmos_2048.jpg"),
    specularMap: textureLoader.load("../image/planets/earth_specular_2048.jpg"),
    normalMap: textureLoader.load("../image/planets/earth_normal_2048.jpg"),
    normalScale: new THREE.Vector2(0.85, 0.85),
});

const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.name = 'earth'
scene.add(earth);

const moonGeometry = new THREE.SphereGeometry(0.5, 16, 16);
const moonMaterial = new THREE.MeshPhongMaterial({
    shininess: 5,
    map: textureLoader.load("../image/planets/moon_1024.jpg"),
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.x = 4;
moon.name = 'moon'
scene.add(moon);

4、创建 2D 渲染器。2D 渲染器 DOM 挡住了轨道控制器要监听的 canvas 画布，发现鼠标无法触发轨道控制器影响相机移动了，把轨道控制器监听的 DOM 改成 2D 渲染器的 DOM，让 2D 渲染器的 DOM 不交互任何鼠标事件，让鼠标可以摸到后面一层的 canvas 标签

const css2dRenderer = new CSS2DRenderer()
css2dRenderer.setSize(window.innerWidth, window.innerHeight)
css2dRenderer.domElement.style.position = 'fixed'
css2dRenderer.domElement.style.left = 0
css2dRenderer.domElement.style.top = 0
css2dRenderer.domElement.style.zIndex = 1
// 问题：2D 渲染器 DOM 挡住了轨道控制器要监听的 canvas 画布，发现鼠标无法触发轨道控制器影响相机移动了
// 解决1：把轨道控制器监听的 DOM 改成 2D 渲染器的 DOM
// 解决2：让 2D 渲染器的 DOM 不交互任何鼠标事件，让鼠标可以摸到后面一层的 canvas 标签
css2dRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(css2dRenderer.domElement)

5、创建 2d 物体，先创建原生 DOM 标签（无需自己添加到 dom 上，因为一会儿会被 three.js 添加到 2d 渲染器的容器 div 中）

// 先创建原生 DOM 标签（无需自己添加到 dom 上，因为一会儿会被 three.js 添加到 2d 渲染器的容器 div 中）
const earthDiv = document.createElement('div')
earthDiv.style.color = 'white'
earthDiv.innerHTML = '地球'

// 转换 2D 物体
const earthLabel = new CSS2DObject(earthDiv)
earthLabel.position.set(0, 1, 0)
earthLabel.name = 'earthLabel'
earth.add(earthLabel)

6、月球的说明

const moonDiv = document.createElement('div')
moonDiv.style.color = 'white'
moonDiv.innerHTML = '月球'
// 转换 2D 物体
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, 1, 0)
moonLabel.name = 'moonLabel'
moon.add(moonLabel)

7、中国标记

const zgDiv = document.createElement('div')
zgDiv.style.color = 'white'
zgDiv.innerHTML = '中国'
zgDiv.style.fontSize = '12px'
// 转换 2D 物体
const zgLabel = new CSS2DObject(zgDiv)
// -0.2 的原因是父级物体旋转了 180 度
zgLabel.position.set(-0.3, 0.5, -0.9)
zgLabel.name = 'zgLabel'
earth.add(zgLabel)

// 补充：适配
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    css2dRenderer.setSize(window.innerWidth, window.innerHeight)
})

8、月球旋转。计算 2d 物体和摄像机距离以及是否穿越了其他物体实现这个目的，这次是直接用一个坐标点（标签坐标）而不是鼠标交互的屏幕坐标与摄像机连线计算

const clock = new THREE.Clock()
const raycaster = new THREE.Raycaster()
function renderLoop() {
    renderer.render(scene, camera)
    // 4. 渲染 2D 物体
    css2dRenderer.render(scene, camera)

    const elapsed = clock.getElapsedTime();
    moon.position.set(Math.cos(elapsed) * 4, 0, -Math.sin(elapsed) * 4) // 逆时针(z 轴负数即可)
    // moon.position.set(Math.cos(elapsed) * 4, 0, Math.sin(elapsed) * 4); // 顺时针

    // 5. 检测射线的碰撞
    // 目的：标签绕到物体后面去不应该显示了
    // 思路：计算 2d 物体和摄像机距离以及是否穿越了其他物体实现这个目的
    // 区别：这次是直接用一个坐标点（标签坐标）而不是鼠标交互的屏幕坐标与摄像机连线计算

    // 克隆下标签原始的世界坐标值（因为一会儿规范化设备坐标后会影响 zgLabel.position 的所有使用地方的值）
    const chinaPosition = zgLabel.position.clone();

    // 计算出标签物体，跟摄像机的距离（世界坐标值）
    const labelDistance = chinaPosition.distanceTo(camera.position);

    // 把中国 2d 物体的向量坐标从世界坐标，投影到相机的规范化设备坐标（NDC）空间
    // 会影响物体在世界空间中的 position 值（只有 -1 到 1 的有效范围了，position 设置一万都超不出 -1 到 1）
    // 转换 2d 标签物体坐标
    chinaPosition.project(camera);
    // 传给光线投射
    raycaster.setFromCamera(chinaPosition, camera);

    // 收集穿过物体集合
    const intersects = raycaster.intersectObjects(scene.children, true)
    // 如果没有碰撞到任何物体，那么让标签显示（证明标签和摄像机之间没有任何物体）
    if (intersects.length == 0) {
        zgLabel.visible = true
    } else {
        // 光线投射获取到的最近距离物体的，距离值
        const minDistance = intersects[0].distance;
        // 如果最近的物体比标签物体还近，也要让标签消失
        if (minDistance < labelDistance) {
            zgLabel.visible = false
        } else {
            zgLabel.visible = true
        }
    }

    requestAnimationFrame(renderLoop)
}
renderLoop()

9、完整代码

import * as THREE from 'three'
import { OrbitControls } from '../../js/jsm/controls/OrbitControls.js'
// 目标：CSS2D 渲染器使用
// 作用：把原生 DOM 标签转换成 three.js 的 2d 物体显示
// 注意：转换后的 2d 物体只能使用 position 位置属性，没有旋转和缩放，也没有几何图形和材质对象
// 原理：渲染器是覆盖在 canvas 上的一层透明 div，依赖 css 的 transform 样式进行位移等

// 1. 引入 CSS2D 渲染器和创建物体的构造函数
import { CSS2DObject, CSS2DRenderer } from '../../js/jsm/renderers/CSS2DRenderer.js'

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(0, 2.5, -5)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

// const axesHelper = new THREE.AxesHelper(5)
// scene.add(axesHelper)

// 补充：创建光
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(0, 0, 1);
scene.add(dirLight);
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

// 补充：地球和月球
const textureLoader = new THREE.TextureLoader();

const earthGeometry = new THREE.SphereGeometry(1, 16, 16);
const earthMaterial = new THREE.MeshPhongMaterial({
    specular: 0x333333,
    shininess: 5,
    map: textureLoader.load("../image/planets/earth_atmos_2048.jpg"),
    specularMap: textureLoader.load("../image/planets/earth_specular_2048.jpg"),
    normalMap: textureLoader.load("../image/planets/earth_normal_2048.jpg"),
    normalScale: new THREE.Vector2(0.85, 0.85),
});

const earth = new THREE.Mesh(earthGeometry, earthMaterial);
earth.name = 'earth'
scene.add(earth);

const moonGeometry = new THREE.SphereGeometry(0.5, 16, 16);
const moonMaterial = new THREE.MeshPhongMaterial({
    shininess: 5,
    map: textureLoader.load("../image/planets/moon_1024.jpg"),
});
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.x = 4;
moon.name = 'moon'
scene.add(moon);


// 2. 创建 2D 渲染器
const css2dRenderer = new CSS2DRenderer()
css2dRenderer.setSize(window.innerWidth, window.innerHeight)
css2dRenderer.domElement.style.position = 'fixed'
css2dRenderer.domElement.style.left = 0
css2dRenderer.domElement.style.top = 0
css2dRenderer.domElement.style.zIndex = 1
// 问题：2D 渲染器 DOM 挡住了轨道控制器要监听的 canvas 画布，发现鼠标无法触发轨道控制器影响相机移动了
// 解决1：把轨道控制器监听的 DOM 改成 2D 渲染器的 DOM
// 解决2：让 2D 渲染器的 DOM 不交互任何鼠标事件，让鼠标可以摸到后面一层的 canvas 标签
css2dRenderer.domElement.style.pointerEvents = 'none'
document.body.appendChild(css2dRenderer.domElement)

// 3. 创建 2d 物体
// 先创建原生 DOM 标签（无需自己添加到 dom 上，因为一会儿会被 three.js 添加到 2d 渲染器的容器 div 中）
const earthDiv = document.createElement('div')
earthDiv.style.color = 'white'
earthDiv.innerHTML = '地球'
// 转换 2D 物体
const earthLabel = new CSS2DObject(earthDiv)
earthLabel.position.set(0, 1, 0)
earthLabel.name = 'earthLabel'
earth.add(earthLabel)


// 月球的说明 DOM
const moonDiv = document.createElement('div')
moonDiv.style.color = 'white'
moonDiv.innerHTML = '月球'
// 转换 2D 物体
const moonLabel = new CSS2DObject(moonDiv)
moonLabel.position.set(0, 1, 0)
moonLabel.name = 'moonLabel'
moon.add(moonLabel)

// 中国标记
const zgDiv = document.createElement('div')
zgDiv.style.color = 'white'
zgDiv.innerHTML = '中国'
zgDiv.style.fontSize = '12px'
// 转换 2D 物体
const zgLabel = new CSS2DObject(zgDiv)
// -0.2 的原因是父级物体旋转了 180 度
zgLabel.position.set(-0.3, 0.5, -0.9)
zgLabel.name = 'zgLabel'
earth.add(zgLabel)

// 补充：适配
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    css2dRenderer.setSize(window.innerWidth, window.innerHeight)
})

// 补充：月球旋转
const clock = new THREE.Clock()
const raycaster = new THREE.Raycaster()
function renderLoop() {
    renderer.render(scene, camera)
    // 4. 渲染 2D 物体
    css2dRenderer.render(scene, camera)

    const elapsed = clock.getElapsedTime();
    moon.position.set(Math.cos(elapsed) * 4, 0, -Math.sin(elapsed) * 4) // 逆时针(z 轴负数即可)
    // moon.position.set(Math.cos(elapsed) * 4, 0, Math.sin(elapsed) * 4); // 顺时针

    // 5. 检测射线的碰撞
    // 目的：标签绕到物体后面去不应该显示了
    // 思路：计算 2d 物体和摄像机距离以及是否穿越了其他物体实现这个目的
    // 区别：这次是直接用一个坐标点（标签坐标）而不是鼠标交互的屏幕坐标与摄像机连线计算

    // 克隆下标签原始的世界坐标值（因为一会儿规范化设备坐标后会影响 zgLabel.position 的所有使用地方的值）
    const chinaPosition = zgLabel.position.clone();

    // 计算出标签物体，跟摄像机的距离（世界坐标值）
    const labelDistance = chinaPosition.distanceTo(camera.position);

    // 把中国 2d 物体的向量坐标从世界坐标，投影到相机的规范化设备坐标（NDC）空间
    // 会影响物体在世界空间中的 position 值（只有 -1 到 1 的有效范围了，position 设置一万都超不出 -1 到 1）
    // 转换 2d 标签物体坐标
    chinaPosition.project(camera);
    // 传给光线投射
    raycaster.setFromCamera(chinaPosition, camera);

    // 收集穿过物体集合
    const intersects = raycaster.intersectObjects(scene.children, true)
    // 如果没有碰撞到任何物体，那么让标签显示（证明标签和摄像机之间没有任何物体）
    if (intersects.length == 0) {
        zgLabel.visible = true
    } else {
        // 光线投射获取到的最近距离物体的，距离值
        const minDistance = intersects[0].distance;
        // 如果最近的物体比标签物体还近，也要让标签消失
        if (minDistance < labelDistance) {
            zgLabel.visible = false
        } else {
            zgLabel.visible = true
        }
    }

    requestAnimationFrame(renderLoop)
}
renderLoop()

// 坑点：旋转物体会改变他的坐标系朝向（不能看世界坐标系相对旋转觉得，而是要给物体加物体坐标系）

Three CSS2D 渲染器月球绕地球旋转

CSS2DRenderer(CSS 2D渲染器)

构造函数

方法

使用CSS2DRenderer

一、创建HTML标签

二、创建场景Scene

网站公告

今日签到

热门文章

最新发布

Three CSS2D 渲染器 月球绕地球旋转

CSS2DRenderer(CSS 2D渲染器)

构造函数

方法

使用CSS2DRenderer

一、创建HTML标签

二、创建场景Scene

网站公告

今日签到

热门文章

最新发布

Three CSS2D 渲染器月球绕地球旋转