【ThreeJS】基础教学 创建一个立方体

    three.js webgl - geometry - cube
    
    
    



    
        // 引入three库
        import * as THREE from '../build/three.module.js';
        // 创建相机，场景，渲染器
        var camera, scene, renderer;
        // 创建网格
        var mesh;
        // 初始化
        init();
        // 帧动画
        animate();
        // 初始化函数
        function init() {
            // 创建相机实例 fov70，高宽比，远近裁剪
            camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
            // 设置相机位置
            camera.position.z = 400;
            // 创建场景
            scene = new THREE.Scene();
            // 创建贴图
            var texture = new THREE.TextureLoader().load('textures/crate.gif');
            // 创建几何体 = Box几何体缓冲区 scale 200，200，200
            var geometry = new THREE.BoxBufferGeometry(200, 200, 200);
            // 创建材质 = 基础材质 贴图 = texture
            var material = new THREE.MeshBasicMaterial({ map: texture });
            // 网格 = 几何体+材质
            mesh = new THREE.Mesh(geometry, material);
            // 场景中添加 网格模型
            scene.add(mesh);
            // 创建渲染器 开启抗锯齿
            renderer = new THREE.WebGLRenderer({ antialias: true });
            // 设置渲染器像素比 = window设备的像素比
            renderer.setPixelRatio(window.devicePixelRatio);
            // 设置渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
            // html dom节点添加渲染器内容
            document.body.appendChild(renderer.domElement);
            // 添加窗口尺寸变化监听
            window.addEventListener('resize', onWindowResize, false);
        }
        // 窗口变化后执行的函数
        function onWindowResize() {
            // 相机纵横比重新设置
            camera.aspect = window.innerWidth / window.innerHeight;
            // 更新相机投影矩阵
            camera.updateProjectionMatrix();
            // 设置渲染器尺寸
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        // 设置帧动画函数
        function animate() {
            // 循环执行帧动画
            requestAnimationFrame(animate);
            // 旋转mesh x轴
            mesh.rotation.x += 0.005;
            // 旋转mesh y轴
            mesh.rotation.y += 0.01;
            // 执行帧渲染
            renderer.render(scene, camera);
        }