最近项目需要折腾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. 什么是英特尔® Edison 模块？

    英特尔® Edison 模块 是一种 SD 卡大小的微型计算芯片,专为构建物联网 (IoT) 和可穿戴计算产品而设计. Edison 模块内含一个高速的双核处理单元.集成 Wi-Fi*.蓝牙* 低能耗 ...

  2. NodeJs 开发微信公众号（五）真实环境部署

    在测试环境下开发完成代表着你离正式上线的目标不远了.接下来本章就主要谈一谈把测试环境的公众号升级为正式的公众号. 服务器和域名 目前为止我们只是在自己的电脑上完成了测试环境.真实的线上环境当然需要自己 ...

  3. Fedora 24中的日志管理

    Introduction Log files are files that contain messages about the system, including the kernel, servi ...

  4. ASP.NET MVC Model验证(三)

    ASP.NET MVC Model验证(三) 前言 上篇中说到在MVC框架中默认的Model验证是在哪里验证的,还讲到DefaultModelBinder类型的内部执行的示意图,让大家可以看到默认的M ...

  5. egret GUI 和 egret Wing 是我看到h5 最渣的设计

    一个抄袭FlexLite抄的连自己思想都没有,别人精髓都不懂的垃圾框架.也不学学MornUI,好歹有点自己想法. 先来个最小可用集合吧: 1. egret create legogame --type ...

  6. ABP源码分析四十三：ZERO的本地化

    ABP Zero模块扩展了ABP基础框架中的本地化功能,实现了通过数据库管理本地化的功能.其通过数据库保存本地化语言及其资源. ApplicationLanguage:代表本地化语言的实体类.一种语言 ...

  7. Jmeter安装与环境部署

    Jmeter安装与环境部署 版权声明:本文为博主原创文章,未经博主允许不得转载. 博主:海宁 联系:whnsspu@163.com

  8. ZooKeeper安装与配置

    一. 单机安装.配置: 1. 下载zookeeper二进制安装包下载地址:http://apache.dataguru.cn/zookeeper/zookeeper-3.4.3/zookeeper-3 ...

  9. 05. Web大前端时代之：HTML5+CSS3入门系列~H5 多媒体系

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.引入 概述 音频文件或视频文件都可以看做是一个容器文 ...

  10. 逆向工程 - Reveal、IDA、Hopper、HTTPS抓包 等

    目录: 一. iOS 如何做才安全 二.ipa文件 三.沙盒 中的数据 四.Reveal:查看 任何APP 的UI结构 五.反编译工具:IDA 六.反编译工具:Hopper Disassembler ...