• THREEJS渲染七要素


    渲染两步骤:

    1. 初始化;
    2. 定义用户接口;
    3. 开启渲染循环;
    4. 调用用户接口。


    渲染循环七要素:

    1. 定义渲染器和渲染窗口;
    2. 定义场景;
    3. 定义摄像机;
    4. 定义光照;
    5. 定义几何体;
    6. 定义材质贴图;
    7. 将所有物体添加到场景中。

    下面是上述过程的具体代码(注意其中的框架结构):

    import * as THREE from './threejs_lib/build/three.module.js';
    
            var camera, cube, scene, renderer;
            var defaultMaterial;
    
            init();
            renderLoop();
    
    
    
            function init() {
                // renderer definition
                renderer = new THREE.WebGLRenderer({
                    canvas: document.getElementById('mainCanvas')
                });
                renderer.setClearColor(0x000000); // black
    
                // scene definition
                scene = new THREE.Scene();
    
                // camera definition
                //camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); // or THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
                camera = new THREE.PerspectiveCamera(-2, 2, 1.5, -1.5, 1, 10); // or THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
                camera.position.set(0, 0, 5);
                scene.add(camera);
    
    
                // 2. material definition
                defaultMaterial = new THREE.MeshBasicMaterial({ color: 0xff0055, flatShading: true, vertexColors: THREE.VertexColors });
                // 1. geometry definition
                cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                    defaultMaterial
                );
                cube.position.x = 0;
                cube.position.y = 0;
                cube.position.z = 0;
                cube.rotation.x = 0;
                cube.rotation.y = 0;
                cube.rotation.z = 0;
                scene.add(cube);
            }
    
    
            function operation() {
    
                cube.rotation.y += 0.1;
                console.log(cube.position.x);
                if (cube.position.x < 0) {
                    cube.position.x += 0.01;
                } else if (cube.position.x >= 0) {
                    cube.position.x -= 0.5;
                }
                if (cube.position.x >= 2) {
                    cube.position.x -= 0.01;
                }
            }
    
    
            function renderLoop() {
                // operate via user interaction
                operation();
    
                // render
                renderer.render(scene, camera);
    
                requestAnimationFrame(renderLoop);
            }
    
    

    [将上方代码添加到HTML文件中即可查看效果]





    作者:艾孜尔江

  • 相关阅读:
    完美配置Tomcat的HTTPS
    分享一个免费SSL证书申请网站,给网站开启https协议 | 张戈博客
    使用HttpClient发送HTTPS请求以及配置Tomcat支持SSL
    HttpClient工具类v1.7
    列出某文件夹及其子文件夹下面的文件,并可根据扩展名过滤
    拷贝一个目录或者文件到指定路径下
    判断字符是否属于中文
    Windows 7更改SVN账户密码
    FileObverse文件观察者的Debug报告
    jquery.cookie.js操作cookie实现“记住密码”,很简单很强大
  • 原文地址:https://www.cnblogs.com/ezhar/p/13780930.html
Copyright © 2020-2023  润新知