有工具栏进行操作的Cube

荔枝啵啵 2023-08-01 21:14:04

import * as THREE from 'three';
import { OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {gsap} from "gsap";
import * as dat from "dat.gui";
const scene=new THREE.Scene();
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
const gui=new dat.GUI();
camera.position.set(10,10,10 );
scene.add(camera);
const box=new THREE.BoxGeometry(1,1,1);
const material=new THREE.MeshBasicMaterial({color:0x00ff00});

const cube=new THREE.Mesh(box,material);
scene.add(cube);

const renderer=new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

renderer.render(scene,camera);

const controls=new OrbitControls(camera,renderer.domElement);

controls.enableDamping=true;

gui.add(cube.position,"x")
  .min(0).
  max(5)
  .name("Cube X")
  .step(0.01)
  .onChange((val)=>{
    console.log(val)
  }).onFinishChange((val)=>{
    console.log(val)
  })

const params={
  color:0xff0000,
  fun:()=>{
    gsap.to(cube.position,{x:5,duration:5,ease:"bounce.out",yoyo:true,repeat:-1})
  }
}

gui.addColor(params,"color").onChange((val)=>{
  cube.material.color.set(val);
})

gui.add(cube,"visible").name("Cube Visible");

// gui.add(params,'fun').name("Function");

const folder=gui.addFolder('设置立方体');
folder.add(cube.material,"wireframe").name("Wireframe");
folder.add(params,'fun').name("Function");

function render(time){

  // cube.position.x+=0.01;
  // cube.rotation.x+=0.01;
  // if(cube.position.x>10){
  //   cube.position.x=0;
  //   cube.rotation.x=0;
  // }
    controls.update();
    renderer.render(scene,camera);
    requestAnimationFrame(render);
}
// const gs=gsap.to(cube.position,{
//   duration:5,
//   x:10,
//   repeat:-1,
//   yoyo:true,
//   delay:1,
//   ease:"bounce.out"
// })


window.addEventListener("dblclick",()=>{
  // if(gs.isActive()){
  //   gs.pause();
  // }else{
  //   gs.resume();
  // }
  const fullscreen=document.fullscreenElement||document.webkitFullscreenElement;
  if(!fullscreen){
    renderer.domElement.requestFullscreen();
  }
  else{
    document.exitFullscreen();
  }
})

window.addEventListener("resize",()=>{
  camera.aspect=window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth,window.innerHeight);
  renderer.render(scene,camera);
})

const axesHelp=new THREE.AxesHelper(8);
scene.add(axesHelp)
render();