zoukankan      html  css  js  c++  java
  • 【three.js 第一课】创建场景,显示几何体

    <!DOCTYPE html>
    <html>
    <head>
        <title>demo1</title>
    </head>
    <style type="text/css">
       body{
            margin:0;
       }
       canvas{
            100%;
            height:100%;
       }
    </style>
    <body>
        <script src="jquery.min.js"></script>
        <script src="../build/three.js"></script>
        <script type="text/javascript"> 
            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);//渲染到浏览器
     
            //创建形状BoxGeometry
            var geometry = new THREE.BoxGeometry(1,1,1);
     
            //创建材料   wireframe是否使用线条
            var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false});
            
            //将材料和形状结合
            var cube = new THREE.Mesh(geometry,material);
            
            //加入场景中
            scene.add(cube);
     
            camera.position.z=3;//设置相机的位置
     
     
            //逻辑
            var update=function(){
                //物体随着XY轴旋转
                cube.rotation.x +=0.01;
                cube.rotation.y += 0.005;
            }
     
            //绘画渲染
            var render=function() {
                renderer.render(scene,camera);
            }
     
            //循环运行update,render
            var loop=function() {
                 requestAnimationFrame(loop);
                 update();
                 render();
            }
     
            loop();//循环开始
        </script>
    </body>
    </html>
  • 相关阅读:
    Linux查看物理CPU个数、核数、逻辑CPU个数
    【完结】利用 Composer 完善自己的 PHP 框架(三)——Redis 缓存
    端口被占用
    选择器
    Css四种样式
    PT与PX,em(%)区别
    tomcat报404
    webservice调用接口,接口返回数组类型
    音频与视频标签
    表单标签2
  • 原文地址:https://www.cnblogs.com/smedas/p/12455948.html
Copyright © 2011-2022 走看看