精华内容
下载资源
问答
  • 旋转 实现一个正方体

    2021-04-01 10:53:36
    如果以X轴或Y轴旋转90度,正好消失,如果按照x90 则平了 y90 则竖了 本来以为是会展示条线,但实际上是什么都没有 旋转之后,z轴的方向会随着切面的变化而变化。 <!DOCTYPE html> <html lang="en"> &...

    旋转时,父盒子是人与舞台的距离,必须设置 perspective属性,perspective值越大,说明观察者距离舞台越远,看到的物体越小。
    该正方体的边长为200
    如果以X轴或Y轴旋转90度,正好消失,如果按照x90 则平了 y90 则竖了 本来以为是会展示一条线,但实际上是什么都没有
    旋转之后,z轴的方向会随着切面的变化而变化。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .box {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                margin: 100px auto;
                perspective: 300px;
                position: relative;
            }
    
            .box p {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 200px;
            }
    
            .box p:nth-child(1) {
                background-color: rgba(42, 128, 19, 0.486);
                /* 前面 */
                transform: translateZ(100px); /* 是相对于中轴线在转动 面与线的交点就是轴*/ 
            }
    
            .box p:nth-child(2) {
                background-color: rgba(42, 128, 199, 0.486);
                /* 顶面 */
                transform: rotateY(90deg) translateZ(-100px);/* rotateX(90deg) jiu*/
            }
            .box p:nth-child(3){
                background-color: rgba(42, 128, 199, 0.486);
                /* 右面 */
                transform: rotateY(90deg) translateZ(100px) ;/* 按照y轴旋转90就平了,看起来就消失了*/
            }
            .box p:nth-child(4){
                background-color: rgba(42, 128, 19, 0.486);
                /* 右面 */
                transform: rotateX(90deg)  translateZ(100px);
            }
            .box p:nth-child(5){
                background-color: rgba(42, 12, 199, 0.486);
                /* 右面 */
                transform: rotateX(90deg)  translateZ(-100px);
            }
            .box p:nth-child(6){
                background-color: rgba(42, 222, 199, 0.486);
                /* 右面 */
                transform:  translateZ(-100px);
            }
    
    
            
        </style>
    </head>
    
    <body>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </body>
    
    </html>
    
    展开全文
  • 用html和css做一个旋转的正方体

    用html和css做一个旋转的正方体

    <!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>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            section{
                width: 200px;
                height: 200px;
                /* 设置景深 */
                perspective: 10000px;
                margin: 50px auto;
            }
            section:hover #box{
                transform:rotateX(360deg) rotateY(360deg) ;
            }
            #box{
                width: 200px;
                height: 200px;
                perspective: 10000px;
                /* 既是p标签的舞台,自己也是section标签的演员 要设置transform-style*/
                transform-style: preserve-3d;
                position: relative;
                transition: transform 10s linear 0s;
    
            }
            #box p{
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
            }
            #front{
                /* 让盒子向前移动100px,更靠近观察者100px */
                transform: translateZ(100px);
                background-color:chocolate;
            }
            #top{
                /* 让盒子绕着X轴3D旋转90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向上)移动100px*/
                transform: rotateX(90deg) translateZ(100px);
                background-color:rgb(22, 243, 232);
            }
            #back{
                /* 让盒子向后移动100px,远离观察者100px  */
                transform: translateZ(-100px);
                background-color:rgb(13, 105, 241);
            }
            #bottom{
                /* 让盒子绕着X轴3D旋转-90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向下)移动100px  */
                transform: rotateX(-90deg) translateZ(100px);
                background-color:rgb(124, 238, 17);
            }
            #left{
                /* 让盒子绕着Y轴3D旋转-90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向左)移动100px*/
                transform: rotateY(-90deg) translateZ(100px);
                background-color:rgb(233, 10, 177);
            }
            #right{
                /* 让盒子绕着Y轴3D旋转90度,此时盒子垂直于电脑屏幕,然后再让它沿着此时的Z轴正方向(向右)移动100px*/
                transform: rotateY(90deg) translateZ(100px);
                background-color:rgb(238, 17, 17);
            }
        </style>
    </head>
    <body>
        <section>
            <div id="box">
                <p id="front">正面</p>
                <p id="top">顶面</p>
                <p id="back">背面</p>
                <p id="bottom">底面</p>
                <p id="left">左面</p>
                <p id="right">右面</p>
            </div>
        </section>
    </body>
    </html>
    
    

    效果如图:
    在这里插入图片描述
    当然如果把颜色设置为rgba加点透明,去掉文字会更好看一点。

    <!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>Document</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            section{
                width: 200px;
                height: 200px;
                /* 设置景深 */
                perspective: 10000px;
                margin: 50px auto;
            }
    
            @keyframes r {
                from{
                    transform:rotateX(0deg) rotateY(0deg)
                }
                to{
                    transform:rotateX(360deg) rotateY(360deg)
                }
            }
            #box{
                width: 200px;
                height: 200px;
                perspective: 10000px;
                /* 既是p标签的舞台,自己也是section标签的演员 要设置transform-style*/
                transform-style: preserve-3d;
                position: relative;
                animation: r 10s linear 0s infinite alternate;
    
            }
            #box p{
                width: 200px;
                height: 200px;
                position: absolute;
                top: 0;
                left: 0;
            }
            #front{
                transform: translateZ(100px);
                background-color:rgba(210, 105, 30, 0.438);
            }
            #top{
                transform: rotateX(90deg) translateZ(100px);
                background-color:rgba(22, 243, 232, 0.226);
            }
            #back{
                transform: translateZ(-100px);
                background-color:rgba(13, 104, 241, 0.397);
            }
            #bottom{
                transform: rotateX(-90deg) translateZ(100px);
                background-color:rgba(124, 238, 17, 0.315);
            }
            #left{
                transform: rotateY(-90deg) translateZ(100px);
                background-color:rgba(233, 10, 177, 0.432);
            }
            #right{
                transform: rotateY(90deg) translateZ(100px);
                background-color:rgba(238, 17, 17, 0.438);
            }
        </style>
    </head>
    <body>
        <section>
            <div id="box">
                <p id="front"></p>
                <p id="top"></p>
                <p id="back"></p>
                <p id="bottom"></p>
                <p id="left"></p>
                <p id="right"></p>
            </div>
        </section>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 我们已经进入了3D世界了,想办法生成一个最简单的3D图形:正方体吧 一、生成一块箱子 接上一章的代码,其实如果前面12章都完全理解了,应该可以直接写出生成正方体的代码(不就是多5个面嘛) 为了简单化,我们...

     

    我们已经进入了3D世界了,想办法生成一个最简单的3D图形:正方体吧

    一、生成一块箱子

    上一章的代码,其实如果前面12章都完全理解了,应该可以直接写出生成正方体的代码(不就是多5个面嘛)

    为了简单化,我们保留纹理,把颜色这一属性去掉,除此之外顶点索引缓冲也暂时不用了,直接拉36个顶点出来

    代码如下(当然也顺便换了个纹理):

    #include<iostream>
    #include<opengl/glew.h>
    #define GLEW_STATIC
    #include<GLFW/glfw3.h>
    #include<glm/glm.hpp>
    #include<glm/gtc/matrix_transform.hpp>
    #include<glm/gtc/type_ptr.hpp>
    #include"Shader.h"
    #include<opengl/freeglut.h>
    #include<SOIL.h>
    
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode);
    const GLuint WIDTH = 800, HEIGHT = 600;
    
    int main()
    {
        glfwInit();
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
        glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);
    
        GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "LearnOpenGL", nullptr, nullptr);
        glfwMakeContextCurrent(window);
        glfwSetKeyCallback(window, key_callback);
        glewExperimental = GL_TRUE;
        glewInit();
    
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
    
        Shader shaderYellow("VShader.txt", "FShaderY.txt");
    
        GLfloat vertices[] = 
        {
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
             0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
    
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
        };
        GLuint VBO, VAO, texture;
        glGenVertexArrays(1, &VAO);
        glGenBuffers(1, &VBO);
        glGenTextures(1, &texture);
    
        glBindVertexArray(VAO);
        glBindBuffer(GL_ARRAY_BUFFER, VBO);
        glBindTexture(GL_TEXTURE_2D, texture);
    
    
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)0);
        glEnableVertexAttribArray(0);
        glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
        glEnableVertexAttribArray(1);
    
        int picWidth, picHeight;
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        unsigned char* image = SOIL_load_image("Texture/wallpaper.jpg", &picWidth, &picHeight, 0, SOIL_LOAD_RGB);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, picWidth, picHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, image);
        glGenerateMipmap(GL_TEXTURE_2D);
        SOIL_free_image_data(image);
        glBindTexture(GL_TEXTURE_2D, 0);
    
        glBindBuffer(GL_ARRAY_BUFFER, 0);
        glBindVertexArray(0);
    
        while (!glfwWindowShouldClose(window))
        {
            glfwPollEvents();
            glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);
    
            glBindTexture(GL_TEXTURE_2D, texture);
            shaderYellow.Use();
    
            glm::mat4 model = glm::mat4(1.0f);
            glm::mat4 view = glm::mat4(1.0f);
            glm::mat4 projection = glm::mat4(1.0f);
            model = glm::rotate(model, glm::radians(-55.0f), glm::vec3(1.0f, 0.0f, 0.0f));
            view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));
            projection = glm::perspective(glm::radians(45.0f), (GLfloat)WIDTH / (GLfloat)HEIGHT, 0.1f, 100.0f);
            GLint modelLoc = glGetUniformLocation(shaderYellow.Program, "model");
            GLint viewLoc = glGetUniformLocation(shaderYellow.Program, "view");
            GLint projLoc = glGetUniformLocation(shaderYellow.Program, "projection");
            glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
            glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
            glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    
            glBindVertexArray(VAO);
            glDrawArrays(GL_TRIANGLES, 0, 36);
    
            glBindVertexArray(0);
            glfwSwapBuffers(window);
        }
        glDeleteVertexArrays(1, &VAO);
        glDeleteBuffers(1, &VBO);
        glfwTerminate();
        return 0;
    }
    
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
    {
        if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
            glfwSetWindowShouldClose(window, GL_TRUE);
    }

    顶点着色器删减如下:

    #version 330 core
    layout (location = 0) in vec3 position;
    layout (location = 1) in vec2 texture;
    out vec2 texIn;
    uniform mat4 model;             //模型矩阵
    uniform mat4 view;              //观察矩阵
    uniform mat4 projection;        //投影矩阵
    void main()
    {
        gl_Position = projection * view * model * vec4(position, 1.0);
        texIn = vec2(texture.x, 1.0f - texture.y);
    }

    片段着色器删减如下:

    #version 330 core
    out vec4 color;
    in vec2 texIn;
    uniform sampler2D texOutA;
    void main()
    {
        color = texture(texOutA, texIn);
    }

    运行下代码,看下效果:

    好像有点不对劲,我们想办法让这个箱子旋转起来,看下每个方向的效果

    只需要修改如下模型矩阵就好:

    //第121行代码修改如下
    model = glm::rotate(model, (GLfloat)glfwGetTime(), glm::vec3(-0.5f, 1.0f, 0.0f));

    再看下效果:确实不对劲!正方体本应该被遮住的面却反而显示在了最上面

     

    二、Z缓冲区

    其实我们少考虑了个东西:深度(Depth),通过深度,我们可以得知对应的像素是否被覆盖

    一个好消息是我们并不需要专门写代码去处理这个问题,OpenGL会存储所有深度信息于Z缓冲区(Z-buffer)中(也叫做深度缓冲区),并且GLFW会自动为你生成这样一个缓冲区 (就和颜色缓冲区一样),当片段输出它的颜色时,OpenGL会将它的深度值和z缓冲进行比较,然后如果当前的片段在其它片段之后它将会被丢弃,然后重写,这个过程称为深度测试(Depth Testing),并且它是由OpenGL自动完成的

    用一句话说就是:深度缓冲区的作用就是区分颜色所在的层次,防止把被遮挡住的颜色显示出来

    然而,深度测试是默认关闭的,我们需要手动开启它,如下:

    • glEnable(GL_DEPTH_TEST):glEnable和glDisable函数允许我们开启或关闭某一个OpenGL的功能。该功能会一直保持开启或关闭的状态,直到另一个调用来关闭或开启它
    • 还记得之前讲的 glClear() 方法嘛,可以通过 glClear(GL_DEPTH_BUFFER_BIT) 将所有像素的深度值设置为最大值,我们每次绘制必须要用其来清除深度缓冲区

    改动的代码如下:(其实就多了2行)

    #include<iostream>
    #include<opengl/glew.h>
    #define GLEW_STATIC
    #include<GLFW/glfw3.h>
    #include<glm/glm.hpp>
    #include<glm/gtc/matrix_transform.hpp>
    #include<glm/gtc/type_ptr.hpp>
    #include"Shader.h"
    #include<opengl/freeglut.h>
    #include<SOIL.h>
    
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode);
    const GLuint WIDTH = 800, HEIGHT = 600;
    
    int main()
    {
        glfwInit();
        glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
        glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
        glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
        glfwWindowHint(GLFW_RESIZABLE, GL_FALSE);
    
        GLFWwindow* window = glfwCreateWindow(WIDTH, HEIGHT, "LearnOpenGL", nullptr, nullptr);
        glfwMakeContextCurrent(window);
        glfwSetKeyCallback(window, key_callback);
        glewExperimental = GL_TRUE;
        glewInit();
    
        int width, height;
        glfwGetFramebufferSize(window, &width, &height);
        glViewport(0, 0, width, height);
    
        Shader shaderYellow("VShader.txt", "FShaderY.txt");
    
        GLfloat vertices[] = 
        {
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
             0.5f, -0.5f, -0.5f,  1.0f, 0.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 0.0f,
    
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 1.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
    
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
    
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
             0.5f, -0.5f, -0.5f,  1.0f, 1.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
             0.5f, -0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f, -0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f, -0.5f, -0.5f,  0.0f, 1.0f,
    
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f,
             0.5f,  0.5f, -0.5f,  1.0f, 1.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
             0.5f,  0.5f,  0.5f,  1.0f, 0.0f,
            -0.5f,  0.5f,  0.5f,  0.0f, 0.0f,
            -0.5f,  0.5f, -0.5f,  0.0f, 1.0f
        };
        GLuint VBO, VAO, texture;
        glGenVertexArrays(1, &VAO);
        glGenBuffers(1, &VBO);
        glGenTextures(1, &texture);
    
        glBindVertexArray(VAO);
        glBindBuffer(GL_ARRAY_BUFFER, VBO);
        glBindTexture(GL_TEXTURE_2D, texture);
    
    
        glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)0);
        glEnableVertexAttribArray(0);
        glVertexAttribPointer(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(GLfloat), (GLvoid*)(3 * sizeof(GLfloat)));
        glEnableVertexAttribArray(1);
    
        int picWidth, picHeight;
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
        unsigned char* image = SOIL_load_image("Texture/wood.jpg", &picWidth, &picHeight, 0, SOIL_LOAD_RGB);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, picWidth, picHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, image);
        glGenerateMipmap(GL_TEXTURE_2D);
        SOIL_free_image_data(image);
        glBindTexture(GL_TEXTURE_2D, 0);
    
        glBindBuffer(GL_ARRAY_BUFFER, 0);
        glBindVertexArray(0);
    
        glEnable(GL_DEPTH_TEST);
        while (!glfwWindowShouldClose(window))
        {
            glfwPollEvents();
            glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
            glClear(GL_COLOR_BUFFER_BIT);
            glClear(GL_DEPTH_BUFFER_BIT);
    
            glBindTexture(GL_TEXTURE_2D, texture);
            shaderYellow.Use();
    
            glm::mat4 model = glm::mat4(1.0f);
            glm::mat4 view = glm::mat4(1.0f);
            glm::mat4 projection = glm::mat4(1.0f);
            model = glm::rotate(model, (GLfloat)glfwGetTime(), glm::vec3(-0.5f, 1.0f, 0.0f));
            view = glm::translate(view, glm::vec3(0.0f, 0.0f, -3.0f));
            projection = glm::perspective(glm::radians(45.0f), (GLfloat)WIDTH / (GLfloat)HEIGHT, 0.1f, 100.0f);
            GLint modelLoc = glGetUniformLocation(shaderYellow.Program, "model");
            GLint viewLoc = glGetUniformLocation(shaderYellow.Program, "view");
            GLint projLoc = glGetUniformLocation(shaderYellow.Program, "projection");
            glUniformMatrix4fv(modelLoc, 1, GL_FALSE, glm::value_ptr(model));
            glUniformMatrix4fv(viewLoc, 1, GL_FALSE, glm::value_ptr(view));
            glUniformMatrix4fv(projLoc, 1, GL_FALSE, glm::value_ptr(projection));
    
            glBindVertexArray(VAO);
            glDrawArrays(GL_TRIANGLES, 0, 36);
    
            glBindVertexArray(0);
            glfwSwapBuffers(window);
        }
        glDeleteVertexArrays(1, &VAO);
        glDeleteBuffers(1, &VBO);
        glfwTerminate();
        return 0;
    }
    
    void key_callback(GLFWwindow* window, int key, int scancode, int action, int mode)
    {
        if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS)
            glfwSetWindowShouldClose(window, GL_TRUE);
    }

    完美,效果如下:

     

    展开全文
  • perspective属性 ...2.该属性不是一个必须要设置的属性 3.该属性的取值不是唯一的,但是我们一般情况下将该属性的取值设置为800~1000之间 平移 transform:translateX(100px) translateY(100px) translateZ(1...

    perspective属性

    ◆该属性主要用于呈现良好的3D透视效果
    perspective:1000px;
    总结:
    1.该属性要给变形元素的父元素设置
    2.该属性不是一个必须要设置的属性
    3.该属性的取值不是唯一的,但是我们一般情况下将该属性的取值设置为800~1000之间
    

    平移

    transform:translateX(100px) translateY(100px) translateZ(100px);
    总结:
    1.如果设置的是正数,那么就沿着对应坐标轴的正方向移动,反之负方向
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 100%;
                height: 400px;
                background-color: blue;
                overflow: hidden;
                perspective: 900px;
            }
            .one{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 100px auto;
                transition: all 1s linear;
            }
            .box:hover .one{
                transform:  translateZ(200px);
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="one"></div>
    </div>
    </body>
    </html>
    

    旋转

    在这里插入图片描述

    记住变化之后,坐标轴也跟着变化了

    总结:
    ◆通过左手法则判断元素的旋转方向
    ◆左手法则: 用左手握住坐标轴,大拇指指向坐标轴的方向,四个手指弯曲的方向就是旋转的方向
    

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 100%;
                height: 400px;
                background-color: blue;
                overflow: hidden;
                perspective: 900px;
            }
            .one{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 100px auto;
                transition: all 1s linear;
            }
            .box:hover .one{
                /*transform:  translateZ(200px);*/
                /*transform: rotateY(360deg);*/
                transform: rotateX(360deg);
            }
    
        </style>
    </head>
    <body>
    <div class="box">
        <div class="one"></div>
    </div>
    </body>
    </html>
    

    缩放与倾斜

    transform: scaleX(2) scaleY(2) ;
    transform: skewX(30deg);
    

    3D转换实现一个正方体

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                overflow: hidden;
            }
            .box{
                width: 400px;
                height: 400px;
                margin: 100px auto;
                position: relative;
                transform-style: preserve-3d;
                transform: rotateY(45deg) rotateX(45deg);
            }
            .box>div{
                width: 400px;
                height: 400px;
                position: absolute;
            }
            .top{
                background-color: #000000;
                transform: rotateX(90deg) translateZ(200px);
            }
            .bottom{
                background-color: blue;
                transform: rotateX(-90deg) translateZ(200px);
            }
            .left{
                background-color: yellow;
                transform: rotateY(-90deg) translateZ(200px);
            }
            .right{
                background-color: red;
                transform: rotateY(90deg) translateZ(200px);
            }
            .before{
                background-color: orange;
                transform: translateZ(200px);
            }
            .after{
                background-color: #ff1ba6;
                transform: translateZ(-200px);
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="before"></div>
        <div class="after"></div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 其实就是某个物体在随机运动,如果运动到正方形的某个面的上方的话,就在这个面上随机出来一个点降落下去。 解决方案 步骤1:物体向六个方向发射射线检测正方体位置。 射线检测,很简单,一句代码就不说了。 步骤2:...
  • 3d正方体旋转相册

    千次阅读 多人点赞 2019-11-17 13:39:49
    3d正方体旋转相册起因效果图思路涉及到的知识点==transform====animation==具体实现过程:第一步第二步第三步最后贴上完整代码这样一个简单的表白相册就做好啦,祝大家都可以抱得美人归~ 参考链接:...
  • 首先要确定HTML结构,我个人比较使用列表来做:一个ul标签内包含六个li标签,也就是正方体的六个面,然后分别给每个里标签添加class: top、bottom、left、right、before和after。代码如下: ...
  • Qt---用QPainter画一个3D的正方体

    千次阅读 2016-11-22 13:57:15
    闲的蛋疼 My3DBox .h#include using namespace Eigen;#define SQUARE_LENGTH 200//是一个边长200的正方体 #define CAMERA_DISTANCE 300//视点距离class My3DBox : public QWidget { Q_OBJECT public: expl
  • 今天需要写类似Unity场景视图中控制相机运动的功能。...于是我又打开Blender了下,它的跟手效果就比较完美。Blender拖拽场景视图接下来来分析下如何解决这问题。首先拖拽视图的原理时:当...
  • 用鼠标来控制一个立方体的旋转速度和方向
  • OpenGL初学者很适合的一个旋转的绘制正方体,并且采用键盘控制正方体的旋转与颜色变换
  • 我们并不关心在这个容器中如何摆放它们的位置,因为后续将会用图层的transform对它们进行重新布局,并且用Interface Builder在容器视图之外摆放他们可以让我们容易清楚它们的内容,如果把它们一个叠着一个都塞进主...
  • perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代,而不是其元素本身。当perspective:none/0;时,相当于没有设perspective(length)。比如你要建立一个小立方体,长宽高都是200px。如果你的...
  • 点积基本公式: a向量*b向量=a向量的模*b向量的模*|a|*|b|*cos(a,b两向量夹角) 如果点积结果是负,说明是a和b夹角是钝角,反之,则是锐角 FR:徐海涛(hunk xu) QQ技术交流群:386476712 ...
  • 1. 已知相机的一些资料,想找相机前方某个距离作为target ,不太懂 方向向量归一化
  • 如何声明MyMesh 如何添加顶点和面到Mesh中 如何使用IO函数写入网格数据 ... 每一个程序第一步都是定义MyMesh类型。OpenMesh支持常见的多边形网格(面由可变顶点数的多边形组成)以及特殊的...
  • 一个例子:1.用div先写出六个面 2.通过旋转、平移方式将六个面组成正方体 3.将父容器设成perspective透视,无透视,不3d 4.设置立体旋转方向(要搞清楚绕着哪个轴旋转) 此处旋转角度为90deg 第二个例子: 立体...
  • 这里是动画的一个过渡效果执行0.5s完成 */ 41 transition: 0 .5s; 42 } 43 44 #box> .top { 45 /* 这里是插入背景图片 */ 46 background: url( " 田勇.jpg " ); 47 /* 设置背景...
  • (可以随便移动)线代:同上(但是,不能随便移动,向量有一端是固定在原点的)计算机专业:任何数据都可以建模为一个n维“向量”(其实就是列表),顺序不能乱改。 “向量是有序的数字列表”最好不要把向量看作空间...
  • 之前对于HTML5立方体动画我们已经有过不少分享了,像这款HTML5/CSS3 3D立方体扭曲动画、HTML5 3D立方体旋转...今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面,同时也可以在不同的方向上旋转。
  • THREE.js为正方体的6面贴上图片

    万次阅读 2017-08-15 16:44:11
    //创建一个透视相机,45是相机的视角 , 宽高比是屏幕的宽高比 , 最近能看到0.1 , 最远能看到10000 var camera = new THREE . PerspectiveCamera ( 45 , window . innerWidth / window . innerHeight ...
  • 效果图如下:代码如下(代码还需要优化,暂时能实现效果就行) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...160万几何体</title> <style> body{ ...
  • 边缘检测

    千次阅读 2017-02-03 17:03:42
    上面的图像是图像中水平方向7个像素点的灰度值显示效果,我们很容易地判断在第4和第5个像素之间有一个边缘,因为它俩之间发生了强烈的灰度跳变。在实际的边缘检测中,边缘远没有上图这样简单明显,我们需要取对应的...
  • 事实上很简单,定义好一个正方体,处理好纹理。关于MeshGeometry3D的正确定义和纹理这里就不多讲了,可以参考我以前写过的一些文章: WPF 3D: MeshGeometry3D纹理坐标的正确定义 WPF 3D:MeshGeometry3D的定义和...
  • OpenGL 旋转的正方体

    千次阅读 2017-10-19 11:31:03
    重点:这里的旋转记录上一次旋转的位置,在上一次旋转的基础上继续绕 x y z 某一个方向旋转。 不是简单的正方体绕x转后让他绕y轴转,先用最开始的图形转 使用说明:点击鼠标左键绕x轴,右键y轴,中间z轴 #include...
  • 设想你是一个四维人,你的眼睛看到的图像是三维的,因为除了上下左右前后,还多出了两个新方向。 由于可怜的三维生物(我们)只有二维视觉,所以只好把四维人眼中的三维视野图像做成半透明的给三维生物们观看,这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,591
精华内容 1,436
关键字:

从一个方向看一个正方体