---
title: three-入門學(xué)習(xí)-簡單的3D實(shí)現(xiàn)
date: 2023-04-06 11:45:00
categories: 入門學(xué)習(xí)
tags: Three
---
### three-入門學(xué)習(xí)
###### 1. 安裝 three.js
> npm install three 安裝好之后復(fù)制如下代碼就能跑起來
>
> > 3D 效果是前端繞不過的發(fā)展趨勢(shì)，未來會(huì)有更多的 3D 場(chǎng)景的需要。
```javascript
<template>
? <div>3D</div>
</template>
<script setup lang="ts">
import * as THREE from 'three';
//創(chuàng)建一個(gè)三維場(chǎng)景Scene 構(gòu)造器，相當(dāng)于你需要放東西的盒子
const scene = new THREE.Scene();
// 創(chuàng)建一個(gè)相機(jī) PerspectiveCamera 透明相機(jī)，相當(dāng)于一個(gè)投影儀，投影出3D效果
// PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
// fov — 攝像機(jī)視錐體垂直視野角度
// aspect — 攝像機(jī)視錐體長寬比
// near — 攝像機(jī)視錐體近端面
// far — 攝像機(jī)視錐體遠(yuǎn)端面
const camera = new THREE.PerspectiveCamera(
? 75,
? window.innerWidth / window.innerHeight,
? 0.1,
? 1000
);
// 創(chuàng)建你的渲染器，用來渲染你定義的圖形動(dòng)畫
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染圖形的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 添加元素
document.body.appendChild(renderer.domElement);
// ?定義立方體圖形
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 構(gòu)建立方體的材質(zhì)和顏色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 網(wǎng)格內(nèi)的物體 構(gòu)成定義的立方體圖形，并且使用什么樣的材質(zhì)
const cube = new THREE.Mesh(geometry, material);
// 放在環(huán)境中
scene.add(cube);
// 坐標(biāo)軸的位置
camera.position.z = 5;
function animate() {
? // 頻率刷新 切換的時(shí)候會(huì)停止
? requestAnimationFrame(animate);
? // 物體旋轉(zhuǎn)的大小
? cube.rotation.x += 0.01;
? cube.rotation.y += 0.01;
? // 圖形渲染函數(shù) 傳入場(chǎng)景和相機(jī)
? renderer.render(scene, camera);
}
animate();
</script>
<style scoped>
.logo {
? height: 6em;
? padding: 1.5em;
? will-change: filter;
? transition: filter 300ms;
}
.logo:hover {
? filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
? filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
```
