介绍

这次课将学习如何将HTML集成到场景中去——即一个交互式的HTML元素跟随场景中的3D位置而变化，看起来就像嵌在WebGL中一般。

初始设置

采用上一节教的带有进度条的加载动画，并且使用头盔模型。

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { gsap } from 'gsap'

/**
 * Loaders
 */
const loadingBarElement = document.querySelector('.loading-bar')
const loadingManager = new THREE.LoadingManager(
    // Loaded
    () =>
    {
        // Wait a little
        window.setTimeout(() =>
        {
            // Animate overlay
            gsap.to(overlayMaterial.uniforms.uAlpha, { duration: 3, value: 0, delay: 1 })

            // Update loadingBarElement
            loadingBarElement.classList.add('ended')
            loadingBarElement.style.transform = ''
        }, 500)
    },

    // Progress
    (itemUrl, itemsLoaded, itemsTotal) =>
    {
        // Calculate the progress and update the loadingBarElement
        const progressRatio = itemsLoaded / itemsTotal
        loadingBarElement.style.transform = `scaleX(${progressRatio})`
    }
)
const gltfLoader = new GLTFLoader(loadingManager)
const cubeTextureLoader = new THREE.CubeTextureLoader(loadingManager)

/**
 * Base
 */
// Debug
const debugObject = {}

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Overlay
 */
const overlayGeometry = new THREE.PlaneBufferGeometry(2, 2, 1, 1)
const overlayMaterial = new THREE.ShaderMaterial({
    // wireframe: true,
    transparent: true,
    uniforms:
    {
        uAlpha: { value: 1 }
    },
    vertexShader: `
        void main()
        {
            gl_Position = vec4(position, 1.0);
        }
    `,
    fragmentShader: `
        uniform float uAlpha;

        void main()
        {
            gl_FragColor = vec4(0.0, 0.0, 0.0, uAlpha);
        }
    `
})
const overlay = new THREE.Mesh(overlayGeometry, overlayMaterial)
scene.add(overlay)

/**
 * Update all materials
 */
const updateAllMaterials = () =>
{
    scene.traverse((child) =>
    {
        if(child instanceof THREE.Mesh && child.material instanceof THREE.MeshStandardMaterial)
        {
            // child.material.envMap = environmentMap
            child.material.envMapIntensity = debugObject.envMapIntensity
            child.material.needsUpdate = true
            child.castShadow = true
            child.receiveShadow = true
        }
    })
}

/**
 * Environment map
 */
const environmentMap = cubeTextureLoader.load([
    '/textures/environmentMaps/0/px.jpg',
    '/textures/environmentMaps/0/nx.jpg',
    '/textures/environmentMaps/0/py.jpg',
    '/textures/environmentMaps/0/ny.jpg',
    '/textures/environmentMaps/0/pz.jpg',
    '/textures/environmentMaps/0/nz.jpg'
])

environmentMap.encoding = THREE.sRGBEncoding

scene.background = environmentMap
scene.environment = environmentMap

debugObject.envMapIntensity = 5

/**
 * Models
 */
gltfLoader.load(
    '/models/DamagedHelmet/glTF/DamagedHelmet.gltf',
    (gltf) =>
    {
        gltf.scene.scale.set(2.5, 2.5, 2.5)
        gltf.scene.rotation.y = Math.PI * 0.5
        scene.add(gltf.scene)

        updateAllMaterials()
    }
)

/**
 * Lights
 */
const directionalLight = new THREE.DirectionalLight('#ffffff', 3)
directionalLight.castShadow = true
directionalLight.shadow.camera.far = 15
directionalLight.shadow.mapSize.set(1024, 1024)
directionalLight.shadow.normalBias = 0.05
directionalLight.position.set(0.25, 3, - 2.25)
scene.add(directionalLight)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.set(4, 1, - 4)
scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true
})
renderer.physicallyCorrectLights = true
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ReinhardToneMapping
renderer.toneMappingExposure = 3
renderer.shadowMap.enabled = true
renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */
const tick = () =>
{
    // Update controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208

HTML

首先在html文件添加一个类为point的元素，后面还会继续添加其他点元素point-1、 point-2……这样子。

<canvas class="webgl">canvas>

<div class="loading-bar">div>

<div class="point point-0">
    <div class="label">1div>
    <div class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elitdiv>
div>
1
2
3
4
5
6
7
8

CSS

.point
{
    position: absolute;
    top: 50%;
    left: 50%;
}

.point .label
{
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #00000077;
    border: 1px solid #ffffff77;
    color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    line-height: 40px;
    font-weight: 100;
    font-size: 14px;
    cursor: help;
}

.point .text
{
    position: absolute;
    top: 30px;
    left: -120px;
    width: 200px;
    padding: 20px;
    border-radius: 4px;
    background: #00000077;
    border: 1px solid #ffffff77;
    color: #ffffff;
    line-height: 1.3em;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.point:hover .text
{
    opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

添加样式，达成下图效果：

由于后边还要通过缩放隐藏这些点元素，因此要给它们一个样式来控制在页面中的缩放达成显隐，修改css如下：

.point .label
{
    /* ... */
    transform: scale(0, 0);
    transition: transform 0.3s;
}

.point.visible .label
{
    transform: scale(1, 1);
}
1
2
3
4
5
6
7
8
9
10
11

元素要想显示就加上样式：

<div class="point point-0 visible">
1

JavaScript

存储点元素

使用数组来存储页面上的点元素，每个数组元素对象有两个属性：

• position：用来存放3D位置坐标
• element: 从HTML获取对应点元素的节点

const points = [
    {
        position: new THREE.Vector3(1.55, 0.3, - 0.6),
        element: document.querySelector('.point-0')
    }
]
1
2
3
4
5
6

更新点位置

我们要在tick函数中直接更新每个帧上的点元素节点。

const tick = () =>
{
    // Update controls
    controls.update()

    // 遍历每个点
    for(const point of points)
    {

    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13

我们需要根据场景中点的3D坐标来获取点在屏幕上的二维坐标。

第一步，使用clone()方法克隆点的位置得到screenPosition，再对screenPosition调用project(...) 方法并传入摄像机camera作为参数：

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        console.log(screenPosition.x)
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

打印该点的x坐标，可以看到其值非常接近于0。按住右键把头盔拖往屏幕左侧，值将接近-1，拖往屏幕右侧，值将接近+1。

接下去要把这个坐标转换成像素值，因为要根据像素值去改变页面元素的位置。
要把场景中的点坐标转换为屏幕中的像素，需要乘以渲染器尺寸的一半：

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        const translateX = screenPosition.x * sizes.width * 0.5
        console.log(translateX)
    }

    // ...
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

更新元素的transform属性，在x轴上平移了translateX个像素：

for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        const translateX = screenPosition.x * sizes.width * 0.5
        point.element.style.transform = `translateX(${translateX}px)`
    }

1
2
3
4
5
6
7
8
9

y轴同理，但是要注意的是在css中，y轴下方代表正值，而在Three.js中则是普通的坐标系y轴上方代表正值，因此translateY要取反：

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        const translateX = screenPosition.x * sizes.width * 0.5
        const translateY = - screenPosition.y * sizes.height * 0.5
        point.element.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

点的显隐

当有东西挡住该点在场景中的3D坐标时，元素应该隐藏起来。

先移除元素的visible样式类。之后，为了测试点的前面是否有东西，我们将使用光线投射Raycaster。
我们将从摄像机发射一条射线到对应点，如果没有东西与射线相交，则显示该点；若有东西与射线相交，则计算与该交点的距离，如果交点比点元素距离更远，则说明点元素在交点前面，继续显示，如果交点离摄像机距离更近，则说明点元素被覆盖住了，要移除visible样式将点给隐藏起来。

在tick函数外部实例化光线投射，然后在函数内部更新raycaster。
要让射线从摄像机发射到对应点，需要调用setFromCamera(...)方法，方法第一个参数是对应点在屏幕上的二维坐标，第二个参数则是射线来源的相机。
在这里，虽然screenPosition是一个Vector3，但是我们只用到他的x和y属性：

const raycaster = new THREE.Raycaster()
// ...
const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        raycaster.setFromCamera(screenPosition, camera)

        // ...
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用intersectObject(...)方法来检查与射线相交的物体，这里要传入俩个参数，第一个是scene.children，场景中所有物体，第二个参数为true代表开启递归测试，会递归遍历物体的子代。

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        raycaster.setFromCamera(screenPosition, camera)
        const intersects = raycaster.intersectObjects(scene.children, true)

        // ...
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

先判断射线是否有相交物体，没有的话则添加visible类显示该点，若有相交物体，再做后续其他判断：

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        raycaster.setFromCamera(screenPosition, camera)
        const intersects = raycaster.intersectObjects(scene.children, true)

        if(intersects.length === 0)
        {
            point.element.classList.add('visible')
        }
        else
        {
            
        }

        // ...
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

intersectObjects(...)方法会返回一个相交对象数组，这些对象会按照距离排序，这也就意味着我们无需去测试全部相交对象，只需要测试第一个便可，通过distance属性获取距离值。
然后通过distanceTo(...)方法传入相机位置，获取点元素到相机的距离值。
接着比较两个值大小，决定点元素的显隐：

const tick = () =>
{
    // ...

    for(const point of points)
    {
        const screenPosition = point.position.clone()
        screenPosition.project(camera)

        raycaster.setFromCamera(screenPosition, camera)
        const intersects = raycaster.intersectObjects(scene.children, true)

        if(intersects.length === 0)
        {
            point.element.classList.add('visible')
        }
        else
        {
            const intersectionDistance = intersects[0].distance
            const pointDistance = point.position.distanceTo(camera.position)
			if(intersectionDistance < pointDistance)
            {
                point.element.classList.remove('visible')
            }
            else
            {
                point.element.classList.add('visible')
            }
        }

        // ...
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

现在已经可以说是几乎完成了，但是在页面刷新加载进度条时，场景尚未加载完毕，但那些点元素是显示着的。
要解决这个问题很简单，设置一个值为false的变量，然后在tick函数中使用。只有当资源加载完毕后，再设为true，去更新点元素坐标：

let sceneReady = false
const loadingManager = new THREE.LoadingManager(
    // Loaded
    () =>
    {
        // ...

        window.setTimeout(() =>
        {
            sceneReady = true
        }, 2000)
    },

    // ...
)

// ...

const tick = () =>
{
    // ...

    if(sceneReady)
    {
        for(const point of points)
        {
            // ...
        }
    }

    // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

现在可以去增加其他点元素节点并在js中设置它们的坐标了：

<div class="point point-0">
    <div class="label">1div>
    <div class="text">Front and top screen with HUD aggregating terrain and battle informations.div>
div>
<div class="point point-1">
    <div class="label">2div>
    <div class="text">Ventilation with air purifier and detection of environment toxicity.div>
div>
<div class="point point-2">
    <div class="label">3div>
    <div class="text">Cameras supporting night vision and heat vision with automatic adjustment.div>
div>
1
2
3
4
5
6
7
8
9
10
11
12

const points = [
    {
        position: new THREE.Vector3(1.55, 0.3, - 0.6),
        element: document.querySelector('.point-0')
    },
    {
        position: new THREE.Vector3(0.5, 0.8, - 1.6),
        element: document.querySelector('.point-1')
    },
    {
        position: new THREE.Vector3(1.6, - 1.3, - 0.7),
        element: document.querySelector('.point-2')
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

最终效果