2024年前端最新vue3的three场景加入背景图_vue3 threejs scene 设置背景图片，oppoWeb前端面试题

本文链接：https://blog.youkuaiyun.com/2401_84411018/article/details/138893934

ajax

1)ajax请求的原理/ 手写一个ajax请求？
2)readyState？
3)ajax异步与同步的区别？
4)ajax传递中文用什么方法？

前12.PNG

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

   scene = new THREE.Scene();
   //场景创建背景色
   const sceneLoader = new THREE.TextureLoader();
   const sceneColorTexture = sceneLoader.load("./1008.png");

   scene.background = sceneColorTexture
   //2.创建相机
   camera = new THREE.PerspectiveCamera(35,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("./1002.png");
   
   //4.添加物体
   const cubeGeometry = new THREE.ConeGeometry(1,2,32);
   //材质
   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);
   
   console.log(OrbitControls);
   state.controls = new OrbitControls(camera,renderer.domElement);
}
const animate = () => {
    requestAnimationFrame(animate);
    renderer.render(scene,camera);
}
onMounted(()=>{
    render()
    animate()
})
return {
    ...toRefs(state)
};

})







#### react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

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

![](https://img-blog.csdnimg.cn/img_convert/83d8c9abd63d0b57d16d9cced9ac02a9.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/bd0f317d6f7743c759223ec549840df0.webp?x-oss-process=image/format,png)

b71ac0)**

[外链图片转存中...(img-XjW2dCy4-1715737559504)]

[外链图片转存中...(img-ZbATemwH-1715737559505)]