threejs学习系列之三：threejs 开发辅助工具

1.相机控件： OrbitControls

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
    //相机改变事件监听，如果已经设置了帧渲染循环，则不必在controls的change事件中执行渲染操作
    // controls.addEventListener('change', () => {
    //     renderer.render(scene, camera); //执行渲染操作
    // });

2.坐标系辅助观察对象 AxesHelper

const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

3. 网格辅助观察对象GridHelper

const gridHelper = new THREE.GridHelper(500, 20, 0xff0000, 0x0000ff);
scene.add(gridHelper);

4.点光源辅助观察对象 THREE.PointLightHelper

const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

5. 平行光光源辅助观察对象 THREE.DirectionalLightHelper

const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
scene.add(dirLightHelper);

6.聚光光源辅助观察对象 THREE.SpotLightHelper