threejs完成一个初步的3D看房！

const renderer = new THREE.WebGL1Renderer()//渲染器
const scene = new THREE.Scene()//场景
renderer.setPixelRatio(window.devicePixelRatio);//像素
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 60)//相机
const cameracontrol = new OrbitControls(camera, renderer.domElement)//相机轨道对象
const state = new Stats()//帧率
export function init() {
    cameracontrol.addEventListener("change", render)//操作相机轨道以及执行渲染操作
    camera.position.set(0, 1, 0)//相机位置
    renderer.setSize(window.innerWidth, window.innerHeight)//渲染器长宽
    document.body.appendChild(renderer.domElement)//加入渲染器
    document.body.appendChild(state.dom)
    const mesh = addimg("https://qhyxpicoss.kujiale.com/r/2019/07/01/L3D137S8ENDIADDWAYUI5L7GLUF3P3WS888_3000x4000.jpg?x-oss-process=image/resize,m_fill,w_1600,h_920/format,webp", scene, 1)
    scene.add(mesh)
}

function render() { //函数渲染与帧率加载
    renderer.render(scene, camera)
    state.update()
}

function addimg(url, scene, n) {
    const texture = new THREE.TextureLoader().load(url)//加载纹理图
    const material = new THREE.MeshBasicMaterial({ map: texture });//贴图
    material.side = THREE.DoubleSide;//双向贴图
    const geometry = new THREE.SphereGeometry(50, 256, 256);//创建一个球形几何体(半径，水平分段数，垂直分段数)
    const mesh = new THREE.Mesh(geometry, material);//网格对象，将几何体和材质加入到网格里
    cameracontrol.minDistance = 1;//相机轨道的最小视距
    cameracontrol.maxDistance = 2;//相机轨道的最大视距
    cameracontrol.update();
    scene.add(mesh);//把网格加入到场景中
    return mesh
}

存在的问题：
显示过于粗糙，猜测是由于景深相机的深度与浏览器的像素渲染问题，球形还是过于搪塞，下次用矩形的实现就好的多了！

three-js中文地址
three-js官网
借鉴：https://juejin.cn/post/6844903918409875469