THREEJS渲染三维对象

THREE

Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。

三大核心 场景 相机 渲染器

const canvasbox = ref(null)

const init = ()=>{
  //创建场景
  const scene = new THREE.Scene()
  //创建相机
  const camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,1000)
  //创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth,window.innerHeight)

  //渲染
  canvasbox.value.appendChild(renderer.domElement)
  renderer.render(scene,camera)
}

onMounted(()=>{
  init()
})

接下来添加物体 并添加一个动画

const canvasbox = ref(null)

const init = () => {
  //创建场景
  const scene = new THREE.Scene()
  //创建相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
  camera.position.set(0, 0, 20)
  //创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)

  //添加一个正方体
  const boxGeometry = new THREE.BoxGeometry(2, 2, 2)
  //添加材质
  const boxMaterial = new THREE.MeshBasicMaterial({ color: '#f00', wireframe: true })
  const boxCube = new THREE.Mesh(boxGeometry, boxMaterial)
  scene.add(boxCube)

  //渲染
  canvasbox.value.appendChild(renderer.domElement)
  renderer.render(scene, camera)
  
  //动画
  const animate = () => {
    requestAnimationFrame(animate)
    boxCube.rotation.x += 0.01
    boxCube.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
}


onMounted(() => {
  init()
})

const canvasbox = ref(null)

const init = () => {
  //创建场景
  const scene = new THREE.Scene()
  //创建相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
  camera.position.set(0, 0, 20)
  //创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)

  //添加一个正方体
  const boxGeometry = new THREE.BoxGeometry(2, 2, 2)
  //添加材质
  const boxMaterial = new THREE.MeshBasicMaterial({ color: '#f00', wireframe: true })
  const boxCube = new THREE.Mesh(boxGeometry, boxMaterial)
  scene.add(boxCube)

  // 添加一个球体
  const spherGeometry = new THREE.SphereGeometry(1,10,10)
  const spherMaterial = new THREE.MeshBasicMaterial({color:'#f00',wireframe:true})
  const spherCube = new THREE.Mesh(spherGeometry,spherMaterial)
  scene.add(spherCube)
  spherCube.position.x = 4
  spherCube.position.y = 4

  //渲染
  canvasbox.value.appendChild(renderer.domElement)
  renderer.render(scene, camera)
  const animate = () => {
    requestAnimationFrame(animate)
    boxCube.rotation.x += 0.01
    boxCube.rotation.y += 0.01
    spherCube.rotation.x +=0.01
    spherCube.rotation.y +=0.01
    renderer.render(scene, camera)
  }
  animate()
}


onMounted(() => {
  init()
})