ThreeJS-3D教学十一：屏幕坐标和世界坐标转换_three.js实现屏幕坐标转化为模型的世界坐标-CSDN博客

本文链接：https://blog.csdn.net/weixin_44384273/article/details/135594549

文章详细介绍了如何在HTML、CSS和JavaScript中使用Three.js库进行3D图形渲染，包括坐标系之间的转换，如局部坐标到世界坐标，以及如何利用OrbitControls和GPUStatsPanel进行交互和性能监控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!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 =