好 今天 我也是在網(wǎng)上學(xué)的 帶著大家一起來做個(gè)3D賀卡
首先 我們要?jiǎng)?chuàng)建一個(gè)vue3的項(xiàng)目、
先創(chuàng)建一個(gè)文件夾 裝我們的項(xiàng)目
終端執(zhí)行 vue create 項(xiàng)目名稱
例如 我的名字想叫 greetingCards
就是
vue create greetingcards
因?yàn)檫@個(gè)名錄 里面是全部都小寫的
然后 下面選擇 vue3
然后按下回車 等待項(xiàng)目創(chuàng)建完成 目錄就出來了
然后 我們編輯器 打開新創(chuàng)建的項(xiàng)目
這里 我們?cè)陧?xiàng)目終端 執(zhí)行
npm install three gsap
three 肯定是要的 然后還需要 gsap 這個(gè)補(bǔ)間動(dòng)畫的效果
安裝完成后 我們
npm install
安裝一下整體項(xiàng)目依賴
我們?cè)陧?xiàng)目 根目錄下的 public 目錄下 創(chuàng)建目錄 叫 model
我們用它來放模型
因?yàn)?我們 scene.glb 是壓縮過的 所以 我們要處理一下把three中的解壓工具拿出來用
我們?cè)陧?xiàng)目根目錄中 找到 node_modules下的 three
然后在 其中打開 examples 下面有一個(gè) jsm
在下面找到 libs
下面的 draco 就是我們要的東西
將這個(gè)包 復(fù)制到我們自己的靜態(tài)資源目錄public下
然后 我們需要一個(gè) scene.glb 的場(chǎng)景元素 這里 可以直接下載我的資源
WEB 3D技術(shù) three.js 3D賀卡 場(chǎng)景素材
解壓出來 里面有一個(gè) scene.glb 將它放在 項(xiàng)目根目錄下 public 目錄下的 model目錄中
然后 在App.vue組件中 改寫代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-805566.html
<template>
<div></div>
</template>
<script setup>
//導(dǎo)入 threeJS
import * as THREE from "three"
//導(dǎo)入gsap補(bǔ)間動(dòng)畫
//import gsap from "gsap";
//導(dǎo)入 OrbitControls 控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
//導(dǎo)入gltf加載器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
//導(dǎo)入draco解碼察
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
//初始化場(chǎng)景
const scene = new THREE.Scene();
//初始化相機(jī)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//設(shè)置相機(jī)position位置
camera.position.set(-3.23, 2.98, 4.06);
//更新相機(jī)的投影舉證
camera.updateProjectionMatrix();
//初始化渲染器
const renderer = new THREE.WebGLRenderer({
//設(shè)置抗鋸齒
antialias: true
});
//設(shè)置渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
//將渲染器渲染的dom元素 追加到 body元素下
document.body.appendChild(renderer.domElement);
//設(shè)置控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
//加載 glb資源
const gltfLoader = new GLTFLoader();
// 實(shí)例化加較器draco
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/draco/");
gltfLoader.setDRACOLoader(dracoloader);
gltfLoader.load(
// 模型路徑
"/model/scene.glb",
// 加較完成同調(diào)
(gltf) =>{
gltf.scene.traverse((child) => {
if (child.isMesh) {
child.frustumCulled = false;
child.castShadow = true;
child.material.emissive = child.material.color;
child.material.emissiveMap = child.material.map;
}
});
scene.add(gltf.scene);
}
)
//添加平行光
const light = new THREE.DirectionalLight(0xffffff, 1);
//設(shè)置光源 position 三軸位置屬性
light.position.set(0, 50, 0);
//將光添加進(jìn)場(chǎng)景
scene.add(light);
//編寫渲染函數(shù)
function render(){
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
}
render();
</script>
<style>
/*
設(shè)置全局樣式
*/
* {
/* 內(nèi)外邊界清零 */
margin: 0;
padding: 0;
}
/* 設(shè)置背景 canvas 寬高為屏幕的 百分之百 */
canvas{
width: 100vw;
height: 100vh;
/*
設(shè)置為行元素
*/
display: block;
/*
設(shè)置元素固定定位 位置為左上角
*/
position: fixed;
left: 0;
top: 0;
}
</style>
這里 我注釋寫的也算非常認(rèn)真了
大家可以先復(fù)制上去 實(shí)現(xiàn)效果 然后慢慢研究
運(yùn)行結(jié)果如下
拉大屏幕
文章來源地址http://www.zghlxwxcb.cn/news/detail-805566.html
到了這里，關(guān)于WEB 3D技術(shù) three.js 3D賀卡(1) 搭建基本項(xiàng)目環(huán)境的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
