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
}