ThreeJS-3D教学十一：屏幕坐标和世界坐标转换_threejs 世界坐标详解

作者：我家小花儿 | 2024-03-22 11:09:21

踩

threejs 世界坐标详解

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      width: 100%;
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
    }
    .label {
      font-size: 20px;
      color: #000;
      font-weight: 700;
    }
    .circle {
      width: 20px;
      height: 20px;
      border-radius: 10px;
      position: absolute;
      left: 0;
      top: 0;
      background-color: red;
      z-index: 1000;
    }
    #container {
      position: relative;
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
<div class="circle"></div>
<div id="container"></div>
<script type="importmap">
  {
    "imports": {
      "three": "../three-155/build/three.module.js",
      "three/addons/": "../three-155/examples/jsm/"
    }
  }
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GPUStatsPanel } from 'three/addons/utils/GPUStatsPanel.js';
import { CSS2DRenderer, CSS2DObject } from 'three/addons/renderers/CSS2DRenderer.js';
let stats, labelRenderer, gpuPanel, temporaryKeep;
let camera, scene, renderer, controls, cubeBox;
const group = new THREE.Group();
let widthImg = 200;
let heightImg = 200;
const mouse = new THREE.Vector2();
init();
initHelp();
initLight();
axesHelperWord();
animate();
// 添加平面
addPlane();
// 用这个模型演示 世界坐标 转为 屏幕坐标
let point = new THREE.Vector3(-40, 20, 30);
let geometry = new THREE.BoxGeometry(2, 2, 2);
let material = new THREE.MeshLambertMaterial({color: 0xccc000});
let cube = new THREE.Mesh(geometry, material);
cube.position.x = point.x;
cube.position.y = point.y;
cube.position.z = point.z;
cube.name = 'BoxGeometry';
scene.add(cube);
// 这个演示 屏幕坐标转为世界坐标
let geometry2 = new THREE.BoxGeometry(2, 2, 2);
let material2 = new THREE.MeshLambertMaterial({color: 0x000000});
cubeBox= new THREE.Mesh(geometry2, material2);
cubeBox.name = 'BoxGeometry2';
scene.add(cubeBox);

/**
 * CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer)
 radiusTop—顶部圆柱体的半径。默认值为1。
 radiusBottom—底部圆柱体的半径。默认值为1。
 height——圆柱体的高度。默认值为1。
 radialSegments—圆柱体圆周上的分段面数。默认值为32
 heightSegments—沿圆柱体高度的面行数。默认值为1。
 */
let geometry1 = new THREE.CylinderGeometry(15, 15, 10, 32, 1);
let material1 = new THREE.MeshLambertMaterial({color: 0xffff00});
let cylinder = new THREE.Mesh(geometry1, material1);
cylinder.position.set(30, 5, -50);
cylinder.name = 'CylinderGeometry';
scene.add(cylinder);

setTimeout(() => {
  point3DT2D();
}, 300);

function point3DT2D() {
  // 下面就是世界坐标转为屏幕坐标的代码
  let worldVector = new THREE.Vector3(point.x, point.y, point.z);
  // 世界坐标转标准设备坐标
  // 官方释义：将此矢量从世界空间投影到相机的标准化设备坐标（NDC）空间中。
  let standardVector = worldVector.project(camera); 
  // canvas画布的宽高尺寸
  let container = document.querySelector('#container');
  if (!container) return;
  let cavWidth = container.offsetWidth / 2;
  let cavHeight = container.offsetHeight / 2;
  console.log(standardVector);
  let x = Math.round(standardVector.x * cavWidth + cavWidth); // 设备坐标转屏幕坐标
  let y = Math.round(-standardVector.y * cavHeight + cavHeight); // 设备坐标转屏幕坐标
  /**
   * 更新立方体元素位置
   */
  console.log(x);
  console.log(y);
  let box = document.querySelector('.circle');
  box.style.left = x + 'px';
  box.style.top = y + 'px';
}

function onDocumentMouseMove(event) {

  event.preventDefault();

  // 将鼠标点击位置的屏幕坐标转成threejs中的标准坐标,具体解释见代码释义 如果 canvas有左边距 和 上边距 需 要减去
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // 新建一个三维单位向量 假设z方向就是1 或者 0.5，这个为什么是这样，有知道详情的还请赐教
  // 官方释义：将此矢量从相机的标准化设备坐标（NDC）空间投影到世界空间中。
  const vector = new THREE.Vector3(mouse.x, mouse.y, 0.5).unproject(camera);
  // 将获取的坐标设置为模型的位置
  cubeBox.position.x = vector.x;
  cubeBox.position.y = vector.y;
  cubeBox.position.z = vector.z;
}

function addPlane() {
  // 创建一个平面 PlaneGeometry(width, height, widthSegments, heightSegments)
  const planeGeometry = new THREE.PlaneGeometry(widthImg, heightImg, 1, 1);
  // 创建 Lambert 材质：会对场景中的光源作出反应，但表现为暗淡，而不光亮。
  const planeMaterial = new THREE.MeshPhongMaterial({
    color: 0xb2d3e6,
    side: THREE.DoubleSide
  });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  // 以自身中心为旋转轴，绕 x 轴顺时针旋转 45 度
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.set(0, -4, 0);
  scene.add(plane);
}

function init() {

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 10, 2000 );
  camera.up.set(0, 1, 0);
  camera.position.set(60, 40, 60);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();
  scene.background = new THREE.Color( '#ccc' );

  renderer = new THREE.WebGLRenderer( { antialias: true } );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.getElementById( 'container' ).appendChild( renderer.domElement );

  labelRenderer = new CSS2DRenderer();
  labelRenderer.setSize( window.innerWidth, window.innerHeight );
  labelRenderer.domElement.style.position = 'absolute';
  labelRenderer.domElement.style.top = '0px';
  labelRenderer.domElement.style.left = '0px';
  labelRenderer.domElement.style.pointerEvents = 'none';
  document.getElementById( 'container' ).appendChild( labelRenderer.domElement );

  controls = new OrbitControls( camera, renderer.domElement );
  controls.mouseButtons = {
    LEFT: THREE.MOUSE.PAN,
    MIDDLE: THREE.MOUSE.DOLLY,
    RIGHT: THREE.MOUSE.ROTATE
  };
  controls.enablePan = true;
  // 设置最大最小视距
  controls.minDistance = 20;
  controls.maxDistance = 1000;

  window.addEventListener( 'resize', onWindowResize );

  stats = new Stats();
  stats.setMode(1); // 0: fps, 1: ms
  document.body.appendChild( stats.dom );

  gpuPanel = new GPUStatsPanel( renderer.getContext() );
  stats.addPanel( gpuPanel );
  stats.showPanel( 0 );

  scene.add( group );

  document.addEventListener('click', onDocumentMouseMove, false);
}

function initLight() {
  const light = new THREE.DirectionalLight(new THREE.Color('rgb(253,253,253)'));
  light.position.set(100, 100, -10);
  light.intensity = 3; // 光线强度
  light.castShadow = true; // 是否有阴影
  light.shadow.mapSize.width = 2048; // 阴影像素
  light.shadow.mapSize.height = 2048;
  // 阴影范围
  const d = 80;
  light.shadow.camera.left = -d;
  light.shadow.camera.right = d;
  light.shadow.camera.top = d;
  light.shadow.camera.bottom = -d;
  light.shadow.bias = -0.0005; // 解决条纹阴影的出现
  // 最大可视距和最小可视距
  light.shadow.camera.near = 0.01;
  light.shadow.camera.far = 2000;
  const AmbientLight = new THREE.AmbientLight(new THREE.Color('rgb(255, 255, 255)'));
  scene.add( light );
  scene.add( AmbientLight );
}

function initHelp() {
  // const size = 100;
  // const divisions = 5;
  // const gridHelper = new THREE.GridHelper( size, divisions );
  // scene.add( gridHelper );

  // The X axis is red. The Y axis is green. The Z axis is blue.
  const axesHelper = new THREE.AxesHelper( 100 );
  scene.add( axesHelper );
}

function axesHelperWord() {
  let xP = addWord('X轴');
  let yP = addWord('Y轴');
  let zP = addWord('Z轴');
  xP.position.set(50, 0, 0);
  yP.position.set(0, 50, 0);
  zP.position.set(0, 0, 50);
}

function addWord(word) {
  let name = `<span>${word}</span>`;
  let moonDiv = document.createElement( 'div' );
  moonDiv.className = 'label';
  // moonDiv.textContent = 'Moon';
  // moonDiv.style.marginTop = '-1em';
  moonDiv.innerHTML = name;
  const label = new CSS2DObject( moonDiv );
  group.add( label );
  return label;
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
  requestAnimationFrame( animate );

  stats.update();
  controls.update();
  labelRenderer.render( scene, camera );
  renderer.render( scene, camera );
}
</script>
</body>
</html>

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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278

直接复制上面的代码，将three资源路径修改后，启动即可看到效果
上面是代码实现，以下我们看下一些理论知识点：

坐标系之间的转换关系大致为：

    局部坐标 -> 世界坐标 -> 观察空间坐标 -> 裁剪空间坐标 -> 屏幕空间坐标

    我们将 观察空间坐标系 和 裁剪空间坐标系 之间的转换统一处理，最终得到 标准设备坐标系     
1
2
3

因此坐标转换过程就变成了：

    局部坐标 -> 世界坐标 -> 标准设备坐标 -> 屏幕空间坐标
1

原本世界坐标转换到观察空间坐标需要乘上视图矩阵 CameraMatrixWorldInverse(ViewMatrix)
随后，观察空间坐标转换到裁剪空间坐标需要乘上相机投影矩阵：ProjectMatrix
在 ThreeJS 中有一个方法 Vector3.project(camera) 综合了这两步：

// 这是之前的版本
project( camera ) {
    return this.applyMatrix4( camera.matrixWorldInverse ).applyMatrix4( camera.projectionMatrix );
}
1
2
3
4

最新的是
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/287647