Web前端threejs入门_几何体绘制

电脑前端开发教程 ui设计 web前端开发框架 浏览器内核 前端开发

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <script src=”http://www.yanhuangxueyuan.com/3D/example/three.min.js”></script>
    <script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
    <script src=”http://wj.juccn.com/goods3d/js//DragControls.js”></script>
    <script src=”http://wj.juccn.com/goods3d/js/TrackballControls.js”></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body onload=””>
    <canvas id=”OrthographicCamera” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”PerspectiveCamera” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”SphereGeometry” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”CylinderGeometry” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”TetrahedronGeometry” style=”height: 300px; width: 400px;”></canvas>
    <!–<canvas id=”OctahedronGeometry” style=”height: 300px; width: 400px;”></canvas>
<canvas id=”IcosahedronGeometry” style=”height: 300px; width: 400px;”></canvas>–>
    <canvas id=”TorusGeometry” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”TorusKnotGeometry” style=”height: 300px; width: 400px;”></canvas>
    <canvas id=”Text” style=”height: 300px; width: 400px;”></canvas>
    <script>
        //正交相机
        // function init(){
        // var renderer = new THREE.WebGLRenderer({
        // canvas:document.getElementById(‘mainCanvas’)
        // });
        //
        // renderer.setClearColor(0x000000);
        // var scene = new THREE.Scene();
        //
        // var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
        //
        // camera.position.set(0,0,5);
        // scene.add(camera);
        //
        // var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
        //
        // new THREE.MeshBasicMaterial({
        // color:0xff0000
        // })
        //
        // );
        // scene.add(cube)
        // renderer.render(scene,camera)
        // }
        OrthographicCamera()
        function OrthographicCamera() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘OrthographicCamera’)
            });
            renderer.setClearColor(0x33CC33);
            var camera = new THREE.OrthographicCamera(-1, 3, 1.5, -1.5, 1, 100)
            camera.position.set(4, -3, -5);
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            var scene = new THREE.Scene();
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3, 0, 0, 3),
                new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    wireframe: true
                })
            )
            scene.add(cube);
            renderer.render(scene, camera)
        }
        PerspectiveCamera()
        function PerspectiveCamera() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘PerspectiveCamera’)
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene()
            var camera = new THREE.PerspectiveCamera(60, 4 / 3, 1, 10);
            camera.position.set(2, -2, 5);
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
                new THREE.MeshBasicMaterial({
                    color: 0xff0000,
                    wireframe: true
                })
            );
            scene.add(cube);
            renderer.render(scene, camera)
        }
        SphereGeometry();
        function SphereGeometry() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘SphereGeometry’)
            })
            renderer.setClearColor(0x33CCCC);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(60, 4 / 3, 1, 1000);
            camera.position.set(3, 3, 5)
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.SphereGeometry(3, 16, 12, Math.PI / 6, Math.PI / 2, Math.PI / 6, Math.PI / 4),
                new THREE.MeshBasicMaterial({
                    color: 0x66CCFF, wireframe: true
                })
            )
            scene.add(cube);
            renderer.render(scene, camera)
        }
        CylinderGeometry()
        function CylinderGeometry() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘CylinderGeometry’)
            })
            renderer.setClearColor(0x33CCCC);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(60, 4 / 3, 1, 1000);
            camera.position.set(3, 4, 5)
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 4, 50, 3),
                new THREE.MeshBasicMaterial({
                    color: 0xFFFFFF, wireframe: true
                })
            )
            scene.add(cube);
            renderer.render(scene, camera)
        }
        TetrahedronGeometry()
        function TetrahedronGeometry() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘TetrahedronGeometry’)
            })
            renderer.setClearColor(0xFFFFFF);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(2, 2, 5);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.TetrahedronGeometry(3),
                new THREE.MeshBasicMaterial({
                    color: 0xFFCCCC, wireframe: true
                })
            );
            scene.add(cube);
            renderer.render(scene, camera)
        };
        TorusGeometry()
        function TorusGeometry() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘TorusGeometry’)
            });
            renderer.setClearColor(0xffffff);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(3, 3, 9);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.TorusGeometry(3, 1, 12, 18),
                new THREE.MeshBasicMaterial({
                    color: 0x6699FF, wireframe: true
                })
            )
            scene.add(cube);
            renderer.render(scene, camera)
        }
        TorusKnotGeometry();
        function TorusKnotGeometry() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘TorusKnotGeometry’)
            })
            renderer.setClearColor(0xffffff);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(2, 2, 8);
            camera.lookAt(new THREE.Vector3(0, 0, 0))
            scene.add(camera);
            var cube = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.5, 32, 8),
                new THREE.MeshBasicMaterial({
                    color: 0x339966, wireframe: true
                })
            );
            scene.add(cube);
            //renderer.render(scene,camera);
            function render() {
                requestAnimationFrame(render);
                cube.rotation.x += 0.05;
                //cube.rotation.y +=0.1;
                //cube.rotation.z +=0.1;
                renderer.render(scene, camera)
            }
            render()
        }
        Text()
        function Text() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById(‘Text’)
            })
            renderer.setClearColor(0xfffeee);
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(3, 3, 5);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
            var text = new THREE.Mesh(new THREE.TextGeometry(‘hello’, { size: 1, height: 1 }),
                new THREE.MeshBasicMaterial({
                    color: 0x0099CC, wireframe: true
                })
            )
            scene.add(text);
            function render() {
                requestAnimationFrame(render);
                text.rotation.y += 0.05;
                //cube.rotation.y +=0.1;
                //cube.rotation.z +=0.1;
                renderer.render(scene, camera)
            }
            render()
        }
    </script>
</body>
</html>

游戏客户端开发前端 跨浏览器的web前端开发 前端开发哪个浏览器

» 本文来自:前端开发者 » 《Web前端threejs入门_几何体绘制》
» 本文链接地址:https://www.rokub.com/5360.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!