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

Ning+

已于 2022-02-25 11:09:06 修改

阅读量2.2k

点赞数 2

分类专栏： ThreeJS 文章标签： ThreeJS WebGL Web3D

于 2020-04-24 11:07:03 首次发布

本文链接：https://blog.csdn.net/o0pk2008/article/details/105725833

版权

ThreeJS 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

因为看到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！