SOURCE

let scene = new THREE.Scene();
const con = document.querySelector('#container');
const { offsetWidth = 500, offsetHeight = 500 } = con;
let light, // 灯光
    camera, // 摄像机
    controls, // 控制器
    renderer, // 渲染器
    spriteGroup, // 精灵组
    spriteGroup1, // 精灵组
    // 基础网格材质
    sphereMaterail = new THREE.MeshBasicMaterial({
    color: 'red',
    transparent: true,
    }),
    tips, // 弹窗
    spriteName = '测试点位', // 弹窗标识
    // tips位置
    x = -45.3786322886545,
    y = 71.73758986781166,
    z = 35.29943669953346;

// CAMERA
camera = new THREE.PerspectiveCamera(60, offsetWidth / offsetHeight, 0.1, 800000);
camera.position.set(-35.26487731933594, 15.26487731933594, 535.26487731933594);

// 坐标轴
const axesHelper = new THREE.AxesHelper( 700 );
// scene.add( axesHelper );

// LIGHTS
light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0.32, 0.39, 0.7);
light.castShadow = true; // default false
scene.add(light);

// RENDERER
renderer = new THREE.WebGLRenderer({
    // canvas: id,
    antialias: true,
    precision: 'highp',
    logarithmicDepthBuffer: true,
    alpha: true,
    logarithmicDepthBuffer: true,
    // precision: 'lowp',
    preserveDrawingBuffer: true,
    autoClear: true,
});
renderer.setClearAlpha(0.01);
renderer.setClearColor(0x333333, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(offsetWidth, offsetHeight);
renderer.autoClear = false;
renderer.shadowMapEnabled = true;
con.appendChild(renderer.domElement);

// 球
const geometry1 = new THREE.SphereGeometry(200, 32, 16);
const material1 = new THREE.MeshBasicMaterial({
    name: 'circle',
    color: 0x808080,
});
const sphere = new THREE.Mesh(geometry1, material1);
// scene.add(sphere);

let boxHelper = new THREE.BoxHelper(sphere, 0x000000);
scene.add(boxHelper);

// 控制器
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
controls.update();

window.addEventListener('resize', render);

const geometry = new THREE.BoxGeometry(100, 100, 500);
const material = new THREE.MeshBasicMaterial({ color: 0x808080 });
const cube = new THREE.Mesh(geometry, material);
// scene.add( cube );

// 精灵组
spriteGroup = new THREE.Group();
scene.add(spriteGroup);

function render() {
    renderer.clear();
    renderer.setSize(offsetWidth, offsetHeight);
    renderer.render(scene, camera);
}

<div id="container"></div>

* {
    margin: 0;
    padding: 0;
}
html,
body {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
}
#container {
    width: 95%;
    height: 95%;
}
    /* 信息窗体 */
.tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    z-index: -10000000;
    width: 200px;
    height: 224px;
    /* border: 1px solid rgba(164, 220, 132); */
}
.tips .stick {
    width: 10px;
    height: 100px;
    border-radius: 5px;
    background-color: red;
}
    /* 点位 */
.button {
    position: absolute;
    z-index: -10000000;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: blue;
}