threejs基本知识1

threejs基本知识1

场景、相机、渲染器、灯光、基础几何体、基础材质、位置变化、旋转、缩放、坐标轴线辅助器、刷新帧辅助器、鼠标控制辅助器

	  // 浏览器宽度
	  let w = window.innerWidth; 
	  
	  // 浏览器高度
      let h = window.innerHeight; 
      
      // 创建场景
      const scene = new THREE.Scene(); 
      
	  // 创建相机 （视角 宽高比 最近距离 最远距离）
      const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000); 
      // 相机位置
      camera.position.set(1, 1, 5); 
      // 相机视角
      camera.lookAt(0, 0, 0); 
	
	  // 创建基础几何体（骨架） 长宽高
      const geometry = new THREE.BoxGeometry(1, 1, 1); 
	  // 创建材质（皮肤）
      const material = new THREE.MeshBasicMaterial({ color: "blue" }); 
	  // 创建物体（骨架+皮肤）
      const cube = new THREE.Mesh(geometry, material); 

      // Position 位置变换
      // cube.position.x = 1
      // cube.position.y = 1
      // cube.position.z = 1
      // cube.position.set(1, 1, 1);

      // Rotation 旋转
      // cube.rotation.z = 45 / 180 * Math.PI
      // cube.rotation.set(
      //   (45 / 180) * Math.PI,
      //   (45 / 180) * Math.PI,
      //   (45 / 180) * Math.PI
      // );

      // scale 缩放（2倍）
      // cube.scale.x = 2
      // cube.scale.set(2, 2, 2); 
		
	  // 创建灯光
      const light = new THREE.AmbientLight(); 
		
	  // 坐标轴辅助器
      const axes = new THREE.AxesHelper(10, 10, 10); 
		
	  // 物体放在场景中
      scene.add(cube); 
      // 灯光放入场景中
      scene.add(light); 
      // 坐标轴辅助器
      scene.add(axes); 
      
	  // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      // 渲染器尺寸
      renderer.setSize(w, h); 
      // 场景和相机放在渲染器中
      renderer.render(scene, camera); 
      // 渲染器需要放入html元素中
	  document.getElementById("box-container").append(renderer.domElement);
	  
	  // 刷新帧辅助器
      const stats = new Stats(); 
	  document.getElementById("box-container").append(stats.domElement);
	  
	  // 控制辅助器（鼠标滚动缩放、右击平移、左击旋转）
      const orbitControls = new OrbitControls(camera, renderer.domElement); 
		
	  // 帧率刷新辅助器
      const clock = new THREE.Clock();
      function render() {
      // 在不同频率下稳定增长的值
        const time = clock.getElapsedTime(); 
        // 方形box稳定值旋转
        cube.rotation.z = time;
        // 场景和相机放在渲染器中
        renderer.render(scene, camera); 
        // 与浏览器刷新帧率同步（性能优于定时器）
        stats.update();
        orbitControls.update();
        requestAnimationFrame(render);
      }
      render();
   // 自适应窗口大小变化 从而更新画布
	 window.addEventListener("resize", () => {
        w = window.innerWidth;
        h = window.innerHeight;
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        renderer.setSize(w, h);
      });