threeJS常用方法记录

自己记录作为笔记，也分享出来供大家试用。

创建stats对象

import * as THREE from 'three';
//引入性能监视器stats.js,显示帧率
import Stats from 'three/addons/libs/stats.module.js';
//创建stats对象 用于计算帧数
const stats = new Stats();
//Stats.domElement:web页面上输出计算结果,一个div元素
//此命令用于显示帧数
document.body.appendChild(stats.domElement);

三维场景画布

// 三维场景
const scene = new THREE.Scene();
//辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);

渲染器和相机

//渲染器和相机
const width = window.innerWidth;
const height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
camera.position.set(292, 223, 185);
camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

 循环渲染

// 渲染循环
function render() {
    stats.update(); //渲染循环中执行stats.update()来刷新时间
    meshList.forEach(Element => {
       Element.rotateY(0.01);
    });
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
render();

鼠标左键控制物体滑动

import {
    OrbitControls
} from 'three/addons/controls/OrbitControls.js';
//此命令控制滑动
const controls = new OrbitControls(camera, renderer.domElement);
//若没有循环渲染需加入下面方法来监听鼠标，并更新相机
controls.addEventListener('change', function(){
   renderer.render(scene, camera); //执行渲染操作
    // 浏览器控制台查看相机位置变化
    console.log('camera.position',camera.position);
});//监听鼠标、键盘事件

画布随窗口变化

// 画布跟随窗口变化
window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
};

优化抗锯齿

const renderer = new THREE.WebGLRenderer({
    antialias:true,//开启优化锯齿
});

 获取屏幕像素比，以免渲染模糊

renderer.setPixelRatio(window.devicePixelRatio);

guiJS库拖动条

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI();//创建GUI对象 
gui.domElement.style.right = '0px';
gui.domElement.style.width = '300px'

//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
    x: 30,
    y: 60,
    z: 300,
    length:50,
};
// gui界面上增加交互界面，改变obj对应属性
gui.add(obj, 'x', 0, 100);
gui.add(obj, 'y', 0, 50);
gui.add(obj, 'z', 0, 60);
gui.add(obj, 'length',0,50);