three.js加载模型基础代码

代码展示

import * as THREE from 'three';
import { onMounted } from "vue"
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';


onMounted(() => {
  const width = document.documentElement.clientWidth
  const height = document.documentElement.clientHeight

  // 创建3d场景
  const scene = new THREE.Scene()

  // 添加点光源
  const pointLight = new THREE.PointLight("#ffffff", 200, 200)
  pointLight.position.set(10, 10, 10)
  scene.add(pointLight)

  // 创建相机
  const camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000)
  camera.position.z = 20
  camera.position.y = 10
  camera.position.x = 10

  // 创建一个GTLF加载器
  const loader = new GLTFLoader()
  // 加载
  loader.load("/test2.glb", (gltf) => {
    scene.add(gltf.scene)
  })

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true })
  // 调整渲染器大小
  renderer.setSize(width, height)
  // 添加动画
  renderer.setAnimationLoop(animate)
  document.querySelector('#canvas').appendChild(renderer.domElement)

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

  // 动画函数
  function animate(time) {
    controls.update()
    renderer.render(scene, camera);

  }
})