three.js-线上运动的光效

最新推荐文章于 2024-04-19 14:13:28 发布

纳路透

最新推荐文章于 2024-04-19 14:13:28 发布

阅读量8.1k

点赞数 2

分类专栏： Three

本文链接：https://blog.csdn.net/weixin_43842660/article/details/97793935

版权

先上图：
在这里插入图片描述
一个简单的动画效果，刚开始研究three.js，作的一个小demo。
代码结构：

这些js在three.js的官网git上可以下载。
index.html中代码如下，全部代码，写的有点儿low：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            display: block;
        }

        #myBox {
            width: 60vw;
            height: 80vh;
            margin: 10vh auto;
        }
    </style>
</head>

<body>
    <div id="myBox"></div>
    <script type="module">
        import * as THREE from './js/three-src/three.module.js';
        import { OrbitControls } from './js/obj-control/OrbitControls.js';
        import { Lensflare, LensflareElement } from './js/obj-control/Lensflare.js';
        import { Line2 } from './js/lines/Line2.js';
        import { LineMaterial } from './js/lines/LineMaterial.js';
        import { LineGeometry } from './js/lines/LineGeometry.js';
        var Boxes = (function (THREE) {
            'use strict

最低0.47元/天解锁文章

纳路透

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
6
评论
three.js-线上运动的光效

先上图：一个简单的动画效果，刚开始研究three.js，作的一个小demo。代码结构：这些js在three.js的官网git上可以下载。index.html中代码如下，全部代码，写的有点儿low：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫