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

最新推荐文章于 2025-06-19 14:07:56 发布

原创

最新推荐文章于 2025-06-19 14:07:56 发布 · 596 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数码相机 #开发语言 #ecmascript #three.js #前端

<!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 =