带有Three.js的WebGL –第4课

发布时间:2020-08-03 VIEWUI JAVASCRIPT WEBGL JQUERY VUE JS

WebGL With Three.js - Lesson 4 WebGL With Three.js - Lesson 4

WebGL With Three.js – Lesson 4 Today we continue our lessons for those who study webgl, and today we will show you how to add 3D text on the scene, how to extrude two-dimensional shapes, we also will consider how to load ready 3D models into the scene using the OBJLoader. It seems to be a difficult process, but it is not – the code for loading 3D models is fairly simple.

WebGL with Three.js –第4课今天,我们继续为学习webgl的人们提供课程,今天,我们将向您展示如何在场景中添加3D文本,如何拉伸二维形状,我们还将考虑如何准备好加载使用OBJLoader将3D模型放到场景中。 这似乎是一个困难的过程,但并非如此-加载3D模型的代码非常简单。

现场演示

HTML (HTML)

Two new libraries were added into the html: font1.js and OBJLoader.js

html中添加了两个新库:font1.js和OBJLoader.js


<!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>

<!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>

Java脚本 (Javascript)

First, we create a simple (empty) scene (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;

// 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)

The best way to display text in 3D enviromnemt is to use a ready 3D font (for Three.js). In general, there are many websites where you can download fonts, however we need special javascript fonts (typefaced fonts). This website may help you to convert custom fonts into javascript fonts (upload your font, hit the ‘convert’, and then follow the steps until it let you download the result). However, at the time of writing this tutorial, this service was not available, so I had to use ready-made fonts to create our demonstration. To draw a three-dimensional text I prepared the following function:

在3D环境中显示文本的最佳方法是使用现成的3D字体(用于Three.js)。 通常,有很多网站可以下载字体,但是我们需要特殊的javascript字体(字体字体)。 该网站可以帮助您将自定义字体转换为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);
    }

    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);
    }

Two different materials are used to different sides of the text (for the front and side).

文本的不同侧面使用了两种不同的材料(正面和侧面)。

挤压几何 (ExtrudeGeometry)

This class allows us to create three-dimensional extruded geometry from two-dimensional path shape. I drew the boat for our today’s demonstration:

此类允许我们从二维路径形状创建三维挤压几何体。 我拉船去进行今天的示范:


    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);
    }

    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);
    }

OBJ加载器 (OBJLoader)

I left the most interesting for the end – loading ready OBJ models. The fact that there are a huge number of ready three-dimensional objects (at various websites) that you can add into your scene, and three.js gives us this opportunity through the use of the OBJLoader class:

最后,我留下了最有趣的部分-加载现成的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);
        });
    }

    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);
        });
    }

To import the model we just specify the address to this model, as well as the callback function. In this function we applied the custom material for it’s children.

要导入模型,我们只需指定该模型的地址以及回调函数即可。 在此功能中,我们为其子级应用了自定义材料。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

Stay tuned for new lessons and you are sure to find something new and interesting for yourself.

请继续关注新课程,您一定会发现适合自己的新事物。

翻译自: https://www.script-tutorials.com/webgl-with-three-js-lesson-4/

更多相关推荐


webstorm无法识别index和index.js文件,解决办法

发布时间:2022-11-04 WEBSTORM JAVASCRIPT 前端
index.js没有了高亮,而且新建的index.js无法打开        解决办法:                打开设置&gt;搜索文件类型&gt;找到按文件内容自动检测到的文件类型,把里面的index和          index.js删除掉恢复正常     如果没有解决,可以在看一下下方的文本,把index.js删掉,不然会识别成txt类型...

常规css,js引入

发布时间:2019-03-02 JS CSS
php//css,js用$this-&gt;assign('MODULE_NAME',MODULE_NAME);$this-&gt;assign('ACTION_NAME',ACTION_NAME);$this-&gt;assign('ver',rand(11111,99999));general.html&lt;!--单页的css--&gt;&lt;linkrel="stylesheet"hre...

javascript2048游戏开发练习笔记

我是写笔记,实际点是保存自己练习成果,视频教程来自网络的 JavaScript网页游戏开发实战篇喜欢的自行百度2048游戏分析:1.键盘事件:上下左右2.单元格(16个),背景色3.数字单元格(16个),背景色,字体颜色4.判断数字单元是否可以移动:1)左移动,最左边那一列不能移动,相同数字叠加,判断移动数字和目标之间单元格是否为空,如果不为空,是否数字相同。2)右移动,最右边那一列不能移动,相同...

SVG扩散特效

发布时间:2022-11-22 ES6 CSS3 CSS 动画 VUE
&lt;template&gt;&lt;divclass="title"&gt;扩散特效&lt;/div&gt;&lt;!--可以通过讲宽高设置为0,实现应用滤镜效果,但不隐藏SVG元素--&gt;&lt;svgclass="hideSVG"&gt;&lt;defs&gt;&lt;!--这是一个SVG内发光效果示例(内发光可以设置颜色,内阴影一般只有黑色)--&gt;&lt;!--SVG的内阴影滤...

js面向对象系列——基本数据类型

发布时间:2015-09-26 数据类型 JS
该系列是自己在参考大量资料之后,自己的学习笔记,也是自己所学的阶段性总结,首先,我的思路是从基本的数据类型开始首先,我需要了解的重要重要工具typeof:概念:用来检测给定变量的类型作用:1区分是不是原始值类型varbaseType=function(){console.log("String类型:"+typeof("cc"));console.log("Number类型"+typeof(12))...

JS数据类型分类和判断

发布时间:2019-03-27 JAVASCRIPT VIEWUI PYTHON
2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt;JavaScript中有6种数据类型:数字(number)、字符串(string)、布尔值(boolean)、undefined、null、对象(Object)。其中对象类型包括:数组(Array)、函数(Function)、还有两个特殊的对象:正则(RegExp)和日期(Date)。一、分类从不同的角度对6种数据类型进行分类...

异步加载时间线

发布时间:2022-08-12 JAVASCRIPT
1.document对象创建排第一,页面HTML去解析,文本内容和节点文件状态成loding;2.先解link外联式,;l浏览器线程加载开始了-》3,script外联式,不设异步加载async、defer,l浏览器线程加载开始了-》4.,script外联式,不设异步加载async、defer,l浏览器线程加载开始了-》5.,script外联式,不设异步加载async、defer,l浏览器线程加载开...

十三章 定时器

发布时间:2022-11-19 JAVASCRIPT ECMASCRIPT 开发语言
一、定时器1、含义:就是js给我们让我们延迟执行一段代码或者是重复执行一段代码==是js延迟执行代码的一种机制;2、分类:一次性定时器(炸弹定时器)和反复性定时器(间歇性定时器);二、开始定时器1、第一类:一次性定时器(炸弹定时器);    (1)语法:setTimeout(function(){},时间);    (2)时间:使用的是毫秒数;    (3)执行机制:只能执行一次,就是指定的时候到...

带下拉框的文本框

发布时间:2013-08-06 HTML+JS+JQUERY+XML+AJAX JAVASCRIPT HTML
带下拉框的文本框&lt;scriptlanguage="javascript"&gt;varm_strTextselectDiv="Textselectshow_Div"varm_intTextSelectIn=falsevarie=(document.getElementById&amp;&amp;document.all);for(varIDx=0,IDy='';document.getEle...

【翻译】Ext JS 4之HelloWorld

发布时间:2012-06-23 移动开发 测试 JAVASCRIPT VIEWUI
原文:http://www.sencha.com/blog/helloworld-with-ext-js-4/本教程将帮助你学习使用SenchaExtJS4。在文章最后附有完整的源代码和3个高清视频。开始之前使用本教程,需要为Sencha配置开发环境,包括一个浏览器、Web服务器和文本编辑工具(或代码IDE)。我使用的是Chrome浏览器、Mac的Web服务器和komodo编辑器。在Sencha的...

jQuery下ajax事件的简单分析

发布时间:2013-07-10 测试 JAVASCRIPT VIEWUI JSON
昨天写了一篇关于监视页面动态生成元素问题的文章,引起了一些小小的争议,不过我从中学到了很多。文章在这,《jQuery下实现等待指定元素加载完毕》当然动态生成的节点元素分很多种情况,这里我们只分析ajax取得数据后生成元素问题。昨天有大侠在下面评论,我学到了两种方法,一是ajaxSuccess来监听,二是DOMNodeInserted来监听,最终我选择了ajaxSuccess而不打算用DOMNode...

Iphone官网的所有实例代码

发布时间:2011-10-06 JAVASCRIPT VIEWUI
虽然不是什么很重大的发现但是为了方便查找还是把他记录在这了http://developer.apple.com/library/ios/navigation/#section=Resource%20Types&amp;topic=Sample%20Code希望对大家有用...

使用生成器展平异步回调结构

发布时间:2016-06-03 JAVASCRIPT VIEWUI PYTHON
1.关于异步回调异步机制,从某个角度,可以看成是——使用非阻塞的流程,以注册回调函数的形式进行业务处理。传统机制,是顺序执行代码,如果某个函数很长时间不返回,那么下面的代码就得不到执行,这就比较浪费时间。然后,对于这种问题的解决,一般有两种办法。一是以线程或进程的方式,跑多个实例,这样来把等待的消耗降低。二是就让函数尽快返回,需要等待的资源得到后再使用另外的函数去处理它。比如下面的代码:respo...

jsAPI小节

发布时间:2022-11-17 JAVASCRIPT 前端 开发语言
1.节点包括document:文档标签:基本可以等同于元素(标签包含的内容是元素)属性:属性一般有属性值文本:元素(标签)的第一个子节点(最后一个节点)就是文本节点(firstChild)(1)节点类型nodeType(2)节点名称nodeName(3)节点值nodeValue2.元素的第一个子节点就是文本节点(firstChild)!important3.节点之间的关系节点:document标签...

前端知识

发布时间:2016-09-11 前端 面试 JSON VIEWUI
编写javascript深度克隆函数deepClonefunctiondeepClone(obj){  var_toString=Object.prototype.toString;  //null,undefined,non-object,function  if(!obj||typeofobj!=='object'){      returnobj;  }  //DOMNode  if(obj...

最近在做斗地主扑克游戏的一些代码和思路

发布时间:2011-01-16 JAVASCRIPT VIEWUI
 扑克游戏共54张牌,因此只创建了54个牌的实例,并且这些实例在整个应用中只创建一次,以节省内存,背面牌创建了17*2个普通背面牌实例,17个地主背牌实例,17*2个农民背牌实例因为会频繁的出牌,删牌 代码1/**2*set方法仅刷新位置3*4*/5publicfunctionsetPaiLeft(rivalUser:IUserModel,rivalChair:IChairModel):void6...

echarts 柱状图滚动

发布时间:2022-11-23 JAVASCRIPT 前端 ECHARTS
实现效果:柱形图展示水平滚动条,并且鼠标滚动支持让滚动条平移echarts文档里,图形的滚动条分两种内置型(效果是:鼠标在图中点击拖动平移,在图中滚动缩放)滚动条型(效果是:鼠标拖动滚动条平移,鼠标拖大缩小滚动条缩放)而我们要实现的就是综合了这两种。。既要内置型的能在图中滚动,又要滚动条的样式实现代码constzoomData=[//有滚动条平移{type:'slider',realtime:tr...

jquery 简单的进度条实现代码

发布时间:2015-04-16 JQUERY PROGRESSBAR 进度条
效果图需要用到的图片:背景图片:进度显示图片:网页结构:复制代码代码如下:&lt;divid="center"&gt;&lt;divid="message"&gt;&lt;/div&gt;&lt;divid="loading"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;css代码:代码复制代码代码如下:#center{margin:50px...

XPages 开发实践:开发基于 XPages 的复合应用程序

发布时间:2010-08-16 JAVASCRIPT VIEWUI JSON 数据库
李伟,软件工程师,IBM 简介: 本文详细介绍了如何使用LotusDominoDesigner8.5中的XPages技术开发一个复合应用程序。背景简介这个部分将会对本文中所使用的相关技术做简要的介绍。读者如需了解更详尽的内容,可以访问IBM或相关组织的网站。复合应用技术简介复合应用程序是面向服务体系结构(ServiceOrientedArchitecture,SOA)和上下文协作策略(contex...

vue3 extends的使用

发布时间:2022-11-24 JAVASCRIPT VUE.JS VUE组件 前端
此处使用extends继承element-plus中的elCascader组件,并改写options里的数据&lt;template&gt;&lt;el-cascaderv-bind="{...$props,...$attrs}":options="state.options"&gt;&lt;/el-cascader&gt;&lt;/template&gt;&lt;script&gt;import...

闭包的理解

发布时间:2022-11-23 JAVASCRIPT ECMASCRIPT 开发语言
1、概念闭包函数: 声明在一个函数中的函数,叫做闭包闭包: 内部函数总是可以访问其所在外部函数声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。2、解释 例子:        一个人需要被检查身体(操作私有属性);但是不能直接杀人去检查(破坏封装性);用了一个检查...

js笔记6-try-catch

发布时间:2019-09-06 TRY JS
try…catchtry{}chatch(e){}//finally{}不抛出错误try里面的代码发生错误,将不执行发生错误的代码及其往后的try内的代码error.name六种值对应的信息EvalError:eval()的使用与定义不一致RangeError:数值越界ReferenceError:非法或不能识别的引用数值SyntaxError:发生语法解析错误TypeError:操作数类型错误U...

DWZ国产开源UI框架介绍

发布时间:2012-02-28 VIEWUI WEB UI & JQUERY UI JSON JAVASCRIPT
在Web应用程序的开发过程中,当后台的架构比较成熟后,我们会发现UI成了开发最大的瓶颈。对于大公司而言,他们都有自己的UI框架,因为他们有足够的资源去维护和发展自己的UI框架。通常小公司没有这样的技术力量和资源去维护自己的一套UI框架,选择一个开源UI框架是比较实际的一条路子。 我为WebUI框架做过一次选型,对比了ExtJs/JqueryUI/dhtmlx/DWZ等几个UI框架后,最终选定了DW...

HTML笔记 (2)

发布时间:2022-10-20 JAVASCRIPT 前端 HTML
&lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;title&gt;笔记&lt;/title&gt;&lt;STYLE&gt;H2{font-family:'微软雅黑';font-size:30px;text-align:center;text-decoration:underli...

javascript动态创建表格:新增、删除行和列

发布时间:2015-11-17 JAVASCRIPT VIEWUI XHTML
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。1、inserRow()和insertCell()函数insertRow()函数可...

Javascript 动态创建表格:新增、删除行和单元格

发布时间:2009-04-15 HTML VIEWUI BLOG JAVASCRIPT XHTML IE
利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。1、inserRow()和insertCell()函数insertRow()函数可以带参数,形式如下:insertRow(index):index从0开始这个函数将新行添加到index的那一行前,比如ins...

什么是JavaScript异步编程?

发布时间:2022-11-15 ECMASCRIPT JAVASCRIPT 开发语言 前端 面试
相信很多程序员小伙伴都知道,JavaScript是单线程语言,如果没有异步编程,根本无法使用,理解并学会异步编程尤为重要。针对这一技术点,今晚,黑马程序员丁老师为大家带来了公开课:深入浅出JavaScript异步编程。本次课程会分享JS异步工作机制,有哪些异步编程方案,并且通过手写Promise来加深理解,帮助大家彻底掌握异步在JavaScript的使用,在面试及日常工作中游刃有余。 今晚公开课 ...

(Ext)Ext事件的处理

发布时间:2009-01-19 JAVASCRIPT VIEWUI
Ext事件的处理在Javascript中,你将不得不经常进行事件的处理。这有时很难顺利进行,因为你需要进行不同的跨浏览器标准化事件处理。而ExtJs使得处理事件变得非常容易,有时候甚至还富于乐趣(!)。非常基础的例子想象一下这样一个例子,当用户点击一个链接时,你想向他显示一则警告信息。请继续往下看,因为在开始处理事件前你也许想知道更多。varel=Ext.get('somelink');el.on...

科大讯飞前端一面(8.26)、二面(9.6)、HR面(9.21)

发布时间:2022-09-21 JAVASCRIPT VUE.JS 前端
科大讯飞一面(8.26)一面一个面试官忘了问的啥了,反正都是老八股,想起来再补充然后聊了研究方向,深度学习为什么不搞深度学习来搞前端?一面面完,9月1号约了二面科大讯飞二面(9.6)一如既往的自我介绍因为我用nodejs调用了MongooDB实现的服务端所以,面试官问我怎么创建MongooDB?然后如何连接,MongooDB如何创表,怎么使用?描述一下整个流程?然后让我描述一下vue中的方法?(我...

数据结构-非线性-树-二叉树

//概述//线性结构用于描述数据元素之间的线性关系,实际应用的数据元素之间的关系错综复杂,很难用线性关系描述,这就用到非线性结构,//树它描述客观世界中事务之间的层次关系,一切具有层次关系的问题都可以用树来描述//例如,家族的族谱,各种社会结构,(操作系统的文件系统中,用树表示目录结构)(编译程序中,用树表示源程序的语法结构)#pragmamark--树的定义//树,是有n(n&gt;=0)个结点...

关于Vue.js的知识,你知道几个?

发布时间:2021-01-19 JAVA VUE WEB 编程语言
Vue.js(读音/vjuː/,类似于view)是一套构建用户界面的渐进式框架。Vue只关注视图层,采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue学习起来非常简单,本教程基于Vue2.1.8版本测试。阅读本教程前,您需要了解的知识:· HTML· CSS· JavaScript搭建环境工欲善其事必先利其器,我们的学习计划从学会搭建Vue所...

HTML+CSS+JavaScript实现仿猫眼电影购票选座

发布时间:2022-11-25 JAVASCRIPT 流程图
一、功能实现(1)在页面左侧区域,单击“可选座位”,将座位设置为“已选座位”,一次最多选5个座位。右侧座位号汇总区域显示已选中的座位号,并显示电影票总价。(2)在页面左侧区域,单击“已选座位”,将座位设置为“可选座位”。右侧选座信息汇总区域取消相应的座位号,并显示电影票总价。(3)单击页面右侧选座信息汇总区域座位号右上角的“×”,将座位设置为“可选座位”。选座信息汇总区域取消相应的座位号,并显示电...

jquery中实现全选按钮

发布时间:2013-06-22 JAVASCRIPT VIEWUI
&lt;head&gt;&lt;scripttype='text/javascript'src='js/jquery-1.5.1.js'&gt;&lt;/script&gt;&lt;scripttype='text/javascript'&gt;$(document).ready(function(){$('#handle').click(function(){if($(this).attr('c...

全选demo

发布时间:2013-12-13 JAVASCRIPT VIEWUI
我们处理数据时,最好能够支持全选操作。选中之后,进行删除,或其他处理。我自己写了一个demo。主要功能:1.点击全部选中2.点击全部取消3.然后进行获取选中的id,进行处理代码如下:&lt;html&gt;&lt;metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/&gt;&lt;head&gt;&lt;scriptsrc=...

使用javaScript实现checkbox全选

发布时间:2018-03-21 JAVASCRIPT VIEWUI PYTHON
2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt;functioncheckAll(names,ids){varcheckboxs=document.getElementsByName(names);if(document.getElementById(ids).checked==false){for(vari=0;i&lt;checkboxs.length;i++){che...

事件处理机制

发布时间:2020-08-19 JAVASCRIPT
事件处理机制代码分类初始化执行代码:包含绑定dom事件监听,设置定时器,发送ajax请求的代码回调执行代码:处理回调逻辑js引擎执行代码的基本流程:初始化代码===&gt;回调代码模型的2个重要组成部分:事件管理模块(定时器/DOM事件/Ajax)回调队列模型的运转流程执行初始化代码,将事件回调函数交给对应模块管理当事件发生时,管理模块会将回调函数及其数据添加到回调列队中只有当初始化代码执行完后(...

head rush ajax chapter4 DOM

发布时间:2010-04-15 JAVASCRIPT VIEWUI
《HeadRushAjax》website:http://www.headfirstlabs.com/books/hrajax/document对象可以让你的JavaScript访问Web浏览器的DOM树。可以把&lt;html&gt;看作树的根。getElementById()通过id属性找到页面中的元素。varmananger=document.getElementById("Mg").val...

head rush ajax chapter1 code

发布时间:2010-04-16 JAVASCRIPT PHP VIEWUI
board.html:&lt;html&gt;&lt;head&gt;&lt;title&gt;Boards'R'Us&lt;/title&gt;&lt;linkrel="stylesheet"type="text/css"href="boards.css"/&gt; &lt;scripttype="text/javascript"src="text-utils.js"&gt;有个空格&lt;/s...

head rush ajax chapter3 异步应用程序

发布时间:2010-04-16 测试 JAVASCRIPT PHP VIEWUI
异步是指当服务器在处理你的请求的时候,你不用等候,可以继续做你该做的事,服务器如果完成你的请求自然会通知你。同步的请求会等候来自服务器的响应,然后才能继续做别的事。例如你有2个咖啡机,即使其中的一个正在工作,你还可以使用剩下的一个煮咖啡,两个服务互不影响。一个请求对象可以做出多个请求,但是一次只能追踪一个请求在服务器上的进展。后面的请求会覆盖掉前面的请求。这时需要多个请求对象来处理不同的请求。当服...

前端面试题

发布时间:2022-08-06 HTML JAVASCRIPT 开发语言 CSS
1.请你说说线程和进程的区别        (地址空间、开销、并发性、内存)差别:不同的操作系统资源管理方式        进程有独立的地址空间,线程有自己的局部变量和堆栈,但线程没有自己的地址空间。        一个进程至少拥有一个线程.        进程的并发性较低,线程的并发性较高。        线程比进程开销小些         一个进程崩溃后,在保护模式下不会对其他进程产生影响,但...

Android、ios和H5交互

发布时间:2022-11-08 JAVASCRIPT 前端 开发语言
需求描述:    在App中点击icon通过iframe打开H5子页面。遇到的问题:    1.工程将App和H5子页面没有部署在同一个端口下,造成跨域问题(如下图)。    2.H5向Android和ios发送消息时,需要父系窗口发送消息。    3.H5注册回调信息时,也需要注册在父系窗口上。 H5向Android和ios发送消息,方法名称都是和Android、ios协商定义。if(windo...

计时api_资源计时API简介

发布时间:2014-07-22 VIEWUI PYTHON JAVASCRIPT JAVA VUE JS
计时apiSitePoint最近发表了一些有关性能的好文章。特别是,克雷格·巴克勒(CraigBuckler)撰写了一篇题为《平均网页重量增加32%》的文章,在2013年发表了另一篇文章,讨论了减轻网站重量的一些轻松方法。但是,提高我们网站和应用程序的速度不仅仅是减少JavaScript文件并使用图像压缩器的问题。在许多情况下,我们必须处理外部资源(来自CDN的库,来自YouTube的视频,来自F...