Three.js

最新推荐文章于 2023-10-08 11:33:13 发布

星星也会数人类嘛

最新推荐文章于 2023-10-08 11:33:13 发布

阅读量347

点赞数

分类专栏：插件工具文章标签： 3D预览 Three.js

本文链接：https://blog.csdn.net/qq_42627162/article/details/120720537

版权

插件工具专栏收录该内容

7 篇文章 1 订阅

订阅专栏

博客记录下使用Three.js展示3d文件的全过程：
学习博客链接：Three.js学习博客

1. 下载

官网：https://threejs.org/
在这里插入图片描述
让我们打开新鲜的解压文件：

看一下目录：

build：里面含有 Three.js 构建出来的 JavaScript 文件，可以直接引入使用，并有压缩版；
docs：Three.js 的官方文档
editor：Three.js 的一个网页版的模型编辑器；
examples：Three.js 的官方案例，如果全都学会，必将成为大神；
src：这里面放置的全是编译 Three.js 的源文件；
test：一些官方测试代码，我们一般用不到；
utils：一些相关插件；
其他：开发环境搭建、开发所需要的文件，如果不对 Three.js 进行二次开发，用不到。

2. 第一个Three.js案例：

把three.js文件copy到项目中，引入到下面的html内：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>我的第一个Three.js案例</title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body onload="init()">
    <script src="../../assets/expand/plugins/Three/three.js"></script>
    <script>
        //声明一些全局变量
        var renderer, camera, scene, geometry, material, mesh;
        //初始化渲染器
        function initRenderer() {
            renderer = new THREE.WebGLRenderer();
            //实例化渲染器
            renderer.setSize(window.innerWidth, window.innerHeight);
            //设置宽和高
            document.body.appendChild(renderer.domElement);
            //添加到dom
        }

        //初始化场景
        function initScene() {
            scene = new THREE.Scene();
            //实例化场景
        }
        //初始化相机
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);
            //实例化相机
            camera.position.set(0, 0, 15);
        }

        //创建模型
        function initMesh() {
            geometry = new THREE.BoxGeometry( 2, 2, 2 );
            //创建几何体
        material = new THREE.MeshNormalMaterial();
        //创建材质
        mesh = new THREE.Mesh( geometry, material );
        //创建网格
        scene.add( mesh ); //将网格添加到场景
        }

        //运行动画
        function animate() {
            requestAnimationFrame(animate);
            //循环调用函数
        mesh.rotation.x += 0.01;
        //每帧网格模型的沿x轴旋转0.01弧度
        mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
        renderer.render( scene, camera ); //渲染界面
         }

         //初始化函数，页面加载完成是调用
        function init() {
            initRenderer();
            initScene();
            initCamera();
            initMesh();
            animate();
        }

    </script>


</body>
</html>

运行预览：
在这里插入图片描述

星星也会数人类嘛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js

博客记录下使用Three.js展示3d文件的全过程：学习博客链接：Three.js学习博客1. 下载官网：https://threejs.org/让我们打开新鲜的解压文件：看一下目录：build：里面含有 Three.js 构建出来的 JavaScript 文件，可以直接引入使用，并有压缩版；docs：Three.js 的官方文档editor：Three.js 的一个网页版的模型编辑器；examples：Three.js 的官方案例，如果全都学会，必将成为大神；src：这里面放置的
复制链接

扫一扫