threejs学习笔记03---网格

人丑就该多读书 2017-12-18 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<div id="canvas-frame"></div>
<script src="js/three.js"></script>
<script>
    //定义一些需要的变量
    var renderer, camera, scene, light, object;
    var width, height;
    //初始化three
    function initThree(){
        width = document.getElementById('canvas-frame').clientWidth;
        height=document.getElementById('canvas-frame').clientHeight;
        renderer= new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(width,height);
        document.getElementById('canvas-frame').appendChild(renderer.domElement);
        renderer.setClearColor(0xFFFFFF, 1.0);
    }
    //定义相机
    function initCamera(){
        camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
        camera.position.x=0;
        camera.position.y=1000;
        camera.position.z=0;
        camera.up.x=0;
        camera.up.y=0;
        camera.up.z=1;
        camera.lookAt({
            x:0,
            y:0,
            z:0
        });
    }
    //定义场景
    function initScene(){
        scene = new THREE.Scene();
    }
    //定义灯光
    function initLight(){
        light = new THREE.DirectionalLight(0xFF0000,1.0,0);
        light.position.set(100,100,200);
        scene.add(light);
    }
    var cube;
    function initObject(){
        var geometry = new THREE.Geometry();
        geometry.vertices.push( new THREE.Vector3(-500,0,0));
        geometry.vertices.push( new THREE.Vector3(500,0,0));

        for(var i = 0;i<=20;i++){
                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
                line.position.z=(i*50)-500;
                scene.add(line);

                var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000,opacity:0.2}));
                line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;
                scene.add( line );
        }

    }
    function threeStart() {
        initThree();
        initCamera();
        initScene();
        initLight();
        initObject();
        renderer.clear();
        renderer.render(scene, camera);
    }
    window.onload = threeStart();
</script>
</body>
</html>
人丑就该多读书

人丑就该多读书

相关推荐

【threejs】从零到一的web3d时代

“未来早已到来，只是尚未流行。”最近，由于业务的需求，笔者的团队终于迈进了3d时代。其实，早在2017年，笔者便开始尝试前端的3d探索，因为当时主要的业务场景是运营活动，求新、创新便是活动的特性。不过，当时由于种种原因，最后未能落地，但未曾想到，会在3年后

ALLENJIAO / 0评论 2020-06-13

3d模型一般怎么导入到到Threejs中使用

mtl文件用于描述多边形可视面貌的材质如果你可以导出obj、mtl文件的话，那么就可以使用下面的代码把3d模型添加到three.js构建的场景里了

stcaolei / 0评论 2020-03-08

threejs使用各种坑实验过程

经过老板20天惨无人道的摧残，终于小有成就。开发使用： C4D、Blender2.75、[threejs-r72]万事开头难，第一个问题就是怎么才能把3d软件中做好的模型显示在浏览器中。接着在网上搜索发现Blender这玩意，由于设计师对C4D情有独钟不会

moyebaobei / 0评论 2020-03-07

用Three.js绘制一个3D天体系统

年前就一直研究了下WebGL相关的东西，看了很多资料和文档，这里做了一些小实践，记录分享一下。WebGL是一种 3D 绘图协议，这种绘图技术标准结合了JavaScript和OpenGL ES 2.0，在HTML5的Canvas元素中使用，从而可以在 Web

stcaolei / 0评论 2020-03-06

WEBGl之THREEJS导入shp文件，生成三维模型

如果threejs可以导入shp文件，就可以呈现效果那是多么完美的事情啊！当然这是肯定的，那是我在经历的痛苦期，现在来分享我的甜品。有个偶然，一个QQ群的人，告诉我有个大神写了shp.js，可以读取线坐标，这才是我豁然开朗。之后，我就开始潜心，通读代码，已

ixshells / 0评论 2020-03-05

threejs创建三维文字TextGeometry

parameters — Object that can contains the following parameters.　　size — Float. Size of the text. Default is 100.　　height — Float

moyebaobei / 0评论 2020-01-14

angular8 + threejs 实现太阳系3D动画

当项目决定要做宇宙星空效果的时候，我百度了一波；发现了threejs；然后就从0开始学习了；一路上坑坑洼洼的；网上确实有相关文章，但没有相对于新手的；尤其是我这种现看文档现做的；而且很多代码都是使用原生js或者jquery的；这次是我把threejs引入a

liulinsp / 0评论 2020-01-09

threejs 绘制辅助网格

GridHelper.js可以帮助绘制一个xz平面网格，它没有提供更多的参数，所以不能用于生成xy网格。line.position.y = i * divisions - size / 2; //设置line的位置。line.position.x = i

ALLENJIAO / 0评论 2019-12-20

Threejs之 .obj 模型投影

今天做项目的时候发现threejs中.obj模型投影与geometry的投影有一点不同，写个文章记录一下，防止忘记，也希望能够帮到大家！如果对你的问题产生了帮助，就请点个赞吧 ^_^ ~// obj.receiveShadow = true; /

moyebaobei / 0评论 2019-09-06

threeJs中的事件冒泡

在这几天工作中有遇到这么个问题：使用threeJS创建了一个3d效果图，且在该项目中使用了threeJs的轨道控制插件orbitcontrols插件，该效果图需要运行在移动端浏览器中，既然是运行移动端，自然需要用到触摸功能了，在我们常见的3d图中，有能旋转

涓涓溪流 / 0评论 2018-03-02

three.js学习资料整理

最近在学three.js，特地整理偶然间碰到的学习资料分享给大家，国内除了大公司，专门学习three.js的太少了，普通的业务前端学它并不会增大面试成功率，react，vue新特性，原理都学不利落呢，谁会去研究这种只是炫，好玩的东西呢

ALLENJIAO / 0评论 2019-07-01

Three.js官网demo分析（一）

Three.js官方文档比较精简，重点介绍api，没有一个合适的零基础的教程，但官网的demo十分丰富，遂产生从demo来逐渐学习Three.js的想法。// 初始化透视相机，参数。// 初始化渲染器，antialias表示抗锯齿, canvas属性将th

moyebaobei / 0评论 2019-07-01

Threejs教程之着色器

Three.js着色器很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果你不熟悉着色器语言，自然需要学习着色器语言语法，如果你有着色器语言基础，直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API

颜辉 / 0评论 2019-06-28

产品三维模型在线预览

插件最早实现Web3D技术所有技术方案，基本都要依赖特定插件来实现，渲染效率、渲染质量都有些问题，并未全面流行起来。本篇文章既然不涉及使用插件方式实现三维模型在线预览，就不在展开详述历史上需要插件实现在线预览三维模型的相关技术。WebGL技术说到WebGL

moyebaobei / 0评论 2019-06-28

threeJS中，那些会让阴影失效的操作

本来以为不就设一个阴影嘛，网上这么多文章，随便看一篇就知道怎么设置了，然而我却花了整整一天才让阴影出现...很多博主说，在threeJS中要让阴影显示，只要满足以下几个基本条件。使阴影在这6个面描述的范围内才能显示，否则可能只显示一部分或者不显示阴影，如下

liulinsp / 0评论 2019-06-27

笔记, threejs 和 glTF 的一些 tips

Object3D 获取中心点和尺寸Object3D 物体可以获取一个包含物体的 Box, 这个 Box 有一些功能, 比如获取中心点:. const center = box.getCenter;也可以用了获取物体的大小:. Orbit Control 如

ALLENJIAO / 0评论 2019-06-27

关于 Threejs 模型旋转问题(笔记)

用到一个基础的 three.js 的拖拽旋转, 梳理了一下资料,简单的描述就是定义了沿着 X Y Z 方向的依次旋转, 来模拟空间当中的任何一个旋转,比如这个例子, 鼠标在 X Y 方向的拖拽, 分别对应到地面的水平渲染, 和视角在纵向的旋转,而且, 即便

ALLENJIAO / 0评论 2019-06-27

ThreeJS创建3D的基本步骤及相关知识

点光源 —— THREE.PointLight;//hex：颜色，intensity：强度，distance：距离。聚光灯 —— THREE.SpotLight;//hex：颜色，intensity：强度，distance：距离，angel：着色角度(弧度

moyebaobei / 0评论 2015-01-05

three.js 中文文档 6.创建文字

DOM + CSS使用 html 是最快最简单来添加和管理文字的。大多数我们给的示例，是采用这种方法来用作描述性的层。<div id="info">Description</div>运用 css 标记语言的 z-

stcaolei / 0评论 2019-06-25

threejs中矩阵旋转原理

矩阵的概念threejs中的矩阵矩阵的应用用于旋转一个几何体创建一个立方体cube放到场景中；绕向量旋转30度var axis = new THREE.Vector3; //创建一个三维向量。var rotWorldMatrix = new THRE

cibeidelangren / 0评论 2019-06-21

ThreeJS中的点击与交互——Raycaster的用法

基础概念坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。webGL会将世界坐标先变换

moyebaobei / 0评论 2019-06-21

three.js笔记——（2）创建物体

前言之前的工作相当于是搭建好了摄影棚，这一节则需要邀请各位模特或者演员到镜头前表演了。而这些模特是如何生成的呢，本节就介绍如何用three.js提供的方法来创建物体即我们所说的模特。var cube = new THREE.Mesh; //组合几何体和材

liulinsp / 0评论 2019-06-21

使用3D引擎threeJS实现星空粒子移动效果

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。首先创建一个HTML文件,引入three.js

stcaolei / 0评论 2017-11-16

Three.js基础部分学习

To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render

moyebaobei / 0评论 2017-01-08

Threejs开发3D地图实践总结

前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点

liulinsp / 0评论 2017-07-21

threejs学习笔记04---相机动

<!DOCTYPE html>. margin: 0;padding: 0;border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;var

人丑就该多读书 / 0评论 2017-12-18