zoukankan      html  css  js  c++  java
  • js 3d图形

      使用Three.js在网上中进行3D图形的展示

      Three.js的官网 https://threejs.org/

      第一个Demo,生成一个旋转的正方体

     <style>
            canvas {
                width: 100%;
                height: 100%
            }
        </style>
    
    
        <script src="https://cdn.bootcss.com/three.js/92/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);// 设置渲染器的大小为窗口的内宽度,也就是内容区的宽度
    
            //renderer画布,所有的渲染都是画在renderer.domElement元素上,将元素挂接到body上
            document.body.appendChild(renderer.domElement);
    
            //创建几何体CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)
            //width:立方体x轴的长度
            //height:立方体y轴的长度
            //depth:立方体z轴的深度,也就是长度
            var geometry = new THREE.CubeGeometry(1, 1, 1);//几何体()
            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            var cube = new THREE.Mesh(geometry, material); scene.add(cube);
            camera.position.z = 5;
            function render() {
                requestAnimationFrame(render); //渲染循环
                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;
    
                /* 渲染,使用渲染器,结合相机和场景来得到结果画面
                 * render( scene, camera, renderTarget, forceClear )
                 * 各个参数的意义是:
                 * scene:前面定义的场景
                 * camera:前面定义的相机
                 * renderTarget:渲染的目标,默认是渲染到前面定义的render变量中
                 * forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。
                 */
                renderer.render(scene, camera);
            }
            render();
        </script>
  • 相关阅读:
    当数据库结构改变时,需要将数据库删除再创建
    命名空间“System.Web.Mvc”中不存在类型或命名空间“Ajax”(是否缺少程序集引用?)
    jqGrid 各种参数 详解
    二维数组最小路径和
    动态规划:最大连续子序列和
    最长递增子序列
    java单例模式的几种实现
    java多线程的实现方法
    sleep与wait的区别
    数组旋转
  • 原文地址:https://www.cnblogs.com/tangchun/p/9284251.html
Copyright © 2011-2022 走看看