main.js

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import GUI from 'lil-gui'
import Stats from 'three/examples/jsm/libs/stats.module.js'
import gsap from 'gsap'



//define obj
const debugObj = {
    color: 0x584928,
    position: 0,
    num:100,
    speed: 0.02,
    spin:()=>{gsap.to(cube.rotation,{z:cube.rotation.z+Math.PI*2})},
    isColorful:false
}
//define windowsize
const windowSize = {
    width: window.innerWidth,
    height: window.innerHeight
}
// resize window
window.addEventListener('resize', () => {
    windowSize.width = window.innerWidth
    windowSize.height = window.innerHeight
    camera.aspect = windowSize.width / windowSize.height
    camera.updateProjectionMatrix()
    renderer.setSize(windowSize.width, windowSize.height)
})
// set fullscreen
window.addEventListener('dblclick', () => {
    const fullscreen = document.fullscreenElement || document.webkitFullscreenElement
    if (!fullscreen) {
        if (renderer.domElement.requestFullscreen) {
            renderer.domElement.requestFullscreen()
        } else {
            renderer.domElement.webkitRequestFullscreen()
        }

    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen()
        } else {
            document.webkitExitFullscreen()
        }
    }

})


//add scene ,camera and renderer
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, windowSize.width / windowSize.height, 0.1, 1500)
camera.position.y = 5
camera.lookAt(0, 0, 0)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(windowSize.width, windowSize.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))//fix 锯齿
document.body.appendChild(renderer.domElement)

//create a bufferGeometry to replace the previous geometry
// const positionArray = new Float32Array([0,0,0,0,1,0,1,0,0])
// const bufferAttribute = new THREE.BufferAttribute(positionArray,3)
// const bufferGeometry = new THREE.BufferGeometry()
// bufferGeometry.setAttribute("position",bufferAttribute)

// create a wonderful buffer geometry
let positionsArray = new Float32Array(debugObj.num * 3 * 3)
for (let i = 0; i < debugObj.num * 3 * 3; i++) {
    positionsArray[i] = (Math.random() - 0.5) * 2
}
let geometryAttribute = new THREE.BufferAttribute(positionsArray, 3)
let bufferGeometry = new THREE.BufferGeometry()
bufferGeometry.setAttribute('position', geometryAttribute)

//add geometry ,material and mesh
// const geometry = new THREE.BoxGeometry(1, 2, 4,2,2,2)
const material = new THREE.MeshBasicMaterial({ color: debugObj.color ,wireframe:true})
const cube = new THREE.Mesh(bufferGeometry, material)
scene.add(cube)

//add controls
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

//add stats
const stats = new Stats()
document.body.appendChild(stats.domElement)

//add gui
/**
 * 
 */
const gui = new GUI({title:"nice ui",width:300,closeFolders:true})
const guiGroup = gui.addFolder('test') 
guiGroup.close()
guiGroup.addColor(debugObj, "color").onChange((v)=>{material.color.set(v)})
guiGroup.add(cube.position, "y").min(-5).max(5).step(0.01).name('y_position')
guiGroup.add(debugObj, "speed", 0, 0.5, 0.001)
guiGroup.add(cube, 'visible')
guiGroup.add(material, "wireframe")
guiGroup.add(debugObj, 'num').min(50).max(500).step(10).onFinishChange(v=>{
    positionsArray = new Float32Array(v * 3 * 3)
    for (let i = 0; i < v * 3 * 3; i++) {
        positionsArray[i] = (Math.random() - 0.5) * 2
    }
    geometryAttribute = new THREE.BufferAttribute(positionsArray, 3)
    bufferGeometry.setAttribute('position', geometryAttribute)
})
guiGroup.add(debugObj,"spin")
guiGroup.add(debugObj,'isColorful')
window.addEventListener('keydown',(e)=>{
    if(e.key=='h'){
        gui.show(gui._hidden)
    }
})

// random color
function randomColor(){
    const colorsArray = [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']
    function s (){
        const c = Math.floor(Math.random()*16)
        return colorsArray[c]
    }
    return parseInt(`${s()}${s()}${s()}${s()}${s()}${s()}`, 16);
}

//settimeout
let count = 0
//animation function
function animation() {
    requestAnimationFrame(animation)
    renderer.render(scene, camera)
    count++
    if(debugObj.isColorful&&(count%100==0)){
        material.color.set(randomColor())
    }
    cube.rotation.z += debugObj.speed
    controls.update()
    stats.update()

}
animation()