这一次来实现一个参加纹路贴图和.glb格式模型的场景。 最后的作用根本如下：
最初我想做的时直升飞机在绿色的草坪起飞，因为经费和时间有限就先实现一个低配版的场景但也不妨碍我运用API 来继续进行。
前期场景准备基础场景
this.scene = new Three.Scene() //构建场景
this.scene.fog = new Three.FogExp2(0xefd1b5, 0.0025) //场景的雾化作用
var camera = new Three.PerspectiveCamera(
120,
window.innerWidth / window.innerHeight,
0.1,
2000
)
// 定位相机 指向场景中心
camera.position.set(-20, 40, 30) //设置相机方位
camera.lookAt(this.scene.position) //设置相机方向(指向的场景目标)
this.camera = camera
// 创立渲染器
var renderer = new Three.WebGLRenderer()
// 渲染器初始色彩
renderer.setClearColor(new Three.Color(0xb9d3ff))
// 输出canvas画面大小
renderer.setSize(window.innerWidth, window.innerHeight)
this.renderer = renderer
var pointLight = new Three.PointLight(0xffffff)
pointLight.position.set(-60, 100, 100)
this.scene.add(pointLight)
this.addGrassGem() //参加草地
//将渲染器加载到dom里
document.getElementById('contanier').appendChild(this.renderer.domElement)
1.运用（Texture）纹路贴图参加一片草地
addGrassGem(){
const geometry = new Three.PlaneGeometry(10000, 10000)
const texture = new Three.TextureLoader().load(
'https://img0.baidu.com/it/u=3054322455,2150588617&fm=253&fmt=auto&app=120&f=JPEG? w=500&h=333'
)
// 纹路在水平和笔直方向的扩展办法
texture.wrapS = Three.RepeatWrapping
texture.wrapT = Three.RepeatWrapping
texture.repeat.set(100, 100) //贴图阵列
const grassMaterial = new Three.MeshBasicMaterial({ map: texture })
const grass = new Three.Mesh(geometry, grassMaterial)
grass.rotation.x = -0.5 * Math.PI
this.scene.add(grass)
}
构造函数Texture(image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)
- image:为一个图片目标，由textureLoader.load办法创立
- wrapS：界说贴图在水平方向如何包裹默许值THREE.ClampToEdgeWrapping 其他两个参数 THREE.RepeatWrapping，THREE.MirroredRepeatWrapping
THREE.ClampToEdgeWrapping(超出的部分取纹路边际的色彩)
THREE.RepeatWrapping(超出后重复填充）
THREE.MirroredRepeatWrapping（镜像，当纹路的整数部分是奇数是重复平铺，偶数是对应翻转）
-
wrapT : 界说贴图在笔直方向如何包裹(可选特点值参照wrapS)
-
repeat ：界说切图两个方向上重复的次数仅 wrapS ，wrapT 为THREE.RepeatWrapping/THREE.MirroredRepeatWrapping有效
-
rotation :纹路沿着中心点转动的弧度（rad）正值为逆时针方向。
-
center :设置旋转中心点默许（0,0）
还有一些矩阵改变特点 这儿没有用到暂时不记录
2.加载GLB模型
GLB模型是一种场景动画集合模型
loadGltf() {
// vue加载glb模型通过DRACOLoader压缩
const loader = new GLTFLoader()
// DRACOLoader压缩模型
const dracoLoader = new DRACOLoader()
// 压缩办法途径
dracoLoader.setDecoderPath('./moduler/draco/')
dracoLoader.preload()
console.log(dracoLoader, 'dracoLoader')
loader.setDRACOLoader(dracoLoader)
loader.load(
'https://10.54.14.123:8084/mapData/CesiumAir/Cesium_Air.glb',
(gltf) => {
// 将模型的整个 scene 添加到我们的场景里。尽管它的名字是 scene，实际上是一个 Three.Group
console.log(gltf, 'gltfgltfgltf')
gltf.scene.position.set(0, 2, 0)
gltf.scene.rotation.y = 110
this.scene.add(gltf.scene)
this.airPlane = gltf.scene
this.renderer.render(this.scene, this.camera)
this.animate()
},
(xhr) => {
console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
},
(error) => {
console.error(error)
}
)
},
3.因为模型没有动画先参加简单位移动画
animate() {
// // 运用动画作用，浏览器全新的动画作用
window.requestAnimationFrame(this.animate)
// // 设置模型网格的坐标
this.airPlane.position.z -= 0.5
if (this.airPlane.position.z <= -20) {
this.airPlane.position.y += 0.1
}
// 将场景和图形动态的渲染到渲染器上去
this.renderer.render(this.scene, this.camera)
},
