zoukankan      html  css  js  c++  java
  • three.js之创建一个几何体

    <html>
        <head>
            <title>My first three.js app</title>
            <style>
                body { margin: 0; }
                canvas {  100%; height: 100% }
            </style>
        </head>
        <body>
            <script src="../static/three.js-master/build/three.js"></script>
            <script>
                var scene = new THREE.Scene();  // 场景
                var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );  // 摄像机
    
                var renderer = new THREE.WebGLRenderer();  // 渲染器
                renderer.setSize( window.innerWidth, window.innerHeight );  // 渲染器宽度
                document.body.appendChild( renderer.domElement );
    
                var geometry = new THREE.BoxGeometry( 1, 1, 1 );  // 盒子几何体
                var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );  // 一种材料,设置集合体颜色
                var cube = new THREE.Mesh( geometry, material );  // 网格,也就是几何体
                scene.add( cube );  // 几何体创建好后添加到场景中
    
                camera.position.z = 5;  // 摄像机的轴坐标
    
                var animate = function () {
                    requestAnimationFrame( animate );  // 循环渲染
    
                    cube.rotation.x += 0.01;
                    cube.rotation.y += 0.01;
    
                    renderer.render( scene, camera );  // 将场景和摄像机通过渲染器渲染出来
                };
    
                animate();
            </script>
        </body>
    </html>

    附带three.js代码,点击下载

  • 相关阅读:
    form 元素横向排列
    mysql5.6 主从同步
    centos iptables
    angular 数据绑定
    angular路由 模块 依赖注入
    angular $scope对象
    angular前端开发环境
    使用STM32CubeMX生成RTC工程[闹钟中断2]
    利用STM32CubeMX生成HID双向通讯工程
    使用STM32CubeMX生成RTC工程[秒中断]
  • 原文地址:https://www.cnblogs.com/aaronthon/p/10978433.html
Copyright © 2011-2022 走看看