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

因为看到ThingJS中的文章ThingJS和threejs的区别在哪？ThingJS是免费的么？-场景搭建-ThingJS 开发者社区讲THREE很难学，这是误导，其实是很简单的；

就拿他文章里的代码，全部注释一遍给大家参考吧；

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

<head>
    <title>three.js webgl - geometry - cube</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
</head>

<body>
    <script type="module">
        // 引入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);
        }
    </script>
</body>

</html>

看完了带注释和格式的代码是不是感觉So Easy！

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

猜你喜欢

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