四、官方文档入门例子

作者: 柳暗花明又一匪 | 来源:发表于2019-04-08 14:53 被阅读0次

四、官方文档入门例子
React
React Native 入门相关文档
JSON Schema入门
01Gin源码解读
Web App开发--vue.js入门与实践
Web App开发--vue.js入门与实践
pandas小案例
快应用开发资源汇总
protobuf Python极简入门例子

看下官方文档入门例子，敲一下。熟悉代码与初步了解。
官方例子

<html>

<head>
    <title>场景、相机、渲染器</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }

        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            z-index: 100;
            display: block;
            color: #ffffff
        }
    </style>
</head>

<body>
    <div id="info">Description</div>
</body>
<script src="three/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 meterial_line = new THREE.LineBasicMaterial({
        color: 0x0000ff
    })
    var geometry_line = new THREE.Geometry()
    geometry_line.vertices.push(new THREE.Vector3(-2, 0, 0))
    geometry_line.vertices.push(new THREE.Vector3(0, 2, 0))
    geometry_line.vertices.push(new THREE.Vector3(2, 0, 0))
    geometry_line.vertices.push(new THREE.Vector3(0, -2, 0))
    geometry_line.vertices.push(new THREE.Vector3(-2, 0, 0))

    var line = new THREE.Line(geometry_line, meterial_line)
    scene.add(line)
 
    //-------------绘制文字
    var loader = new THREE.FontLoader()
    loader.load('three/examples/fonts/helvetiker_regular.typeface.json', function (font) {
        var geometry = new THREE.TextGeometry('Hello three', {
            font: font,
            size: 1,
            height: 0,
            curveSegments: 0,
            // bevelEnabled: true,
            // bevelThickness: 1,
            // bevelSize: 1,
            // bevelSegments: 1
        });
        //创建法向量材质
        var meshMaterial = new THREE.MeshNormalMaterial({
            flatShading: THREE.FlatShading,
            transparent: true,
            opacity: 0.9
        });
        var mesh = new THREE.Mesh(geometry, meshMaterial);
        mesh.position.set(-3, 2.5, 0);
        scene.add(mesh);

    });

    function animate() {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        line.rotation.x += 0.01
        renderer.render(scene, camera) //场景与摄像机渲染
    }
    animate();
</script>

</html>

运行结果

小结：
1.首选需要创建场景、摄像机、渲染器。
2.绘制各种物体都会建立对应的对象，还需要有对应的材质对象。
3.使用THREE.Mesh生成绘制对象，输入到渲染器中
4.字体也是对象的对象，一般都需要引入对象的字体json文件，并在文件加载完成后才能进行渲染操作。
5.暂时尝试的材质的对象方式都可以互相用，只是非对应的材质应用会效果不佳。