three.js实现3d全景看房示例

    // cod引用
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
    // npm 安装使用
    npm install three
    // 引用
    import * as THREE from 'three'

    const scene = new THREE.Scene()

    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

    const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 初始化场景
    const scene = new THREE.Scene()
    // 初始化透视相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 设置相机位置
    camera.position.z = 5
    // 初始化渲染器, 并将画布添加到页面元素中
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement);
    // 渲染场景和相机
    renderer.render(scene, camera)

    // 添加立方体
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 创建物体
    var mesh = new THREE.Mesh( geometry)
    // 将物体添加到场景中
    scene.add(mesh)

    // 添加立方体
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 创建材质
    material = new THREE.MeshBasicMaterial({ color: 0xFF0000 })
    // 创建物体
    var mesh = new THREE.Mesh( geometry, material)
    // 将物体添加到场景中
    scene.add(mesh)

    // 渲染
    const render = () => {
        renderer.render(scene, camera)
        requestAnimationFrame(render)
    }
    render()

    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
    const container = renderer.domElement
    // 添加控制器
    const controls = new OrbitControls(camera, container)
    // 启用惯性
    controls.enableDamping = true
    // 相机向外移动极限
    controls.maxDistance = 4.5

    const geometry = new THREE.BoxGeometry(10, 10, 10)
    const colors = [
        { color: 0xff0000 },
        { color: 0x00ff00 },
        { color: 0x0000ff },
        { color: 0xff00ff },
        { color: 0xffff00 },
        { color: 0x00ffff }
    ]
    const material = []
    // 将6个面涂上不同的颜色
    for(let i=0, len=colors.length; i<len; i++) {
        material.push(new THREE.MeshBasicMaterial(colors[i]))
    }
    // 创建物体
    var mesh = new THREE.Mesh( geometry, material)
    // 将物体添加到场景中
    scene.add(mesh)

    // 添加立方体
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    // 左右、上下、后前
    const urls = [
        'Https://cdn.huodao.hk/upload_img/20220620/3e532822bd445485d27677ca55a79b10.jpg?proportion=1',
        'https://cdn.huodao.hk/upload_img/20220620/cebf6fbcafdf4f5c945e0881418e34ec.jpg?proportion=1',
        'https://cdn.huodao.hk/upload_img/20220620/273081d1896fc66866842543090916d3.jpg?proportion=1',
        'https://cdn.huodao.hk/upload_img/20220620/8747f61fd2215aa748dd2afb6dce3822.jpg?proportion=1',
        'https://cdn.huodao.hk/upload_img/20220620/c34262935511d61b2e9f456b689f5c1c.jpg?proportion=1',
        'https://cdn.huodao.hk/upload_img/20220620/722d2bf88f6087800ddf116511b51e73.jpg?proportion=1'
    ]
    const boxMaterial = []
    urls.forEach((item) => {
        // 纹理加载
        const texture = new THREE.TextureLoader().load(item)
        // 通过旋转修复天花板和地板
        if (item == '4_u' || item == '4_d') {
        texture.rotation = Math.PI
        texture.center = new THREE.Vector2(0.5, 0.5)
        }
        // 创建材质
        boxMaterial.push(new THREE.MeshBasicMaterial({ map: texture }))
    })
    const house = new THREE.Mesh(geometry, boxMaterial)
    house.geometry.scale(1, 1, -1)
    scene.add(house)

    const url = 'https://cdn.huodao.hk/upload_img/20220621/6bd594e62ea5654c03d7b82718443751.png?proportion=1.99'
    const geometry = new THREE.SphereGeometry(5, 32, 32)
    const texture = new THREE.TextureLoader().load(url)
    const material = new THREE.MeshBasicMaterial({ map: texture })
    const sphere = new THREE.Mesh(geometry, material)
    sphere.geometry.scale(1, 1, -1)
    scene.add(sphere)

    // 引入FBX模型解析器
    import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
    // 加载模型并添加到场景中
    loadRoomModel() {
        const loader = new FBXLoader()
        loader.load('/assets/untitled.fbx', (fbx) => {
            console.log('fbx---', fbx)
            // 缩放倍数
            fbx.scale.set(0.01, 0.01, 0.01)
            scene.add(fbx)
        })
    }

    addLight() {
        // 添加半球光源 -- 户外效果
        const light = new THREE.HemisphereLight(0xffffff, 0x444444)
        light.position.set(0, 200, 0)
        scene.add(light)
    }

    createSprite() {
        const url = 'https://cdn.huodao.hk/upload_img/20220621/1eca2b6efe7aab01d42ca45345f46a90.png?proportion=0.98'
        const texture = new THREE.TextureLoader().load(url)
        const material = new THREE.SpriteMaterial({ map: texture })
        const sprite = new THREE.Sprite(material)
        // 设置大小、位置、内容
        sprite.scale.set(0.5, 0.5, 0.5)
        sprite.position.set(0.4, 0, -4.5)
        // 加入场景中
        scene.add(sprite)
    }

    GoToRoom(e) {
        e.preventDefault()
        const { clientX, clientY } = e
        const dom = renderer.domElement
        // 拿到canvas画布到屏幕的距离
        const domRect = dom.getBoundinGClientRect()
        // 计算标准设备坐标 - 归一化设备坐标
        const x = ((clientX - domRect.left) / dom.clientWidth) * 2 - 1
        const y = -((clientY - domRect.top) / dom.clientHeight) * 2 + 1
        const vector = new THREE.Vector3(x, y)
        // 转世界坐标
        const worldVector = vector.unproject(camera)
        console.log('世界坐标', worldVector)
        // 向量相减，并获取单位向量
        const ray = worldVector.sub(camera.position).nORMalize()
        // 射线投射对象， 第一个参数是射线原点 第二个参数是射线方向
        const raycaster = new THREE.Raycaster(camera.position, ray)
        raycaster.camera = camera
        //返回射线选中的对象 //第一个参数是检测的目标对象 第二个参数是目标对象的子元素
        const intersects= raycaster.intersectObjects(scene.children)
        if (intersects.length > 0) {
            console.log("捕获到对象", intersects);
            const intersect = intersects[0]
            if (intersect.object?.type == "Sprite" && intersect.object?.content?.isComeAround) {
            // 清除当前房间和精灵模型
            scene.remove(sphere)
            scene.remove(sprite)
            if (intersect.object?.content?.to == '小明家') {
                cube = cube || this.createCube()
                scene.add(cube)
            }
            }
        }else{
            console.log("没捕获到对象"); 
        }
    },
    initEvent() {
        window.addEventListener('click', this.GoToRoom)
    }