[webGL学习]基于three.js构建WebGL实例第四讲

最新推荐文章于 2023-12-08 20:40:27 发布

图解AI

最新推荐文章于 2023-12-08 20:40:27 发布

阅读量6.3k

点赞数

分类专栏： 10.HTML5知识笔记文章标签： webgl 实例 3d

未经博主允许不得转载(https://github.com/ai-word)

本文链接：https://blog.csdn.net/BaiHuaXiu123/article/details/52782404

版权

10.HTML5知识笔记专栏收录该内容

89 篇文章 5 订阅

订阅专栏

这里写图片描述

今天我们继续我们的课程webGL 的学习,在该课程中我们将向大家展示如何给一个场景添加一个3D文字,如何设计出二维形状，把3D模型加载在OBJLoader现场。但这个过程是非常困难的.下面就具体来看一下.

#HTML代码
这部分还是跟之前的一样.

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>WebGL With Three.js - Lesson 4 | Script Tutorials</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <script src="js/three.min.js"></script>
        <script src="js/THREEx.WindowResize.js"></script>
        <script src="js/OrbitControls.js"></script>
        <script src="js/fonts/font1.js"></script>
        <script src="js/OBJLoader.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/script.js"></script>
    </body>
</html>

#Javascript实现
首先,我们来创建一个简单的场景(scene, camera, renderer, controls, light and ground):

// load texture
var texture = THREE.ImageUtils.loadTexture('texture.png');
texture.repeat.set(0.03, 0.03);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
texture.needsUpdate = true;

var lesson4 = {
    scene: null,
    camera: null,
    renderer: null,
    container: null,
    controls: null,
    clock: null,
    stats: null,

    init: function() { // Initialization

        // create main scene
        this.scene = new THREE.Scene();

        var SCREEN_WIDTH = window.innerWidth,
            SCREEN_HEIGHT = window.innerHeight;

        // prepare camera
        var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 10000;
        this.camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
        this.scene.add(this.camera);
        this.camera.position.set(0, 400, 800);
        this.camera.lookAt(new THREE.Vector3(0,0,0));

        // prepare renderer
        this.renderer = new THREE.WebGLRenderer({antialias:true, alpha: false});
        this.renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        this.renderer.setClearColor(0xffffff);

        this.renderer.shadowMapEnabled = true;
        this.renderer.shadowMapSoft = true;

        // prepare container
        this.container = document.createElement('div');
        document.body.appendChild(this.container);
        this.container.appendChild(this.renderer.domElement);

        // events
        THREEx.WindowResize(this.renderer, this.camera);

        // prepare controls (OrbitControls)
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls.target = new THREE.Vector3(0, 0, 0);

        // prepare clock
        this.clock = new THREE.Clock();

        // prepare stats
        this.stats = new Stats();
        this.stats.domElement.style.position = 'absolute';
        this.stats.domElement.style.bottom = '0px';
        this.stats.domElement.style.zIndex = 10;
        this.container.appendChild( this.stats.domElement );

        // add directional light
        var dLight = new THREE.DirectionalLight(0xffffff);
        dLight.position.set(0, 1000, 0);
        dLight.castShadow = true;
        // dLight.shadowCameraVisible = true;
        this.scene.add(dLight);

        // add simple ground
        var groundGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
        ground = new THREE.Mesh(groundGeometry, new THREE.MeshLambertMaterial({
            color: 0x4489FE, side: THREE.DoubleSide
        }));
        ground.position.y = -20;
        ground.rotation.x = - Math.PI / 2;
        ground.receiveShadow = true;
        this.scene.add(ground);

    },
};

// Animate the scene
function animate() {
    requestAnimationFrame(animate);
    render();
    update();
}

// Update controls and stats
function update() {
    lesson4.controls.update(lesson4.clock.getDelta());
    lesson4.stats.update();
}

// Render the scene
function render() {
    if (lesson4.renderer) {
        lesson4.renderer.render(lesson4.scene, lesson4.camera);
    }
}

// Initialize lesson on page load
function initializeLesson() {
    lesson4.init();
    animate();
}

if (window.addEventListener)
    window.addEventListener('load', initializeLesson, false);
else if (window.attachEvent)
    window.attachEvent('onload', initializeLesson);
else window.onload = initializeLesson;

#添加3D文本(3D text)

以显示在3D enviromnemt文本的最佳方式是使用一个就绪3D字形（对于three.js所）。一般情况下，有很多网站，你可以下载字体，但我们需要特别的JavaScript的字体（typefaced字体）。本网站可以帮助您自定义字体转换为JavaScript的字体（上传您的字体，点击“转换”，然后按照步骤，直到它让你下载的结果）。但是，在写这篇教程的时候，这个服务不可用，所以我只好用现成的字体来创建我们的演示。要绘制我准备了以下功能的三维文字：

draw3dText: function(x, y, z, text) {

    // prepare text geometry
    var textGeometry = new THREE.TextGeometry(text, {
        size: 60, // Font size
        height: 20, // Font height (depth)
        font: 'droid serif', // Font family
        weight: 'bold', // Font weight
        style: 'normal', // Font style
        curveSegments: 1, // Amount of curve segments
        bevelThickness: 5, // Bevel thickness
        bevelSize: 5, // Bevel size
        bevelEnabled: true, // Enable/Disable the bevel
        material: 0, // Main material
        extrudeMaterial: 1 // Side (extrude) material
    });

    // prepare two materials
    var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
    var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });

    // create mesh object
    var textMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
    var textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textMesh.castShadow = true;

    // place the mesh in the certain position, rotate it and add to the scene
    textMesh.position.set(x, y, z);
    textMesh.rotation.x = -0.3;
    this.scene.add(textMesh);
}

#ExtrudeGeometry
这个类允许我们从二维路径形状打造立体几何一个3d效果。下面连看今天的演示：

drawCustomObject: function(x, y, z) {

    // prepare points for custom shape (ship)
    var objectPoints = [
        new THREE.Vector2 (275, 265),
        new THREE.Vector2 (205, 240),
        new THREE.Vector2 (125, 220),
        new THREE.Vector2 (274, 115),
        new THREE.Vector2 (275, 85),
        new THREE.Vector2 (330, 85),
        new THREE.Vector2 (310, 100),
        new THREE.Vector2 (330, 115),
        new THREE.Vector2 (275, 115),
        new THREE.Vector2 (274, 266),
        new THREE.Vector2 (305, 266),
        new THREE.Vector2 (305, 240),
        new THREE.Vector2 (360, 240),
        new THREE.Vector2 (360, 285),
        new THREE.Vector2 (340, 335),
        new THREE.Vector2 (215, 335),
        new THREE.Vector2 (175, 320),
        new THREE.Vector2 (150, 290),
        new THREE.Vector2 (75, 230),
        new THREE.Vector2 (200, 264),
        new THREE.Vector2 (274, 264),
    ];

    // prepare shape
    var objectShape = new THREE.Shape(objectPoints);

    var extrusionSettings = {
        amount: 20,
        curveSegments: 1, // Amount of curve segments
        bevelThickness: 5, // Bevel thickness
        bevelSize: 5, // Bevel size
        bevelEnabled: true, // Enable/Disable the bevel
        material: 0, // Main material
        extrudeMaterial: 1 // Side (extrude) material
    };

    // prepare ship geometry
    var objectGeometry = new THREE.ExtrudeGeometry( objectShape, extrusionSettings );

    // prepare two materials
    var materialFront = new THREE.MeshPhongMaterial({ map: texture, color: 0xffff00, emissive: 0x888888 });
    var materialSide = new THREE.MeshPhongMaterial({ map: texture, color: 0xff00ff, emissive: 0x444444 });

    // create mesh object of the ship
    var objectMaterial = new THREE.MeshFaceMaterial([ materialFront, materialSide ]);
    var objectMesh = new THREE.Mesh( objectGeometry, objectMaterial );
    objectMesh.castShadow = true;

    // place the object in the certain position, rotate it and add to the scene
    objectMesh.position.set(x, y, z);
    objectMesh.rotation.x = Math.PI;
    this.scene.add(objectMesh);
}

#OBJLoader

我留下了最有趣的结束 - 加载准备OBJ车型。有现成三维物体的数量庞大（在不同的网站）的事实，你可以添加到您的场景，并three.js所赋予我们通过使用OBJLoader这个类：

loadObjFile: function(x, y, z) {

    // prepare new OBJLoader and load the 'legoBrick.obj' model
    var loader = new THREE.OBJLoader();
    loader.load('legoBrick.obj', function(object) {

        // apply custom material for all children
        var legoMat = new THREE.MeshLambertMaterial({ color: 0x008800 });
        object.traverse( function (child) {
            if (child instanceof THREE.Mesh) {
                child.material = legoMat;
                child.material.needsUpdate = true;
            }
        });

        // place the object in the certain position, rotate, scale and add to the scene
        object.position.x = x;
        object.position.y = y;
        object.position.z = z;
        object.rotation.y = Math.PI/2;
        object.scale.set(40, 40, 40);
        lesson4.scene.add(object);
    });
}

###结束
未完继续
源码下载请关注我的微信公众号
这里写图片描述

图解AI

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
[webGL学习]基于three.js构建WebGL实例第四讲

今天我们继续我们的课程webGL 的学习,在该课程中我们将向大家展示如何给一个场景添加一个3D文字,如何设计出二维形状，把3D模型加载在OBJLoader现场。但这个过程是非常困难的.下面就具体来看一下.HTML代码这部分还是跟之前的一样.<!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8" />
复制链接

扫一扫