最近项目需要折腾three.js，有关three.js几点说明

1.作用 threejs适合创建简单的模型视图

2.对于复杂的模型图（如：室内模型图）需要美术3D制作，前端导成特定格式文件(如*.mtl/*.obj 格式文件 )，

之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可

基础案例 https://github.com/AragornZJF/ThreeExample.js Chapter7.3.2

或者游戏案例  http://www.w3cmark.com/2016/threejs-mark-02.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>材质</title>

         <style>

             #canvas-frame {

                 width: 100%;

                 height: 600px;

             }

         </style>

     </head>

     <body onload="threeStart()">

         <div id="canvas-frame" ></div>

     </body>

     <script type="text/javascript" src="js/three.js"></script>

     <script type="text/javascript">

             var renderer, //渲染器

                 width = document.getElementById('canvas-frame').clientWidth, //画布宽

                 height = document.getElementById('canvas-frame').clientHeight; //画布高

             //初始化渲染器

             function initThree(){

                 renderer = new THREE.WebGLRenderer({

                      antialias : true

                      //canvas: document.getElementById('canvas-frame')

                 });

                 renderer.setSize(width, height);

                 renderer.setClearColor(0xFFFFFF, 1.0);

                 document.getElementById('canvas-frame').appendChild(renderer.domElement);

                 renderer.setClearColor(0xFFFFFF, 1.0);

             }

             //初始化场景

             var scene;

             function initScene(){

                 scene = new THREE.Scene();

             }

             var camera;

             function initCamera() {  //透视相机

                 camera = new THREE.PerspectiveCamera(45,  width/height , 1, 10000);

                 camera.position.x = 450;

                 camera.position.y = 100;

                 camera.position.z = 700;

                 camera.up.x = 0;

                 camera.up.y = 1; //相机朝向--相机上方为y轴

                 camera.up.z = 0;

                 camera.lookAt({  //相机的中心点

                     x : 0,

                     y : 0,

                     z : 0

                 });

             }

             function initLight(){

                 // light--这里使用环境光

                 //var light = new THREE.DirectionalLight(0xffffff); /*方向性光源*/

                 //light.position.set(600, 1000, 800);

                 var light = new THREE.AmbientLight(0xffffff); //模拟漫反射光源

                 light.position.set(600, 1000, 800); //使用Ambient Light时可以忽略方向和角度，只考虑光源的位置

                 scene.add(light);

             }

             function initObject(){  //初始化对象

                  //导入材质

                 var texture = THREE.ImageUtils.loadTexture('img/floor.jpg', {}, function() {

                     renderer.render(scene, camera);

                 });

                 /**

                  * 关于material材料注意点说明

                  * MeshBasicMaterial：对光照无感，给几何体一种简单的颜色或显示线框。

                  * MeshLambertMaterial：这种材质对光照有反应，用于创建暗淡的不发光的物体。

                  * MeshPhongMaterial：这种材质对光照也有反应，用于创建金属类明亮的物体。

                  */

                 var material = new THREE.MeshLambertMaterial({

                     map: texture

                 });

                 //创建一个立方体

                 var geometry = new THREE.BoxGeometry(600, 25, 1000);

                 //将material材料添加到几何体geometry

                 var mesh = new THREE.Mesh(geometry, material);

                 scene.add(mesh);

             }

             function initGrid(){ //辅助网格

                 var helper = new THREE.GridHelper( 1000, 50 );

                 helper.setColors( 0x0000ff, 0x808080 );

                 scene.add( helper );

             }

             function threeStart(){

                 //初始化渲染器

                 initThree();

                 //初始化场景

                 initScene();

                 //初始透视化相机

                 initCamera();

                 //初始化光源

                 initLight();

                 //模型对象

                 initObject();

                 //初始化网格辅助线

                 initGrid();

                 //渲染成像

                 renderer.render(scene, camera);

             }

     </script>

 </html>

效果图

作者：Avenstar

出处：http://www.cnblogs.com/zjf-1992/p/6130614.html

关于作者：专注于WEB前端开发、喜欢阅读

本文版权归作者所有,转载请标明原文链接。

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！

支付宝

微信

Threejs中的材质贴图的更多相关文章

  1. 如何在 Creator3D 中切换模型贴图，超级简单！

    效果预览 前两天有伙伴在 QQ 上询问,如何在 Creator 3D 中切换模型贴图.Shawn 之前也没尝试过,不过根据之前 Cocos Creator 的经验以及这几天对 Creator 3D 的 ...

  2. TOJ3039: 材质贴图

    3039: 材质贴图  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 46       ...

  3. iOS - Scenekit3D引擎初探之 - 给材质贴图

    今天简单说一下 SceneKit 给材质贴图. 1,最简单的一种方法,直接打开dae 或者 scn 文件直接设置  如上图,这个dae 文件中只有一个几何体,几何体中只有一个材质球,然后设置材质球的d ...

  4. 转 threejs中3D视野的缩放实现

    Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov ...

  5. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  6. QT模态对话框用法（在UI文件中设置Widget背景图，这个图是一个带阴影边框的图片——酷）

    QT弹出模态对话框做法: 1.新建UI文件时,一定要选择基类是QDialog的,我的选择是:Dialog without Buttons(),如下图: 2.然后在使用的时候: MyDialog dlg ...

  7. 一步步教你读懂NET中IL（附带图）

    一步步教你读懂NET中IL(附带图) 接触NET也有1年左右的时间了,NET的内部实现对我产生了很大的吸引力,在msdn上找到一篇关于NET的IL代码的图解说明,写的挺不错的.个人觉得:能对这些底部的 ...

  8. angularjs中使用轮播图指令swiper

    我们在angualrjs移动开发中遇到轮播图的功能 安装 swiper  npm install --save swiper   或者 bower install --save swiper 引入文件 ...

  9. VMware workstation 虚拟机中安装乌班图及其兼容性问题

    之前我在虚拟机中安装乌班图,是先安装好虚拟机,然后将预先下载好的乌班图镜像文件导入安装,这样安装起来还是有些繁琐的,中间要设置好多东西.今天领导给我拷了个虚拟机,还有乌班图的安装文件,是这样的. 对于 ...

随机推荐

  1. iOS开源项目周报1215

    由OpenDigg 出品的iOS开源项目周报第一期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. PY ...

  2. Oracle 表空间和用户权限管理

    一. 表空间 Oracle数据库包含逻辑结构和物理结构. 数据库的物理结构指的是构成数据库的一组操作系统文件. 数据库的逻辑结构是指描述数据组织方式的一组逻辑概念以及它们之间的关系. 表空间是数据库逻 ...

  3. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  4. Linux下编译安装Vim8.0

    什么是Vim? Vim 是经典的 UNIX 编辑器 Vi 的深度改良版本.它增加了许多功能,包括:多级撤销.格式高亮.命令行历史.在线帮助.拼写检查.文件名补完.块操作.脚本支持,等等.除了字符界面版 ...

  5. NYOJ 954

    首先观察: 2! = 2×1                 = (2)10     = (10)2,        则第一个1是第2位,2!有1个质因数23! = 3×2×1             ...

  6. 详解前端模块化工具-webpack

    webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合 ...

  7. Retrofit2.0起步篇

    retrofit 英文名字是改装的意思,也就是说他是对网络请求的一种改装,他不负责进行网络请求,他是对请求方式的一种封装.真正进行网络请求的是okhttp. 以下所有内容在Android Studio ...

  8. Java发送Http请求并获取状态码

    通过Java发送url请求,查看该url是否有效,这时我们可以通过获取状态码来判断. try { URL u = new URL("http://10.1.2.8:8080/fqz/page ...

  9. RowVersion数据类型

    RowVersion数据类型是系统自动生成的,唯一的,二进制数字,数值和binary(8)相同,RowVersion通常用作给Table的数据行加版本戳,存储大小为 8 个字节.RowVersion数 ...

  10. 非关系型数据库来了,CRL快速开发框架升级到版本4

    轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...