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

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

目录

项目搭建

初始化three.js基础代码

加载背景纹理

加载小熊模型


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

项目搭建

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

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

<template>
  <!-- 3D水晶小熊 -->
  <CrystalBear></CrystalBear>
</template>

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

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

初始化three.js基础代码

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

导入three库

import * as THREE from 'three'

初始化场景

const scene = new THREE.Scene()

初始化相机

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(1.5,1,1.5) // 设置相机位置
camera.aspect = window.innerWidth / window.innerHeight // 更新摄像头宽高比例
camera.updateProjectionMatrix() // 更新相机投影矩阵
scene.add(camera)

初始化渲染器

const 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()
})

导入控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 实例化控制器
const controls = new OrbitControls(camera,renderer.domElement)

设置渲染函数

const render = () =>{ 
  renderer.render(scene,camera) // 渲染场景
  requestAnimationFrame(render) // 循环渲染
}

进行挂载

// 挂载完成之后获取dom
onMounted(()=>{
  // 添加控制器
  const controls = new OrbitControls(camera,canvasContainer.value)
  controls.enableDamping = true 
  canvasContainer.value.appendChild(renderer.domElement)
  render()
})

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

加载背景纹理

可以在网上随便找一张全景图片,然后对环境进行纹理贴图。注意:这里需要借助TextureLoader库,其用于将2D纹理图像文件加载到WebGL中,TextureLoader可以加载各种常见的图像文件格式,如JPG、PNG、GIF等。我们可以使用TextureLoader加载纹理图像,然后将它们映射到3D模型表面上,从而创建逼真的3D场景。

const loader = new THREE.TextureLoader()
const bgTexture = loader.load(bgimg)
bgTexture.mapping = THREE.EquirectangularReflectionMapping // 设置有折射效果的全局背景
scene.background = bgTexture
scene.environment = bgTexture

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

加载小熊模型

导入 GLTFLoader 库:用于将glTF格式的3D模型文件加载到WebGL中。

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
const gltfLoader = new GLTFLoader()
gltfLoader.load("src/assets/model/bear.gltf",(gltf)=>{
  const model = gltf.scene.children[0]
  model.material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    envMap: bgTexture,
    refractionRatio: 0.7,
    reflectivity: 0.99,
    opacity: 0.5
  })
  scene.add(model)
})

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

给出环境光光源:

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff,0.85)
scene.add(ambient)

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

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

<template>
  <div class="canvasContainer" ref="canvasContainer"></div>
</template>

<script setup>
import * as THREE from 'three'
import { ref, onMounted } from 'vue'
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"
// 添加轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import bgimg from "../assets/imgs/050.jpg"

const canvasContainer = ref(null)

// 初始化场景
const scene = new THREE.Scene()
// 初始化相机
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)
camera.position.set(1.5,1,1.5) // 设置相机位置
camera.aspect = window.innerWidth / window.innerHeight // 更新摄像头宽高比例
camera.updateProjectionMatrix() // 更新相机投影矩阵
scene.add(camera)

// 初始化渲染器
const 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 = () =>{ 
  renderer.render(scene,camera) // 渲染场景
  requestAnimationFrame(render) // 循环渲染
}

// 加载背景纹理
const loader = new THREE.TextureLoader()
const bgTexture = loader.load(bgimg)
bgTexture.mapping = THREE.EquirectangularReflectionMapping // 设置有折射效果的全局背景
scene.background = bgTexture
scene.environment = bgTexture

// 加载小熊模型
const gltfLoader = new GLTFLoader()
gltfLoader.load("src/assets/model/bear.gltf",(gltf)=>{
  const model = gltf.scene.children[0]
  model.material = new THREE.MeshPhongMaterial({
    color: 0xffffff,
    envMap: bgTexture,
    refractionRatio: 0.7,
    reflectivity: 0.99,
    opacity: 0.5
  })
  scene.add(model)
})

// 添加环境光
const ambient = new THREE.AmbientLight(0xffffff,0.85)
scene.add(ambient)

// 挂载完成之后获取dom
onMounted(()=>{
  // 添加控制器
  const controls = new OrbitControls(camera,canvasContainer.value)
  controls.enableDamping = true 
  canvasContainer.value.appendChild(renderer.domElement)
  render()
})

</script>

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

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

领支付宝红包 赞助服务器费用

相关文章

  • Three.js--》实现3d地球模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载地球模型 实现光柱效果 添加月球模型 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建 本案例还是借

    2024年02月08日
    浏览(70)
  • Three.js--》实现3d踢球模型展示

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

    2024年02月11日
    浏览(55)
  • Three.js--》实现3d字体模型展示

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

    2024年02月07日
    浏览(78)
  • Three.js--》实现3d地月模型展示

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

    2024年02月07日
    浏览(72)
  • Three.js--》实现3d官网模型展示

    目录 项目搭建 实现网页简单布局 初始化three.js基础代码 创建环境背景 加载飞船模型 实现滚轮滑动切换3D场景 设置星光流动特效 今天简单实现一个three.js的小Demo,加强自己对three知识的掌握与学习,只有在项目中才能灵活将所学知识运用起来,话不多说直接开始。 项目搭建

    2024年02月06日
    浏览(66)
  • Three.js--》实现3d圣诞贺卡展示模型

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

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

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

    2024年02月07日
    浏览(103)
  • vue 项目使用three.js 实现3D看房效果

    0.前言 该教程能帮助直接写出vue项目的3D看房效果!!! 先上效果图 1.安装依赖 2.vue代码 这里文件名为three.vue 代码非原创,出处 vue3+threejs实现全景看房 (异步加载 BOLLROOM 部件为对原代码的修改) 注意这里的hdr 文件必须要放在assets文件夹中,且要通过import模块的形式导入!

    2024年02月13日
    浏览(56)
  • vue2+three.js+blender(实现3d 模型引入并可点击效果)

    2023.9.13今天我学习了如何把3d建模里面的模型引入到vue中,并可以实现拖动,点击的效果: 首先安装: npm install three 相关代码如下:  如果没有图片可以去 Three.js--》建模软件如何加载外部3D模型?_threejs加载3d模型_亦世凡华、的博客-CSDN博客

    2024年02月03日
    浏览(64)
  • three.js添加3d模型

    three官方的几何体也就那么几个,想要生成各种各样的模型,其难度十分之大,这时引入外部模型也不失为一种选择。具体引入办法如下。 虽然名字为GLTFLoader,但实际上glb文件也是能加载的。 其中需要注意的是调节相机参数与相机位置,否则很有可能导致场景中看不见任何东

    2024年02月04日
    浏览(92)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包