国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<table id="ua4iq"></table>

Three.js--》實(shí)現(xiàn)3d官網(wǎng)模型展示

2年前作者：亦世凡華、分類：Toy博客閱讀(101)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了Three.js--》實(shí)現(xiàn)3d官網(wǎng)模型展示。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

目錄

項(xiàng)目搭建

實(shí)現(xiàn)網(wǎng)頁簡單布局

初始化three.js基礎(chǔ)代碼

創(chuàng)建環(huán)境背景

加載飛船模型

實(shí)現(xiàn)滾輪滑動(dòng)切換3D場景

設(shè)置星光流動(dòng)特效

今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。

項(xiàng)目搭建

本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工具搭建vue項(xiàng)目，vite這個(gè)構(gòu)建工具如果有不了解的朋友，可以參考我之前對其講解的文章：vite腳手架的搭建與使用。搭建完成之后，用編輯器打開該項(xiàng)目，在終端執(zhí)行 npm i 安裝一下依賴，安裝完成之后終端在安裝 npm i three 即可。

因?yàn)槲掖罱ǖ氖莢ue3項(xiàng)目，為了便于代碼的可讀性，所以我將three.js代碼單獨(dú)抽離放在一個(gè)組件當(dāng)中，在App根組件中進(jìn)入引入該組件。具體如下：

<template>
  <!-- 3D網(wǎng)頁 -->
  <WebPage></WebPage>
</template>

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

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

實(shí)現(xiàn)網(wǎng)頁簡單布局

<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">關(guān)于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技術(shù)</h2>
        <p>輕松、好玩、有趣掌握前沿硬核前端技術(shù)</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可視化</h2>
        <p>領(lǐng)略WEB 3D的魅力，讓頁面無比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>讓前端開發(fā)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基礎(chǔ)代碼

three.js開啟必須用到的基礎(chǔ)代碼如下：

導(dǎo)入three庫：

import * as THREE from 'three'

初始化場景：

const scene = new THREE.Scene()

初始化相機(jī)：

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);

監(jiān)聽屏幕大小的改變，修改渲染器的寬高和相機(jī)的比例：

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

設(shè)置渲染函數(shù)：

// 創(chuàng)建渲染函數(shù)
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

進(jìn)行掛載：

onMounted(() => {
  // 將畫布添加到頁面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

ok，寫完基礎(chǔ)代碼之后，接下來開始具體的Demo實(shí)操。?

創(chuàng)建環(huán)境背景

這里通過TextureLoader加載各種類型的紋理圖像，包括JPEG、PNG、GIF等。通過TextureLoader，開發(fā)人員可以輕松地將紋理加載到自己的Three.js場景中，從而為場景增加更多的細(xì)節(jié)和視覺效果。

// 創(chuàng)建星空的背景
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--》實(shí)現(xiàn)3d官網(wǎng)模型展示

加載飛船模型

經(jīng)過前幾篇對three.js小demo的訓(xùn)練，相信大家對加載模型可謂是得心應(yīng)手了吧，無非就四步嘛，這里有個(gè)情況就是我還額外使用了動(dòng)畫庫進(jìn)行處理，所以步驟稍微要復(fù)雜一點(diǎn)。

第一步引入加載GLTF模型和壓縮模型以及gsap的第三方庫：

// 加載GLTF模型
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// 解壓GLTF模型
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
// 動(dòng)畫庫
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模型，這里使用了鼠標(biāo)監(jiān)聽函數(shù)，然后獲取相關(guān)對應(yīng)的坐標(biāo)，然后通過gsap進(jìn)行實(shí)現(xiàn)動(dòng)畫效果，如下：

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,
    });
  });
});

第四步就是根據(jù)具體情況添加光源：

// 添加燈光
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--》實(shí)現(xiàn)3d官網(wǎng)模型展示

實(shí)現(xiàn)滾輪滑動(dòng)切換3D場景

因?yàn)槲以趆tml設(shè)置了三個(gè)div進(jìn)行頁面切換如下：

Three.js--》實(shí)現(xiàn)3d官網(wǎng)模型展示

所以我們需要引入3個(gè)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,
    });
  });
});

接下來通過監(jiān)聽鼠標(biāo)滾輪事件來實(shí)現(xiàn)page的動(dòng)態(tài)改變：

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--》實(shí)現(xiàn)3d官網(wǎng)模型展示

設(shè)置星光流動(dòng)特效

這里通過加載月球模型，實(shí)現(xiàn)星光流動(dòng)的效果，InstancedMesh是一種在Three.js等WebGL引擎中使用的渲染技術(shù)，它允許我們高效地創(chuàng)建具有重復(fù)幾何體的場景。通常在場景中有很多相同的對象，例如草叢，樹木或者敵人等，而這些對象實(shí)際上是幾何體和材質(zhì)的組合。

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--》實(shí)現(xiàn)3d官網(wǎng)模型展示

demo做完，給出本案例的完整代碼：（獲取素材也可以私信博主）文章來源地址http://www.zghlxwxcb.cn/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">關(guān)于</a>
      </div>
    </div>
    <div class="pages" ref="pages">
      <div class="page">
        <h2 class="title">前端技術(shù)</h2>
        <p>輕松、好玩、有趣掌握前沿硬核前端技術(shù)</p>
      </div>
      <div class="page">
        <h2 class="title">WEB 3D可視化</h2>
        <p>領(lǐng)略WEB 3D的魅力，讓頁面無比酷炫</p>
      </div>
      <div class="page">
        <h2 class="title">ThreeJS框架</h2>
        <p>讓前端開發(fā)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);

// 創(chuàng)建場景
let scene = new THREE.Scene();
// 創(chuàng)建相機(jī)
let camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,100000);
camera.position.set(0, 0, 10);

// 創(chuàng)建渲染器
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()
})

// 創(chuàng)建渲染函數(shù)
const render = () => {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

onMounted(() => {
  // 將畫布添加到頁面中
  screenDom.value.appendChild(renderer.domElement);
  render()
});

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

// 設(shè)置解壓縮的加載器
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>

到了這里，關(guān)于Three.js--》實(shí)現(xiàn)3d官網(wǎng)模型展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

Three.js--》實(shí)現(xiàn)3d圣誕賀卡展示模型
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載環(huán)境模型設(shè)置環(huán)境紋理添加水面并設(shè)置陰影效果實(shí)現(xiàn)幽靈小球的運(yùn)動(dòng) 實(shí)現(xiàn)相機(jī)切換和文字切屏實(shí)現(xiàn)漫天星星和愛心樣式今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起
2024年02月06日
瀏覽(101)
Three.js--》實(shí)現(xiàn)3d球形機(jī)器人模型展示
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼設(shè)置環(huán)境紋理加載機(jī)器人模型添加光陣今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工
2024年02月07日
瀏覽(364)
Three.js--》實(shí)現(xiàn)3d小島模型搭建
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼設(shè)置環(huán)境背景設(shè)置水面樣式添加天空小島今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建
2024年02月05日
瀏覽(429)
Three.js3D可視化介紹，以及本地搭建three.js官網(wǎng)
一、什么是Three.js three.js官網(wǎng) ：https://threejs.org/ Three.js 是一個(gè)基于 WebGL 的 JavaScript 3D 圖形庫，它可以輕松地在瀏覽器中創(chuàng)建3D場景和動(dòng)畫。同時(shí)，它支持外部模型和紋理的導(dǎo)入，讓開發(fā)者可以更加便捷地創(chuàng)建出震撼的 3D場景。 Three.js 的應(yīng)用場景非常廣泛，主要包括以下幾個(gè)
2024年02月09日
瀏覽(299)
Three.js--》實(shí)現(xiàn)3d汽車模型展覽搭建
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼添加汽車模型展示動(dòng)態(tài)修改汽車模型今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工具
2024年02月06日
瀏覽(378)
Three.js--》實(shí)現(xiàn)3d水晶小熊模型搭建
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載背景紋理加載小熊模型今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工具搭建vue項(xiàng)
2024年02月06日
瀏覽(100)
微信小程序利用three.js展示3D模型部分問題
由于小程序的內(nèi)存限制比較多，稍不注意就容易溢出，所以經(jīng)過測試后我選擇gltf模型。不用加載貼圖，而且這個(gè)格式較為通用，最關(guān)鍵的是真的很小。OBJ+PNG怎么轉(zhuǎn)GLTF格式在我上篇帖子內(nèi)有。 three.js有一個(gè)小程序?qū)Ｓ貌寮hreex，移植效果還不錯(cuò)，但渲染出來的效果會(huì)差一點(diǎn)，
2024年02月08日
瀏覽(91)
three.js加載3D模型,在網(wǎng)頁上展示3D模型（.glb.gltf.fbx格式）
Three.js是一款開源的主流3D繪圖JS引擎，簡單點(diǎn)，可以將它理解為three+js就可以了，three表示3D，js表示JavaScript的意思。結(jié)構(gòu) ?.glb.gltf文件最好放在服務(wù)器上放在本地容易報(bào)找不到的錯(cuò)?.fbx格式文件可以在本地用3d看圖(win10自帶）打開另存為.glb格式 index.html代碼 js代碼項(xiàng)目案例
2024年02月11日
瀏覽(101)
Three.js--》實(shí)現(xiàn)3D汽車展廳效果展示
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載汽車模型設(shè)置展廳效果設(shè)置GUI面板動(dòng)態(tài)控制車身操作車門操作與車身視角展示設(shè)置手動(dòng)點(diǎn)擊打開關(guān)閉車門設(shè)置圖片背景今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起
2024年02月09日
瀏覽(92)
Three.js--》實(shí)現(xiàn)圖片轉(zhuǎn)3D效果展示
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載圖片紋理設(shè)置著色器今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對three知識的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工具搭建vue項(xiàng)目
2024年02月08日
瀏覽(88)

<menu id="2euwi"><tfoot id="2euwi"></tfoot></menu>