前端开发3D-基于three.js

基于 three.js 渲染任何画面，都要基于这 3 个要素来实现
1场景scene：放置物体的容器
2摄像机：类似人眼，可调整位置，角度等信息，展示不同画面
3渲染器：接收场景和摄像机对象，计算在浏览器上要渲染的最终 2D 画面

第一步：下载three包

npm i three

第二步：引入three对象

import * as THREE from 'three'; 

第三步：创建场景

// 3. 创建场景（容器）
  const scene = new THREE.Scene();

第四步：创建摄像机（人眼）

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

最后一步：创建渲染器，设置画布大小，显示另传给渲染器

//  创建渲染器（绘制）
  const renderer = new THREE.WebGLRenderer()
  // 设置画布大小（会生成 canvas 标签）
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把画布标签添加到页面显示
  document.body.appendChild(renderer.domElement)
  // 把空场景和摄像机传给渲染器，默认是黑色背景的世界
  renderer.render(scene, camera)

完整代码如下

<template></template>

<script setup>
  // 1. 引入 three.js 对象（命名导出->默认导入）
  import * as THREE from 'three'; 
  // 2. 创建场景（容器）
  const scene = new THREE.Scene();
  // 3. 创建摄像机（人眼）
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  // 4. 创建渲染器（绘制）
  const renderer = new THREE.WebGLRenderer()
  // 设置画布大小（会生成 canvas 标签）
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 把画布标签添加到页面显示
  document.body.appendChild(renderer.domElement)
  // 把空场景和摄像机传给渲染器，默认是黑色背景的世界
  renderer.render(scene, camera)
</script>

<style scoped></style>