threejs

关键代码

// 添加坐标辅助器
  const axes = new THREE.AxesHelper(5);
  scene.add(axes);

  // 添加轨道控制器
  const controls = new OrbitControls(camera, sceneContainer.value);
  // 设置阻尼惯性
  controls.enableDamping = true;
  // 设置阻尼系数
  controls.dampingFactor = 0.25;
  
 // 渲染场景
  const animate = () => {
    controls.update();
    ....
  };

完整代码

<script setup>
import * as THREE from 'three'
import { onMounted, ref } from 'vue'
const sceneContainer = ref(null)

// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
onMounted(() => {
  // 创建一个场景
  const scene = new THREE.Scene();

  // 创建一个相机
  const camera = new THREE.PerspectiveCamera(75,//视角
    window.innerWidth / window.innerHeight,//宽高比
    0.1, //近平面
    1000);//远平面
  camera.position.z = 5;
  // 相机角度
  camera.position.y = 2;
  camera.position.x = 2;


  // 添加坐标辅助器
  const axes = new THREE.AxesHelper(5);
  scene.add(axes);

  // 添加轨道控制器
  const controls = new OrbitControls(camera, sceneContainer.value);
  // 设置阻尼惯性
  controls.enableDamping = true;
  // 设置阻尼系数
  controls.dampingFactor = 0.25;
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 将渲染器的DOM元素添加到组件中
  sceneContainer.value.appendChild(renderer.domElement);

  // 创建一个立方体并添加到场景中
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // 渲染场景
  const animate = () => {
    controls.update();
    requestAnimationFrame(animate);

    // 旋转立方体
    cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  };

  animate();
})
</script>

<template>
  <div ref="sceneContainer"></div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>

放大和旋转

 // 设置几何体变大
  cube.scale.set(2, 2, 2);
  //绕着x轴旋转
  cube.rotation.x = Math.PI / 4;//45度

自适应

  // 监听窗口变化
  window.addEventListener("resize",()=>{
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
  })
})

创建三角形

//创建三角形
  const geometry2 = new THREE.BufferGeometry();
  // 顶点顺序
  const vertices = new Float32Array([
    -1, -1, 0 ,1, 1,0,
    1, -1, 0,])
  // 设置顶点属性
  geometry2.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

  // 创建材质
  const material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
  const mesh = new THREE.Mesh(geometry2, material2);
  scene.add(mesh);

gui调试

// 导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
  const gui = new GUI()


  gui.add(eventObj, 'Fullscreeen').name('全屏')
  gui.add(eventObj, 'ExitFullscree').name('退出全屏')
  // 控制几何体方向
  gui.add(cube.position, 'x', -5, 5).name('x轴位置')
  gui.add(cube.position, 'y', -5, 5).name('y轴位置')
  gui.add(cube.position, 'z', -5, 5).name('z轴位置')
  // 线框模式
  gui.add(cube.material, 'wireframe').name('线框模式')
  let colorParams = {
    cubeColor: '#00ff00'
  }
  // 控制立方体颜色
  gui.addColor(colorParams, 'cubeColor').name('立方体颜色').onChange((val) => {
    cube.material.color.set(val)
  })

// 这里生成四边形
  const vertices = new Float32Array([
    -1, -1, 0 ,1, -1,0,1, 1, 0,
    1,1,0,-1,1,0,-1,-1,0])