2024年Web前端最新vue3的three怎么做天空盒子_vue3 使用 three(2)，Web前端最新实习面试经验总结

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

如何引入three请看
加入three

//图片

//效果

//图片放在public文件夹里面
//代码

<template>
    <div id="container"></div>
</template>

<script>
//场景 相机 物体 渲染器 轨道控制器
let scene = null,
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();


### 最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![前端资料图.PNG](https://img-blog.csdnimg.cn/img_convert/cb48d62b6bed4548609f9f09c2025562.webp?x-oss-process=image/format,png)

forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-AnzIJkLV-1715435894138)]