three.js旋转的360全景canvas_geometry_panorama

最新推荐文章于 2024-08-12 08:48:24 发布

人工智能-肥鹅

最新推荐文章于 2024-08-12 08:48:24 发布

阅读量1.5k

点赞数

分类专栏： three.js 文章标签： 360全景

本文链接：https://blog.csdn.net/kfyzjd2008/article/details/79397957

版权

three.js 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

官方示例 canvas_geometry_panorama.html

这里的加载贴图应用贴图纹理还有其他方式

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: rgb(200,200,200);
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body onload="threeStart();">

    <div id="container"></div>

    <script src="build/three.js"></script>

    <script src="js/renderers/Projector.js"></script>
    <script src="js/renderers/CanvasRenderer.js"></script>

    <script>

        var camera,scene,renderer;

        var texture_placeholder, materials,

        lon = 90 ,phi = 0,theta = 0;

        target = new THREE.Vector3();    

        function initThree(){

            var container = document.getElementById('container');

            texture_placeholder = document.createElement('canvas');
            texture_placeholder.width = 128;
            texture_placeholder.height = 128;

            var context = texture_placeholder.getContext('2d');
            context.fillStyle = 'rgb(200,200,200)';
            context.fillRect(0,0,texture_placeholder.width,texture_placeholder.height);

            materials = [

					loadTexture( 'skybox/px.jpg' ), // right
					loadTexture( 'skybox/nx.jpg' ), // left
					loadTexture( 'skybox/py.jpg' ), // top
					loadTexture( 'skybox/ny.jpg' ), // bottom
					loadTexture( 'skybox/pz.jpg' ), // back
					loadTexture( 'skybox/nz.jpg' )  // front
                
            ]

            renderer = new THREE.CanvasRenderer();//渲染器

            renderer.setPixelRatio(window.devicePixelRatio);//设置像素比

            renderer.setSize(window.innerWidth,window.innerHeight);

            container.appendChild(renderer.domElement);

        }
        
        //相机
        function initCamera(){

            camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,1,1100);

        }
        
        //场景
        function initScene(){

            scene = new THREE.Scene();

        }

        function initLight(){

        }

        function initObject(){

            var geometry = new THREE.BoxGeometry(300,300,300,7,7,7);
            geometry.scale(-1,1,1);

            mesh = new THREE.Mesh(geometry,materials);
            scene.add(mesh);

        }
        
        //加载图像赋值给网格材料 
        function loadTexture(path){

            var texture = new THREE.Texture(texture_placeholder);//Texture创建一个文理。应用于一个表面，或者作为一个反射或折射的贴图。
            
            var material = new THREE.MeshBasicMaterial({map:texture,overdraw:1});//overdraw过度描边

            var image = new Image();

            image.onload = function(){

                texture.image = this;

                texture.needsUpdate = true;//如果在创建后修改纹理，将此标志设置为真，以便正确设置纹理。这对于设置包装模式(Wrap Mode)特别重要。

            };

            image.src = path;

            return material;
        }

        function threeStart(){

            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();

        }

        function animation(){

            requestAnimationFrame(animation);

            update();
            
        }

        function update(){

            lon += 0.1;

            phi = THREE.Math.degToRad( 80 );// degToRad  把角度转换为弧度。
            theta = THREE.Math.degToRad( lon );

            target.x = 500 * Math.sin( phi ) * Math.cos( theta );
            target.y = 500 * Math.cos( phi );
            target.z = 500 * Math.sin( phi ) * Math.sin( theta );

            camera.lookAt( target );

            renderer.render(scene,camera);
        }

    </script>
    
</body>
</html>