前端开发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>