Threejs使用问题总结(持续更新)

threejs大概的使用流程就是首先需要一个场景，场景中可能需要加一些光源等属性，然后再添加一个相机，调整拍照的视角等等，最后使用渲染器渲染出3D图像。其实你仔细想一下和生活中我们拍照是一样的，拍照首先得找个好看的地方作为背景，背景中可能有树、草、蓝天、阳光等这就是场景。而拍照的人就像你在场景中绘制了一个球体，最后我们使用手机的相机拍照，然后照片就出来了。

FAQ&常见问题

1. new THREE.TextureLoader().load()加载本地图片显示跨域等报错？

   尝试启动一个服务器，例如node服务去加载html文件

2. 如何获取场景中某个元素进行点击操作？

通过 THREE.Raycaster
raycaster.setFromCamera(mouse, camera);

raycaster.intersectObjects([scene.children], true) // 设为true表示是否需要穿透

3. 如何点击不同标志进行弹窗弹出不同内容？

在threejs中无论是Mesh还是什么元素，它都是一个构造函数，所以可以直接在构造函数上挂在你想要携带的数据。

4. 如何拖拽转动？

可以引入控制器，import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

5. 如何制作飞线效果?

6. 如何在地球上画一个点心圆标志？

let groupPoint = new THREE.Group();

let geometryLine = new THREE.Geometry();
let arc = new THREE.ArcCurve(0, 0, r, 0, 2 * Math.PI);
let points = arc.getPoints(40);

let spherical = new THREE.Spherical();

spherical.setFromCartesianCoords(pos.x, pos.y, pos.z);

geometryLine.setFromPoints(points);

let LineMateri = new THREE.LineBasicMaterial({ color: dotColor });
let line = new THREE.Line(geometryLine, LineMateri);

let shapePoint = new THREE.Shape();

shapePoint.absarc(0, 0, r - 1, 0, 2 * Math.PI, false);

let arcGeometry = new THREE.ShapeGeometry(shapePoint);
let arcMaterial = new THREE.MeshBasicMaterial({ color: realColor });
let point = new THREE.Mesh(arcGeometry, arcMaterial);

point.markPos = markingItem;

groupPoint.add(line);
groupPoint.add(point);

7. 你可能会遇到如何旋转到球面的问题？

可以使用四元矩阵去进行去旋转。

8. 场景中坐标系是怎样的？

9. 如何获取三维坐标系中的坐标点？

// 第三个参数为地球半径

function getPosition(longitude, latitude, radius) {
    let lg = THREE.Math.degToRad(longitude);
    let lt = THREE.Math.degToRad(latitude);
    let temp = radius * Math.cos(lt);
    let x = temp * Math.sin(lg);
    let y = radius * Math.sin(lt);
    let z = temp * Math.cos(lg);

    return {
        x: x,
        y: y,
        z: z
    };
}

10. 当遇到OrbitControls不存在THREE的属性上的报错？

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

因为threejs的核心包是不包含控制器文件的，可以引入它示例中的文件

11. 同层级闪烁问题

mesh.material.depthTest = false;
mesh.renderOrder = 2; // 和css 设置z-index一样