WEB 3D技术 three.js 3D贺卡(1) 搭建基本项目环境

news2024/12/24 19:02:43

好今天我也是在网上学的带着大家一起来做个3D贺卡

首先我们要创建一个vue3的项目、
先创建一个文件夹装我们的项目
在这里插入图片描述
终端执行 vue create 项目名称
例如我的名字想叫 greetingCards
就是

vue create greetingcards

因为这个名录里面是全部都小写的
然后下面选择 vue3
在这里插入图片描述
然后按下回车等待项目创建完成目录就出来了

然后我们编辑器打开新创建的项目

这里我们在项目终端执行

npm install three gsap

three 肯定是要的然后还需要 gsap 这个补间动画的效果
在这里插入图片描述
安装完成后我们

npm install

安装一下整体项目依赖
在这里插入图片描述
我们在项目根目录下的 public 目录下创建目录叫 model
我们用它来放模型

因为我们 scene.glb 是压缩过的所以我们要处理一下把three中的解压工具拿出来用
我们在项目根目录中找到 node_modules下的 three
然后在其中打开 examples 下面有一个 jsm
在下面找到 libs
下面的 draco 就是我们要的东西
在这里插入图片描述
将这个包复制到我们自己的静态资源目录public下

然后我们需要一个 scene.glb 的场景元素这里可以直接下载我的资源
WEB 3D技术 three.js 3D贺卡场景素材
解压出来里面有一个 scene.glb 将它放在项目根目录下 public 目录下的 model目录中
在这里插入图片描述
然后在App.vue组件中改写代码如下

<template>
  <div></div>
</template>

<script setup>
//导入 threeJS
import * as THREE from "three"
//导入gsap补间动画
//import gsap from "gsap";
//导入 OrbitControls 控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
//导入gltf加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
//导入draco解码察
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
//初始化场景
const scene = new THREE.Scene();
//初始化相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
//设置相机position位置
camera.position.set(-3.23, 2.98, 4.06);
//更新相机的投影举证
camera.updateProjectionMatrix();
//初始化渲染器
const renderer = new THREE.WebGLRenderer({
  //设置抗锯齿
  antialias: true
});
//设置渲染器
renderer.setSize(window.innerWidth, window.innerHeight);
//将渲染器渲染的dom元素 追加到 body元素下
document.body.appendChild(renderer.domElement);

//设置控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
//加载 glb资源
const gltfLoader = new GLTFLoader();
// 实例化加较器draco
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/draco/");
gltfLoader.setDRACOLoader(dracoloader);
gltfLoader.load(
    // 模型路径
    "/model/scene.glb",
    // 加较完成同调
    (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);
//设置光源 position 三轴位置属性
light.position.set(0, 50, 0);
//将光添加进场景
scene.add(light);
//编写渲染函数
function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    controls.update();
}
render();
</script>

<style>
/*
  设置全局样式
*/
* {
  /* 内外边界清零 */
  margin: 0;
  padding: 0;
}
/* 设置背景 canvas 宽高为屏幕的  百分之百 */
canvas{
  width: 100vw;
  height: 100vh;
  /*
     设置为行元素
  */
  display: block;
  /*
     设置元素固定定位 位置为左上角
  */
  position: fixed;
  left: 0;
  top: 0;
}
</style>