学习

目标绘制点、线、面绘制复杂图形 threejs学习三杠一：点线面 3D世界在计算机的世界里，3D世界是由点组成，两点成一线，三个不在一条直线上的点就能组成一个三角形面，无数个三角形面就能组成各种形状的物体。（计算机图形的理论知识）通常把这种网络模型叫做 Mesh 模型。给物体贴上皮肤（纹理），那么这个物体就实际展现出来了。然后无数个这样的物体就组成了 3D 世界。 Threejs绘制一个点 1、定义在三维空间中的某一个点可以用一个坐标点来表示。一个坐标 …

学习

threejs学习二：征途

波澜之泉

3D , javascript , Threejs

1,609 次访问

2019

03-18

目标介绍 WebGL 基础介绍 WebGL 中的骑兵 Three.js 编写 Three.js 的简单实例简单实例模板

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="js/three.js"></script>
</head>
<body>
    <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.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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.CubeGeometry(1,1,1);

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var cube = new THREE.Mesh(geometry, material); scene.add(cube);

camera.position.z = 5;

function render() {

requestAnimationFrame(render);

cube.rotation.x += 0.1;

cube.rotation.y += 0.1;

renderer.render(scene, camera);

}

render();

</script>

</body>

</html>

实例的效果是显示旋转一个绿色正方体，如下，但不同版本的 three.js 可能默认的背景颜色不一样：代码解析 1、三大组建在 Three.js 中，要渲染一个物体到网页中，需要三个组建：场景（scene）、相机（camera）、渲染器（renderer）。有这三样东西，才能将物体渲染到 …

threejs 学习一：入门

波澜之泉

3D , javascript , Threejs

2,660 次访问

2019-03-18

2019

03-18

简介 threejs 是基于 WebGL 开发一种集成、封装的 JS API，可以理解为 three + js，即 3D + javascript 的组合，实现在浏览器上打开网页渲染 3D 效果。 JavaScript 是运行在网页端的脚本语言（前端），毫无疑问 threejs 是运行在浏览器上的。由于近年 javascript 的计算能力因为 google 的 V8 引擎的到了大幅增强，不仅可以实现高计算量 3D 的快速渲染，甚至实现一部分服务器功能都没有问题。例如 nodejs。、关于浏 …

WordPress文章内部跳转功能

html , wordpress

2019-03-14

目录简介一、正文二、后记三、结果展示简介这篇文章是展示如何在文章添加类似目录之类的文章内部跳转功能。一、正文使用方法并不是使用 WordPress 插件，而是根据 HTML 对 URL 解析特性，通过在文章内部添加 “隐代码”，使文章页面 “重加载” 至隐代码所在。一般写 WordPress 文章，表面上是在文章编辑器上着笔（可视化模式/Vis …

Read More →WordPress文章内部跳转功能

学习

Font Awesome 矢量字体

CSS , Font Awesome

一、简介官方网站：http://fontawesome.dashgame.com/ Github：https://github.com/FortAwesome/Font-Awesome Font Awesome 是一款第三方开发的一套免费的图标字体库和 CSS 框架。这些图标都是矢量图形，以 .svg 文件格式存储。Font Awesome 矢量图形可以像字体一样被处理，可以通过使用像素设置字体大小指定图标大小，并且这些图标可以继承父类 HTML 标签的字体大小。 Font Awesome 支 …