3D three.js（1）怎么写一个3D旋转的正方体

最新推荐文章于 2024-01-22 13:41:41 发布
最新推荐文章于 2024-01-22 13:41:41 发布
阅读量805 收藏 2
点赞数
分类专栏： 3D js 文章标签： 3d js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39818813/article/details/127614780
版权
js 同时被 2 个专栏收录
105 篇文章 0 订阅
订阅专栏
3D
1 篇文章 0 订阅
订阅专栏

效果如图所示：
在这里插入图片描述

本篇暂未用到three.js，但是能学到一些基础的3D知识！

先记住xyz轴的展示和画法：
rotate:左手法则___
伸出左手，大拇指指向正轴方向，四个手指的指向即是旋转正向，但务必记住是左手！

在这里插入图片描述

1. 先画立方体初始面

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D正方体</title>
    <style>
        .cube {
            /* 定义 3D 元素距视图的距离，以像素计，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 */
            -webkit-perspective: 1000px;
            /* 居中对齐 */
            width: 30px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
            position: absolute;
            /* 6s，动画的执行时间：动画6s要完成 */
            /* loadingBarSpin：动画的名称*/
            /* linear，规定动画的速度曲线：动画从开始到结束保持相同的速度。*/
            /* infinite，定义动画应该播放多少次：无限次（永远）*/
            -webkit-animation: 6s loadingBarSpin linear infinite;
            /* 让转换的子元素保留3D转换，表示所有子元素在3D空间中呈现 */
            -webkit-transform-style: preserve-3d;
            /* 沿x轴往下，y轴往左旋转20度 */
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        /* 设置所有子节点的样式 */
        .cube * {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid rgb(54, 226, 248);
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="font"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

一开始由于6个面都有position: absolute;,所以它们是叠在一起的。

2.前面

在这里插入图片描述

        /* 往前移动15px */
        .cube .font {
            -webkit-transform: translateZ(15px);
        }

3.后面

在这里插入图片描述

        /* 往后移动15px */
       .cube .back {
            -webkit-transform: translateZ(-15px);
        }

4.左面

在这里插入图片描述

    /* 先旋转90度，与中间面相交 */
        .cube .left {
            -webkit-transform: rotateY(-90deg) translateZ(15px);
        }

5.右面

在这里插入图片描述

 .cube .right {
            -webkit-transform: rotateY(90deg) translateZ(15px);
        }

6.上面

在这里插入图片描述

        .cube .top {
            -webkit-transform: rotateX(90deg) translateZ(15px);
        }

7.下面

在这里插入图片描述

        .cube .top {
            -webkit-transform: rotateX(90deg) translateZ(15px);
        }

到此为止，正方体就画完了，此时可以给一个旋转的动画，来增加它的画面感

8.增加动画

  @-webkit-keyframes loadingBarSpin {
            from {
                -webkit-transform: translateZ(-15px) rotateX(0) rotateY(0deg);
                transform: translateZ(-15px) rotateX(0) rotateY(0deg);
            }

            to {
                -webkit-transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
            }
        }
```

### 9完整代码
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>3D正方体</title>
    <style>
        .cube {
            /* 定义 3D 元素距视图的距离，以像素计，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。 */
            -webkit-perspective: 1000px;
            /* 居中对齐 */
            width: 30px;
            height: 30px;
            left: 50%;
            top: 50%;
            margin-left: -15px;
            margin-top: -15px;
            position: absolute;
            /* 6s，动画的执行时间：动画6s要完成 */
            /* loadingBarSpin：动画的名称*/
            /* linear，规定动画的速度曲线：动画从开始到结束保持相同的速度。*/
            /* infinite，定义动画应该播放多少次：无限次（永远）*/
            -webkit-animation: 6s loadingBarSpin linear infinite;
            /* 让转换的子元素保留3D转换，表示所有子元素在3D空间中呈现 */
            -webkit-transform-style: preserve-3d;
            /* 沿x轴往下，y轴往左旋转20度 */
            -webkit-transform: rotateX(-20deg) rotateY(-20deg);
        }

        /* 设置所有子节点的样式 */
        .cube * {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid rgb(54, 226, 248);
        }

        /* 往前移动15px */
        .cube .font {
            -webkit-transform: translateZ(15px);
        }

        /* 往后移动15px */
        .cube .back {
            -webkit-transform: translateZ(-15px);
        }

        /* 先旋转90度，与中间面相交 */
        .cube .left {
            -webkit-transform: rotateY(-90deg) translateZ(15px);
        }


        .cube .right {
            -webkit-transform: rotateY(90deg) translateZ(15px);
        }

        .cube .top {
            -webkit-transform: rotateX(90deg) translateZ(15px);
        }

        .cube .bottom {
            -webkit-transform: rotateX(-90deg) translateZ(15px);
        }

        @-webkit-keyframes loadingBarSpin {
            from {
                -webkit-transform: translateZ(-15px) rotateX(0) rotateY(0);
                transform: translateZ(15px) rotateX(0) rotateY(0);
            }

            to {
                -webkit-transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
                transform: translateZ(-15px) rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="cube">
        <div class="font"></div>
        <div class="back"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>

</body>

</html>
```
南城夏季
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序-vr学习
小屁孩大帅-保密的博客
10-27 437
index.js import * as THREE from './three.weapp.min.js' import { OrbitControls } from './OrbitControls' Page({ data: { canvasId: null }, onLoad() { wx.createSelectorQuery().select('#c').node().exec(res => { const canvas = T...
Three.js教程：三维坐标系
ygtu2018的博客
06-14 2321
推荐：将加入你的3D工具链。
图片3D旋转(js)
m0_49378755的博客
01-22 1183
图片3D旋转
JavaScript实现3D旋转相册
算法与编程之美
02-09 3814
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述3D旋转相册是通过perspective属性的盒...
three.js (3D)前端页面渲染 初识three.js
weixin_50207776的博客
08-26 1366
近期进行了关于three.js 的产品展示项目，利用js基础初学了three.js，网络关于three.js的知识过于稀少，利用csdn记录笔记和分享。 //都是个人笔记和个人总结（仅供参考） 1.初识three.js three.js的基本构成分为，画布，相机，控制器，模型，渲染器。5个元素组成了一个基本的场景。 ...
Three.js-webgl物联网粮仓3D可视化
最新发布
03-12
Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。它充分利用WebGL API，使开发者无需深入理解底层复杂的图形编程，就能便捷地构建出引人入胜的3D场景。在这个项目中，Three.js用于构建...
three.js 可视化大屏 3D场馆模型Demo
02-26
在本项目中，"three.js 可视化大屏 3D场馆模型Demo"是一个基于最新前端技术栈的实现，旨在帮助新手学习如何利用three.js创建3D场馆模型，并将其应用于大屏幕展示。这个项目结合了Vue3、Vite和TypeScript等现代Web...
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
基于vue3，three.js,3D智慧园区
11-09
**Three.js**: Three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D对象。它简化了WebGL的使用，提供了一个面向对象的接口，用于创建场景、几何体、材质、光源等。在“3D智慧园区”项目中，Three.js被...
用three.js打造的3D个人炫酷网站.zip
12-10
用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站...
原生js实现3d旋转
11-08
用原生js实现3d旋转,有需要的欢迎下载学习..
jCube只需添加一行js脚本就可以创建出一个可以拖动旋转的3d立方体
08-12
jCube 只需添加一行js脚本就可以创建出一个可以拖动旋转的3d立方体
three.js实现围绕某物体旋转
11-30
话不多说，请看代码： 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"> <head> <meta charset="UTF-8"> <title>Document</title> [removed][removed] <script src="http://cooklife.cn/html/node_modules/dat.gui/build/dat.gui.min.js
【3D】three.js入门
weixin_64210950的博客
04-27 171
Three.js 是基于 WebGL 封装的 API 库，在 javascript 中使用 Three.js 并实现 3D 场景
css+js实现三维空间图片旋转，炫酷旋转
冉冉胜起博客
03-06 2865
1.先看效果图：例子中用的为网络图片，可以更换为自己的，由于大小限制，只能短暂录制！具体效果，可自己运行查看！ 2.代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>用CSS3&JS实现在三维空间里图片3D旋转效果 - Web前...
H5画布canvas特效（旋转跳跃不停歇）
Tino's Space
12-27 3688
.panel{ margin:20% auto auto 35%; } .input{ width:500px; height:30px; } .btn{ width:515px; height:40px; } .input_form{ float:left; margin:-35% 0 0 25%; position:absolute; } Login function proje
ThreeJs 3D 全景项目开发总结
weixin_34240520的博客
09-27 3806
本文来自网易云社区作者：唐钊项目背景那是在一个毫无征兆的下午，我还沉浸在 vue 的世界中，突然编辑跑过来说N的新官网想做一些3D全景的东西，一开始其实我的内心是拒绝的，一是没怎么实质性做过 WEBGL 的东西，只是组内 mini 项目的时候看了看基础的内容，再者当时也很忙，感觉这东西听起来就很复杂，随着项目开发结束在此写下这篇文章，记录一下自己在开发过程中遇到的问题和解决的思路以供备忘。准备工作...
3D全景之ThreeJs
weixin_30328063的博客
02-28 1015
3D全景之ThreeJs 一、前言 随着H5越来越多的被应用到各个领域，3D也越来越频繁的出现在各个H5案例中，今天我们就来讨论一下3D全景的实现。 据百度百科上介绍：720全景是视角超过人的正常视角的图像。顾名思义就是给人以三维立体感觉的实景360度全方位图像。全景实际上只是一种对周围景象以某种几何关系进行映射生成的平面图片，只有通过全景播放器的矫正处理才能成为三维全景（...
vue2项目中使用three.js创建一个旋转的正方体
03-29
1. 安装three.js ``` npm install three ``` 2. 创建一个Vue组件 ``` <div ref="container"></div> import * as THREE from 'three' export default { name: 'ThreeCube', mounted() { this.init() }, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值