Three 笔记

一：常用函数封装

1、实例化three 场景、相机、渲染器

import * as THREE from 'three';/*** 实例化three 场景、相机、渲染器* @param container: dom容器 * @param fov: 视野角度 * @param near: 相机视锥体近裁截面相对相机的距离 * @param far: 相机视锥体远裁截面相对相机的距离* @param bgColor: 背景色 bgOpacity: 背景透明度*/
export const initThree = ({container, fov=75, near=0.1, far=1000, bgColor=0x444444, bgOpacity='1.0'}) => {const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(fov, container.clientWidth / container.clientHeight, near, far);const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(container.clientWidth, container.clientHeight);container.appendChild(renderer.domElement);renderer.setClearColor(bgColor, bgOpacity);renderer.render(scene, camera);return {scene, camera, renderer}
}

2、添加辅助坐标系

/*** 添加辅助观察坐标系* @param {*} scene */
export const addAxesHelper = (scene) => {const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);
};

3、添加地平线网格

/*** 添加地平线网格* @param {*} scene */
export const addGridHelper = (scene) => {const gridHelper = new THREE.GridHelper(100, 100);scene.add(gridHelper);
};

4、添加轨道控制器

/*** 添加轨道控制器* @param {*} camera * @param {*} renderer */
export const addOrbitControls = (camera, renderer) => {let controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.05;controls.screenSpacePanning = false;controls.minDistance = 1;controls.maxDistance = 1000;return controls;
};

5、添加循环动画

/*** 循环动画* @param {*} controls * @param {*} renderer * @param {*} camera * @param {*} scene */
export const animate = (controls, renderer, camera, scene) => {requestAnimationFrame(animate);controls.update();renderer.render(scene, camera);
};