建筑网站建设需要注意什么,宁波网站推广高手,灰色关键词快速排名,自己做的网站还要买域名么目录
项目搭建
初始化three.js基础代码
加载背景纹理
加载小熊模型 今天简单实现一个three.js的小Demo#xff0c;加强自己对three知识的掌握与学习#xff0c;只有在项目中才能灵活将所学知识运用起来#xff0c;话不多说直接开始。
项目搭建
本案例还是借助框架书写…目录
项目搭建
初始化three.js基础代码
加载背景纹理
加载小熊模型 今天简单实现一个three.js的小Demo加强自己对three知识的掌握与学习只有在项目中才能灵活将所学知识运用起来话不多说直接开始。
项目搭建
本案例还是借助框架书写three项目借用vite构建工具搭建vue项目vite这个构建工具如果有不了解的朋友可以参考我之前对其讲解的文章vite脚手架的搭建与使用 。搭建完成之后用编辑器打开该项目在终端执行 npm i 安装一下依赖安装完成之后终端在安装 npm i three 即可。
因为我搭建的是vue3项目为了便于代码的可读性所以我将three.js代码单独抽离放在一个组件当中在App根组件中进入引入该组件。具体如下
template!-- 3D水晶小熊 --CrystalBear/CrystalBear
/templatescript setup
import CrystalBear from ./components/CrystalBear.vue;
/scriptstyle langless*{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.innerHeightcamera.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 加载小熊模型
导入 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)
}) 给出环境光光源
// 添加环境光
const ambient new THREE.AmbientLight(0xffffff,0.85)
scene.add(ambient) demo做完给出本案例的完整代码获取素材也可以私信博主
templatediv classcanvasContainer refcanvasContainer/div
/templatescript 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.jpgconst 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.innerHeightcamera.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
