2024年Web前端最新vue3的three怎么做天空盒子_vue3 使用 three，2024年最新春招面试时间

本文链接：https://blog.csdn.net/2401_84411072/article/details/138753193

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

camera = null,
cube = null,
renderer = null
import * as THREE from ‘three’
import {OrbitControls} from ‘three/examples/jsm/controls/OrbitControls’
import { defineComponent,onMounted,reactive,toRefs} from ‘vue’;
export default defineComponent({
setup(){
const state = reactive({
controls:null
})
const render = () =>{
//1.创建场景
scene = new THREE.Scene();
//场景创建天空盒子
const textureCubeLoader = new THREE.CubeTextureLoader();
const textureCube = textureCubeLoader.load([
“./5.png”,
“./5.png”,
“./5.png”,
“./5.png”,
“./5.png”,
“./5.png”,
])
scene.background = textureCube;
scene.environment = textureCube;
//创建相机
camera = new THREE.PerspectiveCamera(105,window.innerWidth/window.innerHeight,0.1,1000);
//设置相机位置
camera.position.set(0,0,10);
scene.add(camera);
//3.定义材质贴图
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load(“./1001.png”);

    //4.添加物体
      const cubeGeometry = new THREE.SphereGeometry();
      //材质
      const basicMaterial = new THREE.MeshBasicMaterial({
        map:doorColorTexture
      })
      cube = new THREE.Mesh(cubeGeometry,basicMaterial);
      scene.add(cube);
      
      //5.初始化渲染器
      renderer = new THREE.WebGLRenderer();
      //设置渲染器尺寸大小
      renderer.setSize(window.innerWidth,window.innerHeight);
      //将webgl渲染的canvas内容添加到div
      let container = document.getElementById('container');
      container.appendChild(renderer.domElement);
      //使用渲染器 通过相机将场景渲染出来
      renderer.render(scene,camera);

      state.controls = new OrbitControls(camera,renderer.domElement);
    }
    const animate = () =>{
       requestAnimationFrame(animate);

       renderer.render(scene,camera);
    }
    onMounted(()=>{
        render()
        animate()
    })
    return{
        ...toRefs(state)
    }