three.js(22)-自适应屏幕大小

作者: 姜治宇 | 来源:发表于2022-12-31 12:11 被阅读0次

three.js(22)-自适应屏幕大小
前端自适应问题
iOS 图文混排中的图片自适应
vue 中自适应
页面自适应屏幕大小
代码自适应屏幕大小
小程序Canvas图片自适应、文字自适应、canvas图片导出不
iOS - Swift自定义UIFont字号自适应屏幕
自适应网站
temp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变屏幕大小</title>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <div id="webgl"></div>

</body>

</html>
<script>

    //场景
    var scene = new THREE.Scene();
    //相机设置为世界坐标原点
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.set(0, 0, 10);
    scene.add(camera);//添加相机
    //添加坐标轴
    var axes = new THREE.AxesHelper(500);//500表示xyz轴的长度，红:x,绿:y,蓝:z
    scene.add(axes);

    //设置贴图
    const loader = new THREE.TextureLoader();
    const texture = loader.load("./world.jpg");
    const object1 = new THREE.Mesh(
        new THREE.SphereGeometry(1, 10, 10),
        new THREE.MeshBasicMaterial({ color:'#fff',map:texture})

    );
   
    object1.name = 'object1';

    object1.position.x = 2;

    scene.add(object1);//添加物体

    var renderer = new THREE.WebGLRenderer({
        antialias:true,
        alpha:true
    });//画布
    renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

    window.addEventListener('resize',()=>{
        camera.aspect = window.innerWidth/window.innerHeight;

        camera.updateProjectionMatrix();

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

    });


    //将渲染好的canvas追加到dom
    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);
    var controls = new THREE.OrbitControls(camera, renderer.domElement);

    animate();

    function animate() {

        renderer.render(scene, camera);//开始渲染
        requestAnimationFrame(animate);

    }
    
</script>