threejs基本使用方法

1、基本使用案例
使用threejs，必须保证电脑有显卡，要不极大可能画面加载不出，而且报错。

import * as THREE from "three";
//有些功能需要单独引入，如下：
//1、轨道控制器，可以使得相机围绕目标进行轨道运动。
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
//2、第一人称控制器
import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';
//3、用于载入glTF 2.0资源的加载器。
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

//threejs初始化
this.container = document.getElementById("container");

init：function(){
	//创建场景
	this.scene = new THREE.Scene()
    this.scene.background = new THREE.Color(0xFFFFFF)//设置场景颜色
    //添加世界坐标，辅助开发
    this.scene.add(new THREE.AxesHelper(100))
    //创建灯光
    this.scene.add(this.ambLigthFun())
    this.scene.add(this.dirLigthFun())
	//创建相机
    this.camera =this.cameraFun()
    //添加模型
    this.scene.add(this.createMesh())
    //创建渲染器对象
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio( window.devicePixelRatio );
    this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
    this.container.appendChild(this.renderer.domElement);
    //创建控件对象
    this.controls =this.controlsFun()
    //执行threejs的动画效果，也可以使用requestAnimationFrame()。使用requestAnimationFrame()可以让动画更流畅，大约每16.7ms调用一次，电脑性能不好就会越来越卡顿。所以对于性能不好的电脑，还是建议使用setInterval()，渲染次数也不要太过频繁。
	this.timer =setInterval(()=>{
		this.renderFun()
	},5000)
	window.addEventListener( 'resize', this.onDomResize );
}
//创建环境光
ambLigthFun:function(){
	let light = new THREE.AmbientLight(0xffffff,0.8)
 	return light
},
//创建平行光
dirLigthFun:function(){
	let light = new THREE.DirectionalLight(0xffffff,0.3)
	light.position.set(100,100,100)
	return light
},
//创建相机
cameraFun:function(){
	let camera = new THREE.PerspectiveCamera(75,this.container.clientWidth / this.container.clientHeight,0.1,1000)
    camera.position.x =0
    camera.position.z =0
    camera.position.y =280
    return camera
},
//创建控件对象
controlsFun:function(){
	let controls = new OrbitControls(this.camera, this.renderer.domElement);
	controls.addEventListener('change',this.renderFun)
	controls.minDiatance = 1
	controls.maxDistance =700
	controls.minPolarAngle =0
	controls.maxPolarAngle =Math.PI/2
	controls.update()
	return controls
},
//执行渲染操作
renderFun: function() {
	this.renderer.render(this.scene, this.camera);
},
//适配窗口大小
onDomResize(){
	if(this.camera){
		this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
		this.camera.updateProjectionMatrix();
	}
	this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
},
createMesh: function(){
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    return mesh
}