别再说你不会three.js了

本节的目的是简要介绍三个.js。我们将首先设置一个场景，使用旋转立方体。页面底部提供了一个工作示例，以防您遇到困难并需要帮助。

先搭建一个Vite脚手架

npm i vite three 下载three

在main.js中写

// 导入轨道控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
// 导入动画库
import gsap from 'gsap'
import './style.css'
console.log(THREE)
const w = window.innerWidth
const h = window.innerHeight 
// 房间 3d 容器 1.创建场景
const scene = new THREE.Scene()
// 创建相机 参数：角度,宽高比,近端,远端
const camera = new THREE.PerspectiveCamera(75,w/h,0.1,100)
// 视角坐标轴位置
camera.position.set(0,0,5)
camera.lookAt(0,0,0)
// 添加物体  立方体
const geometry = new THREE.BoxGeometry(1,1,1)
const material = new THREE.MeshBasicMaterial({color:0x32CD99})
// 根据集合体和材质创建物体
const cube  = new THREE.Mesh(geometry,material)
// 将几何体添加到场景中
scene.add(cube)
const light = new THREE.AmbientLight()
scene.add(light)
// 初始化渲染器
 const renderer = new THREE.WebGLRenderer({antialias:true})
// 设置渲染器尺寸大小
renderer.setSize(w,h)

// 将webgl渲染的canvas内容添加到body
document.body.append(renderer.domElement)
// 创建轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
// 添加坐标辅助轴
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
// 设置时钟
const clock = new THREE.Clock()
// 修改物体的位置
cube.position.set(0,0,0)
let flag = true
// 控制物体缩放
// cube.scale.set(2,2,1)
// cube.scale.z = 2
// 旋转
cube.rotation.set(Math.PI/180*45,0,0,"XYZ")

// 设置动画
gsap.to(cube.position,{x:5,duration:5,ease:'power1.inOut',onComplete:()=>{
  
}})
gsap.to(cube.rotation,{x:2*Math.PI,duration:5})


function render(){
  // console.log(cube.position.x)
// if(cube.position.x >=5 ){
//   cube.position.x =5
//   flag  = false
// }else if(cube.position.x <=0){
//   cube.position.x =0
//   flag = true
// }
//   if(flag){
//     cube.position.x +=0.01
//     cube.rotation.x+=0.05
//     cube.rotation.y+=0.05
//     cube.rotation.z+=0.05
//   }else{
//     cube.position.x -= 0.01
//     cube.rotation.x-=0.05
//     cube.rotation.y-=0.05
//     cube.rotation.z-=0.05
//   }
// 获取时钟运行的总时长
// let time = clock.getElapsedTime()
// 时间间隔
// let deltaTime =  clock.getDelta()
// console.log(deltaTime )
  renderer.render(scene,camera)
  requestAnimationFrame(render)
}
render()

一个不太聪明的旋转方框就出来了