zoukankan      html  css  js  c++  java
  • 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文件中即可查看效果]





    作者:艾孜尔江

  • 相关阅读:
    关于springMVC+Mybatis jar包详解
    关于struts2的过滤器和mybatis的插件的分析
    C# Zip压缩、解压
    JS 字符串转字节截取
    JS 时间差计算 XX秒前、XX小时前、XX天前
    IIS配置web.config 将带www域名转为不带www域名
    JavaScript获取当前url路径
    SQL 查询今天、昨天、7天内、30天的数据
    SQL求解两个时间差
    SqlServer获取当前日期
  • 原文地址:https://www.cnblogs.com/ezhar/p/13780930.html
Copyright © 2011-2022 走看看