three.js是以webgl为基础的3d渲染js库-BFW插件库

three.js是以webgl为基础的3d渲染js库
three.js是以webgl为基础的库,封装了一些3D渲染需求中重要的工具方法与渲染循环
第一步引入bfwone
第二步执行three插件代码
示例如下
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=three" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var camera, scene, renderer;

        function init() {
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
            camera.position.set(0, - 400, 600);
            var controls = new THREE.OrbitControls(camera);
            controls.target.set(0, 0, 0);
            controls.update();
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xf0f0f0);
            var loader = new THREE.FontLoader();
            loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function (font) {
                var xMid, text;
                var color = 0x006699;
                var matDark = new THREE.LineBasicMaterial( {
                    color: color,
                    side: THREE.DoubleSide
                });
                var matLite = new THREE.MeshBasicMaterial( {
                    color: color,
                    transparent: true,
                    opacity: 0.4,
                    side: THREE.DoubleSide
                });
                var message = "   BFW GROUP \nIT DEV SITE.";
                var shapes = font.generateShapes(message, 100);
                var geometry = new THREE.ShapeBufferGeometry(shapes);
                geometry.computeBoundingBox();
                xMid = - 0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
                geometry.translate(xMid, 0, 0);
                // make shape ( N.B. edge view not visible )
                text = new THREE.Mesh(geometry, matLite);
                text.position.z = - 150;
                scene.add(text);
                // make line shape ( N.B. edge view remains visible )
                var holeShapes = [];
                for (var i = 0; i < shapes.length; i ++) {
                    var shape = shapes[i];
                    if (shape.holes && shape.holes.length > 0) {
                        for (var j = 0; j < shape.holes.length; j ++) {
                            var hole = shape.holes[j];
                            holeShapes.push(hole);
                        }
                    }
                }
                shapes.push.apply(shapes, holeShapes);
                var lineText = new THREE.Object3D();
                for (var i = 0; i < shapes.length; i ++) {
                    var shape = shapes[i];
                    var points = shape.getPoints();
                    var geometry = new THREE.BufferGeometry().setFromPoints(points);
                    geometry.translate(xMid, 0, 0);
                    var lineMesh = new THREE.Line(geometry, matDark);
                    lineText.add(lineMesh);
                }
                scene.add(lineText);
            }); //end load function
            renderer = new THREE.WebGLRenderer( {
                antialias: true
            });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            window.addEventListener('resize', onWindowResize, false);
        } // end init
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        function animate() {
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            renderer.render(scene, camera);
        }
        bready(function() {
            use(["OrbitControls"], function() {
                init();
                animate();
            });
        });


    </script>
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
			}
		</style>
</head>
<body>
   	<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - Simple text from json fonts.
		</div>
</body>
</html>
three.js是以webgl为基础的3d渲染js库

网友评论0

three.js

photo-sphere-viewer.min.js

ar.js

scenejs.js

3d-tv.js
