threeJS-Three+React

• 创建项目后，安装three.js
• 使用useEffect来创建代码

  // 引入three.js
  import * as THREE from 'three';
  useEffect(()=>{
  	// 创建场景
  	const scene = new THREE.Scene(); 
  	
  	//创建相机 --- 遵循近大远小原则
  	const camera = new THREE.PerspectiveCamera(
  	 75, // 视角 --- 在同距离情况下，视角越大（宽），看到的东西越多
  	 window.innerWidth / window.innerHeight, // 相机的宽高比
  	 0.1,  // 近平面 --- 相机最近能看到的
  	 1000  // 远平面 --- 相机最远能看到的
  	); 
  	
  	// 创建渲染器
  	const renderer = new THREE.WebGLRenderer(); 
  	renderer.setSize( window.innerWidth, window.innerHeight ); 
  	document.body.appendChild( renderer.domElement );
  	
  	// 创建几何体
  	const geometry = new THREE.BoxGeometry(1,1,1);
  	
  	// 创建材质
  	const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  	
  	// 创建网格
  	const cube = new THREE.Mesh(geometry,material)
  	
  	// 将网格添加到场景中
  	scene.add(cube)
  	
  	// 设置相机的位置
  	camera.position.z = 5
  	camera.lookAt(0,0,0); 
  	
  	// 渲染函数
  	const animate = () => {
  	  requestAnimationFrame(animate)
  	  // 旋转
  	  cube.rotation.x += 0.01
  	  cube.rotation.y += 0.01
  	  // 渲染
  	  renderer.render(scene, camera)
  	}
  	
  	animate()
  })

  css替换全局css

  *{
    margin: 0;
    padding: 0;
  }
  
  canvas {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
  
  #app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }