three.js从入门到精通系列教程041 - 使用全景图设置场景背景,通过立方相机CubeCamera查看室内全景

最新推荐文章于 2024-07-13 10:00:00 发布

smartsmile2012

最新推荐文章于 2024-07-13 10:00:00 发布

阅读量524

点赞数 11

分类专栏： three.js从入门到精通系列教程文章标签： javascript 数码相机开发语言 ecmascript three.js 前端

本文链接：https://blog.csdn.net/smartsmile2012/article/details/135747657

版权

three.js从入门到精通系列教程专栏收录该内容

52 篇文章 9 订阅

订阅专栏

本文详细介绍了如何在three.js中使用全景图作为场景背景，并通过立方相机实现室内环境的360度查看，同时展示了如何创建环境光源和动态更新环境贴图。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程041 - 使用全景图设置场景背景,通过立方相机CubeCamera查看室内全景</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        var myCubeCamera, myCamera, myScene, myRenderer;
        var lon = 0, lat = 0, phi = 0, theta = 0;
        var myTextureLoader = new THREE.TextureLoader();
        myTextureLoader.load('images/img054.jpg', function (myTexture) {
            init(myTexture);
            animate();
        });
        function init(myTexture) {
            //创建渲染器
            myRenderer = new THREE.WebGLRenderer({ antialias: true });
            myRenderer.setSize(window.innerWidth, window.innerHeight);
            $("#myContainer").append(myRenderer.domElement);
            myCamera = new THREE.PerspectiveCamera(60,
                window.innerWidth / window.innerHeight, 1, 1000);
            myScene = new THREE.Scene();
            //使用全景图设置场景背景
            myScene.background = new THREE.WebGLCubeRenderTarget(1024)
                .fromEquirectangularTexture(myRenderer, myTexture);
            //创建环境光
            var myAmbientLight = new THREE.AmbientLight('white');
            myScene.add(myAmbientLight);
            //创建两个聚光灯光源
            var mySpotLight1 = new THREE.SpotLight('white');
            mySpotLight1.position.set(600, 600, 600);
            myScene.add(mySpotLight1);
            var mySpotLight2 = new THREE.SpotLight('white');
            mySpotLight2.position.set(-600, -600, -600);
            myScene.add(mySpotLight2);
            var myCubeRenderTarget = new THREE.WebGLCubeRenderTarget(256,
                {
                    format: THREE.RGBFormat, generateMipmaps: true,
                    minFilter: THREE.LinearMipmapLinearFilter
                });
            //创建THREE.CubeCamera全景照相机
            myCubeCamera = new THREE.CubeCamera(1, 400, myCubeRenderTarget);
            //使用全景照相机拍摄的环境贴图创建MeshLambertMaterial
            var myMeshLambertMaterial = new THREE.MeshLambertMaterial(
                { envMap: myCubeRenderTarget.texture });
            var myMesh = new THREE.Mesh(
                new THREE.SphereGeometry(34, 100, 100), myMeshLambertMaterial);
            myScene.add(myMesh);
        }
        function animate() {
            requestAnimationFrame(animate);
            //更新环境贴图(全景照相机不停地拍照)
            myCubeCamera.update(myRenderer, myScene);
            lon += 0.35;
            lat = Math.max(- 85, Math.min(85, lat));
            phi = THREE.MathUtils.degToRad(90 - lat);
            theta = THREE.MathUtils.degToRad(lon);
            myCamera.position.x = 100 * Math.sin(phi) * Math.cos(theta);
            myCamera.position.y = 100 * Math.cos(phi);
            myCamera.position.z = 100 * Math.sin(phi) * Math.sin(theta);
            myCamera.lookAt(myScene.position);
            myRenderer.render(myScene, myCamera);
        }
    </script>
</body>

</html>

smartsmile2012

关注

11
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
three.js从入门到精通系列教程041 - 使用全景图设置场景背景,通过立方相机CubeCamera查看室内全景

【代码】three.js从入门到精通系列教程041 - 使用全景图设置场景背景,通过立方相机CubeCamera查看室内全景。
复制链接

扫一扫