1. Toy模板网首页
  2. > Toy博客

Three.js--》实现3d官网模型展示

10月前 作者：亦世凡华、 分类：Toy博客 阅读(65) 违法举报

这篇具有很好参考价值的文章主要介绍了Three.js--》实现3d官网模型展示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

项目搭建

实现网页简单布局

初始化three.js基础代码

创建环境背景

加载飞船模型

实现滚轮滑动切换3D场景

设置星光流动特效

今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。

项目搭建

本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目，vite这个构建工具如果有不了解的朋友，可以参考我之前对其讲解的文章：vite脚手架的搭建与使用 。搭建完成之后，用编辑器打开该项目，在终端执行 npm i 安装一下依赖，安装完成之后终端在安装 npm i three 即可。

因为我搭建的是vue3项目，为了便于代码的可读性，所以我将three.js代码单独抽离放在一个组件当中，在App根组件中进入引入该组件。具体如下：

<template>
  <!-- 3D网页 -->
  <WebPage></WebPage>
</template>

<script setup>
import WebPage from './components/WebPage.vue';
</script>

<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
</style>

实现网页简单布局

<template>
  <div class="home">
    <div class="canvas-container" ref="screenDom"></div>
    <div class="header">
      <div class="menu">
        <a href="#" class="menuItem">首页</a>
        <a href="#" class="menuItem">详情</a>
        <a href="#" class="menuItem">关于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技术</h2>
        <p>轻松、好玩、有趣掌握前沿硬核前端技术</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可视化</h2>
        <p>领略WEB 3D的魅力，让页面无比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>让前端开发3D效果更方便</p>
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #000;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
}
.home {
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-container {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 50px;
}
.menuItem {
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.progress > img {
  padding: 0 15px;
}
.pages {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
}
.pages .page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding: 15%;
  box-sizing: border-box;
}
.pages .page .title {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 20px;
}
.pages .page p {
  font-size: 25px;
}
</style>

初始化three.js基础代码

three.js开启必须用到的基础代码如下：

导入three库：

import * as THREE from 'three'

初始化场景：

const scene = new THREE.Scene()

初始化相机：

let camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,100000);
camera.position.set(0, 0, 10);

初始化渲染器：

let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

监听屏幕大小的改变，修改渲染器的宽高和相机的比例：

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

设置渲染函数：

// 创建渲染函数
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

进行挂载：

onMounted(() => {
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

ok，写完基础代码之后，接下来开始具体的Demo实操。 

创建环境背景

这里通过TextureLoader加载各种类型的纹理图像，包括JPEG、PNG、GIF等。通过TextureLoader，开发人员可以轻松地将纹理加载到自己的Three.js场景中，从而为场景增加更多的细节和视觉效果。

// 创建星空的背景
let url = "src/assets/imgs/25s.jpg";
let envTexture = new THREE.TextureLoader().load(url);
envTexture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = envTexture;
scene.environment = envTexture;

Three.js--》实现3d官网模型展示

加载飞船模型

经过前几篇对three.js小demo的训练，相信大家对加载模型可谓是得心应手了吧，无非就四步嘛，这里有个情况就是我还额外使用了动画库进行处理，所以步骤稍微要复杂一点。

第一步引入加载GLTF模型和压缩模型以及gsap的第三方库：

// 加载GLTF模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 解压GLTF模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
// 动画库
import { gsap } from "gsap";

第二步初始化loader：

let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

第三步就是加载gltf模型，这里使用了鼠标监听函数，然后获取相关对应的坐标，然后通过gsap进行实现动画效果，如下：

loader.load("./model/xz.glb", (gltf) => {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.set(3, 0, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;

    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

第四步就是根据具体情况添加光源：

// 添加灯光
let light = new THREE.DirectionalLight(0xffffff, 0.7);
light.position.set(0, 0, 1);
scene.add(light);
let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
light2.position.set(0, 0, -1);
scene.add(light2);
let light3 = new THREE.AmbientLight(0xffffff, 0.3);
light3.position.set(-1, 1, 1);
scene.add(light3);

Three.js--》实现3d官网模型展示

实现滚轮滑动切换3D场景

因为我在html设置了三个div进行页面切换如下：

Three.js--》实现3d官网模型展示

所以我们需要引入3个glb模型，和上面引入模型的方式一样：

loader.load("./model/xq6.glb", (gltf) => {
  gltf.scene.scale.set(0.05, 0.05, 0.05);
  gltf.scene.position.set(3, -8, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

loader.load("./model/gr75.glb", (gltf) => {
  gltf.scene.scale.set(0.8, 0.8, 0.8);
  gltf.scene.position.set(3, -16, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

接下来通过监听鼠标滚轮事件来实现page的动态改变：

let page = 0;
let timeline2 = gsap.timeline();
window.addEventListener("mousewheel", (e) => {
  if (e.wheelDelta < 0) {
    page++;
    if (page > 2) {
      page = 2;
    }
  }
  if (e.wheelDelta > 0) {
    page--;
    if (page < 0) {
      page = 0;
    }
  }
  if (!timeline2.isActive()) {
    timeline2.to(camera.position, {
      duration: 0.5,
      y: page * -8,
      duration: 1,
    });
    gsap.to(pages.value, {
      duration: 1,
      y: -page * window.innerHeight,
      duration: 1,
    });
  }
});

Three.js--》实现3d官网模型展示

设置星光流动特效

这里通过加载月球模型，实现星光流动的效果，InstancedMesh是一种在Three.js等WebGL引擎中使用的渲染技术，它允许我们高效地创建具有重复几何体的场景。通常在场景中有很多相同的对象，例如草丛，树木或者敌人等，而这些对象实际上是几何体和材质的组合。

loader.load("./model/moon.glb", (gltf) => {
  let moon = gltf.scene.children[0];
  for (let j = 0; j < 10; j++) {
    let moonInstance = new THREE.InstancedMesh(
      moon.geometry,
      moon.material,
      100
    );
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * 1000 - 500;
      let y = Math.random() * 1000 - 500;
      let z = Math.random() * 1000 - 500;

      let matrix = new THREE.Matrix4();
      let size = Math.random() * 20 - 8;
      matrix.makeScale(size, size, size);
      matrix.makeTranslation(x, y, z);
      moonInstance.setMatrixAt(i, matrix);
    }

    gsap.to(moonInstance.position, {
      duration: Math.random() * 10 + 2,
      z: -1000,
      ease: "linear",
      repeat: -1,
    });
    scene.add(moonInstance);
  }
});

Three.js--》实现3d官网模型展示

demo做完，给出本案例的完整代码：（获取素材也可以私信博主）文章来源地址https://www.toymoban.com/news/detail-460627.html

<template>
  <div class="home">
    <div class="canvas-container" ref="screenDom"></div>
    <div class="header">
      <div class="menu">
        <a href="#" class="menuItem">首页</a>
        <a href="#" class="menuItem">详情</a>
        <a href="#" class="menuItem">关于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技术</h2>
        <p>轻松、好玩、有趣掌握前沿硬核前端技术</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可视化</h2>
        <p>领略WEB 3D的魅力，让页面无比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>让前端开发3D效果更方便</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as THREE from "three";
import { ref, onMounted } from "vue";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
import { gsap } from "gsap";
let screenDom = ref(null);
let pages = ref(null);

// 创建场景
let scene = new THREE.Scene();
// 创建相机
let camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,100000);
camera.position.set(0, 0, 10);

// 创建渲染器
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

window.addEventListener("resize",()=>{ 
  renderer.setSize(window.innerWidth,window.innerHeight)
  camera.aspect = window.innerWidth/window.innerHeight
  camera.updateProjectionMatrix()
})

// 创建渲染函数
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

onMounted(() => {
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

// 创建星空的背景
let url = "src/assets/imgs/25s.jpg";
let envTexture = new THREE.TextureLoader().load(url);
envTexture.mapping = THREE.EquirectangularReflectionMapping;
scene.background = envTexture;
scene.environment = envTexture;

// 设置解压缩的加载器
let dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
dracoLoader.setDecoderConfig({ type: "js" });
let loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load("./model/xz.glb", (gltf) => {
  gltf.scene.scale.set(0.1, 0.1, 0.1);
  gltf.scene.position.set(3, 0, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;

    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

// 添加灯光
let light = new THREE.DirectionalLight(0xffffff, 0.7);
light.position.set(0, 0, 1);
scene.add(light);
let light2 = new THREE.DirectionalLight(0xffffff, 0.3);
light2.position.set(0, 0, -1);
scene.add(light2);
let light3 = new THREE.AmbientLight(0xffffff, 0.3);
light3.position.set(-1, 1, 1);
scene.add(light3);

loader.load("./model/xq6.glb", (gltf) => {
  gltf.scene.scale.set(0.05, 0.05, 0.05);
  gltf.scene.position.set(3, -8, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

loader.load("./model/gr75.glb", (gltf) => {
  gltf.scene.scale.set(0.8, 0.8, 0.8);
  gltf.scene.position.set(3, -16, 0);
  scene.add(gltf.scene);
  window.addEventListener("mousemove", (e) => {
    let x = (e.clientX / window.innerWidth) * 2 - 1;
    let y = (e.clientY / window.innerHeight) * 2 - 1;
    let timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      duration: 0.5,
      x: y,
      y: x,
      duration: 1,
    });
  });
});

let page = 0;
let timeline2 = gsap.timeline();
window.addEventListener("mousewheel", (e) => {
  if (e.wheelDelta < 0) {
    page++;
    if (page > 2) {
      page = 2;
    }
  }
  if (e.wheelDelta > 0) {
    page--;
    if (page < 0) {
      page = 0;
    }
  }
  if (!timeline2.isActive()) {
    timeline2.to(camera.position, {
      duration: 0.5,
      y: page * -8,
      duration: 1,
    });
    gsap.to(pages.value, {
      duration: 1,
      y: -page * window.innerHeight,
      duration: 1,
    });
  }
});

loader.load("./model/moon.glb", (gltf) => {
  let moon = gltf.scene.children[0];
  for (let j = 0; j < 10; j++) {
    let moonInstance = new THREE.InstancedMesh(
      moon.geometry,
      moon.material,
      100
    );
    for (let i = 0; i < 100; i++) {
      let x = Math.random() * 1000 - 500;
      let y = Math.random() * 1000 - 500;
      let z = Math.random() * 1000 - 500;

      let matrix = new THREE.Matrix4();
      let size = Math.random() * 20 - 8;
      matrix.makeScale(size, size, size);
      matrix.makeTranslation(x, y, z);
      moonInstance.setMatrixAt(i, matrix);
    }

    gsap.to(moonInstance.position, {
      duration: Math.random() * 10 + 2,
      z: -1000,
      ease: "linear",
      repeat: -1,
    });
    scene.add(moonInstance);
  }
});

</script>

<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #000;
}
.canvas-container {
  width: 100vw;
  height: 100vh;
}
.home {
  width: 100vw;
  height: 100vh;
  transform-origin: 0 0;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.canvas-container {
  width: 100%;
  height: 100%;
}
.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 50px;
}
.menuItem {
  padding: 0 15px;
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
}
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #fff;
}
.progress > img {
  padding: 0 15px;
}
.pages {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
}
.pages .page {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #fff;
  padding: 15%;
  box-sizing: border-box;
}
.pages .page .title {
  font-size: 50px;
  font-weight: 900;
  margin-bottom: 20px;
}
.pages .page p {
  font-size: 25px;
}
</style>

到了这里，关于Three.js--》实现3d官网模型展示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Three.js--》实现3d圣诞贺卡展示模型

    Three.js--》实现3d圣诞贺卡展示模型

    目录 项目搭建 初始化three.js基础代码 加载环境模型 设置环境纹理 添加水面并设置阴影效果 实现幽灵小球的运动 实现相机切换和文字切屏 实现漫天星星和爱心样式 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起

    2024年02月06日
    浏览(60)
  • Three.js--》实现3d球形机器人模型展示

    Three.js--》实现3d球形机器人模型展示

    目录 项目搭建 初始化three.js基础代码 设置环境纹理 加载机器人模型 添加光阵 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目，借用vite构建工

    2024年02月07日
    浏览(103)
  • Three.js--》实现3d小岛模型搭建

    Three.js--》实现3d小岛模型搭建

    目录 项目搭建 初始化three.js基础代码 设置环境背景 设置水面样式 添加天空小岛 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目，借用vite构建

    2024年02月05日
    浏览(102)
  • Three.js3D可视化介绍，以及本地搭建three.js官网

    Three.js3D可视化介绍，以及本地搭建three.js官网

    一、什么是Three.js three.js官网 ：https://threejs.org/ Three.js 是一个基于 WebGL 的 JavaScript 3D 图形库，它可以轻松地在浏览器中 创建3D场景和动画 。同时，它支持外部模型和纹理的导入，让开发者可以更加便捷地创建出震撼的 3D场景 。 Three.js 的应用场景非常广泛，主要包括以下几个

    2024年02月09日
    浏览(79)
  • Three.js--》实现3d汽车模型展览搭建

    Three.js--》实现3d汽车模型展览搭建

    目录 项目搭建 初始化three.js基础代码 添加汽车模型展示 动态修改汽车模型 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目，借用vite构建工具

    2024年02月06日
    浏览(97)
  • Three.js--》实现3d水晶小熊模型搭建

    Three.js--》实现3d水晶小熊模型搭建

    目录 项目搭建 初始化three.js基础代码 加载背景纹理 加载小熊模型 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目，借用vite构建工具搭建vue项

    2024年02月06日
    浏览(55)
  • 微信小程序利用three.js展示3D模型部分问题

    微信小程序利用three.js展示3D模型部分问题

    由于小程序的内存限制比较多，稍不注意就容易溢出，所以经过测试后我选择gltf模型。不用加载贴图，而且这个格式较为通用，最关键的是真的很小。OBJ+PNG怎么转GLTF格式在我上篇帖子内有。 three.js有一个小程序专用插件threex，移植效果还不错，但渲染出来的效果会差一点，

    2024年02月08日
    浏览(55)
  • three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）

    three.js加载3D模型,在网页上展示3D模型（.glb.gltf.fbx格式）

    Three.js是一款开源的主流3D绘图JS引擎，简单点，可以将它理解为three+js就可以了，three表示3D，js表示JavaScript的意思。 结构  .glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带）打开另存为.glb格式 index.html代码 js代码 项目案例

    2024年02月11日
    浏览(60)
  • Three.js--》实现图片转3D效果展示

    Three.js--》实现图片转3D效果展示

    目录 项目搭建 初始化three.js基础代码 加载图片纹理 设置着色器 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起来，话不多说直接开始。 项目搭建 本案例还是借助框架书写three项目，借用vite构建工具搭建vue项目

    2024年02月08日
    浏览(60)
  • Three.js--》实现3D汽车展厅效果展示

    Three.js--》实现3D汽车展厅效果展示

    目录 项目搭建 初始化three.js基础代码 加载汽车模型 设置展厅效果 设置GUI面板动态控制车身操作 车门操作与车身视角展示 设置手动点击打开关闭车门 设置图片背景 今天简单实现一个three.js的小Demo，加强自己对three知识的掌握与学习，只有在项目中才能灵活将所学知识运用起

    2024年02月09日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包