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代码,点击下载

  • 相关阅读:
    MVP 实战
    Model 层
    Presenter 层
    View 层
    DB数据库的基本操作
    MongoDB数据库基本操作
    转换函数
    字符串函数
    空值处理
    Java中使用Redis的几种数据类型总结
  • 原文地址:https://www.cnblogs.com/aaronthon/p/10978433.html
Copyright © 2011-2022 走看看