three.js 3D Banner实战

需求场景

        1、加载glb模型

        2、设置背景

        3、让第一个模型转动，并调整模型的转动速度

        4、设置模型的宽度。

遇到的问题

        1、为什么加载的模型不能转动？

        加载的glb模型需要加入到goup里面才能转动。

代码实施

<script setup>
import * as THREE from 'three'
import Stat from 'three/examples/jsm/libs/stats.module'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

import * as dat from 'dat.gui'
import { onMounted, ref } from 'vue';

let w = 500
let h = 500
const stat = new Stat()

//Scene
const scene = new THREE.Scene()

//Camera
const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100)
camera.position.set(0, 0.5, 3)
camera.lookAt(0, 0, 0)


//渲染
const renderer = new THREE.WebGLRenderer()
const orbitControls = new OrbitControls(camera, renderer.domElement)
const loader = new GLTFLoader();
const TextureLoader = new THREE.TextureLoader()

const clock = new THREE.Clock()

const containerRef = ref()

//组合
const group = new THREE.Group()

//
const groupEarth = new THREE.Group()

//正方形 地球
const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5)
//材质
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const earth = new THREE.Mesh(geometry, material)
groupEarth.position.y = 0.5
groupEarth.add(earth)
scene.add(earth)


// group.add(group2)

let glbs

//模型2  模型可以加入group，然后给group动画 可达鸭自转，同时围绕着地球转
loader.load( 'src/assets/file/kedaya.glb', function ( gltf ) {
    console.log('kedaya',gltf)
    gltf.scene.position.y = 0.5
    glbs = gltf.scene
    groupEarth.add(glbs)
    scene.add(groupEarth)
})
const zuqiu = new THREE.Group()


//模型3  模型可以加入group，然后给group动画 可达鸭自转，同时围绕着地球转
loader.load( 'src/assets/file/zuqiu.glb', function ( gltf ) {
    console.log('zuqiu',gltf)
    gltf.scene.position.y = 1
    zuqiu.add(gltf.scene)
    scene.add(zuqiu)
})



// //模型3
const geometry2 = new THREE.BoxGeometry(1, 1, 1)
const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const month = new THREE.Mesh(geometry2, material2)
month.position.y = 1
group.add(month)

const geometry3 = new THREE.BoxGeometry(0.2, 0.2, 0.2)
const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff })
const cube3 = new THREE.Mesh(geometry3, material3)
cube3.position.y = 0.4
groupEarth.add(cube3)

scene.add(group)

//添加背景图
//多个面贴多张图片
const texture1 = TextureLoader.load('src/assets/img/girl/1.jpg')
const texture2 = TextureLoader.load('src/assets/img/girl/2.jpg')
const texture3 = TextureLoader.load('src/assets/img/girl/3.jpg')
const texture4 = TextureLoader.load('src/assets/img/girl/4.jpg')
const texture5 = TextureLoader.load('src/assets/img/girl/5.jpg')
const texture6 = TextureLoader.load('src/assets/img/girl/6.jpg')

//设置背景
scene.background = texture2

onMounted(() => {
    renderer.setSize(w, h)
    renderer.setClearColor(0x95e4e8) //设置背景色
    //解决加载gltf格式模型纹理贴图和原图不一样问题
    renderer.outputEncoding = THREE.sRGBEncoding;

    containerRef.value.appendChild(renderer.domElement)
    // containerRef.value.appendChild(stat.dom)

    tick()
})

function tick() {
    const time = clock.getElapsedTime()

    //地球自转  绕着z轴旋转
    earth.rotation.z = time
    //将模型加入一个组合里面，就可以自己转动了
    groupEarth.rotation.y = time
    //可达鸭围绕着
    groupEarth.rotation.z = time
    //
    month.rotation.z = time
    group.rotation.z = time*5
    requestAnimationFrame(tick)
    renderer.render(scene, camera)
    stat.update()
    orbitControls.update()
}

</script>

<template>
    <main ref="containerRef" class="threeBox">
    </main>
</template>
<style scoped lang="less">
.threeBox{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    margin-top: 200px;
}
</style>