React
-
介绍一下react
-
React单项数据流
-
react生命周期函数和react组件的生命周期
-
react和Vue的原理，区别，亮点，作用
-
reactJs的组件交流
-
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
-
项目里用到了react，为什么要选择react，react有哪些好处
-
怎么获取真正的dom
-
选择react的原因
-
react的生命周期函数
-
setState之后的流程
-
react高阶组件知道吗？
-
React的jsx，函数式编程
-
react的组件是通过什么去判断是否刷新的
-
如何配置React-Router
-
路由的动态加载模块
-
Redux中间件是什么东西，接受几个参数
-
redux请求中间件如何处理并发
开源分享：docs.qq.com/doc/DSmRnRG…
//场景 相机 物体 渲染器 轨道控制器
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();
//设置渲染器尺寸大小
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)
}
}
})
#container{ width:100vw; height:100vh; } ### 最后 基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。 **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)**
