最近项目需要折腾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. BPM的魅力何在？

    BPM(Business Process Management , 企业流程管理平台) 是带动企业流程自动化的帮 手,也是最能忠实反应出企业作业流程问题症结的系统工具,在管理上,BPM可以让管理者利用 ...

  2. 信息安全－1：python之playfair密码算法详解[原创]

    转发注明出处: http://www.cnblogs.com/0zcl/p/6105825.html 一.基本概念 古典密码是基于字符替换的密码.加密技术有:Caesar(恺撒)密码.Vigenere ...

  3. mono-3.4.0 源码安装时出现的问题 [do-install] Error 2 [install-pcl-targets] Error 1 解决方法

    Mono 3.4修复了很多bug,继续加强稳定性和性能(其实Mono 3.2.8 已经很稳定,性能也很好了),但是从http://download.mono-project.com/sources/m ...

  4. 利用HTML5 的Datalist 元素实现输入提示

    HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷. 今天看到datalist 这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件 ...

  5. C#中，双屏/两屏/三屏/多屏跳转判断

    之前伤脑筋写过一次在Web中,JS,ActiveXObject去读取显示器数量.分辨率去判断单双屏跳转. 那么在客户端中,用C#去读取硬件信息,更方便更容易! 思路参考代码: ) { //此显示器是否 ...

  6. The type java.lang.CharSequence cannot be resolved. It is indirectly referenced from required .class files.

    参照 http://stackoverflow.com/questions/24301986/the-type-java-lang-charsequence-cannot-be-resolved-in ...

  7. 修改linux的hosts 后提示“无效的参数”

    碰到个问题,修改linux的主机名问题. vim /etc/hosts 192.168.154.129 129192.168.154.132 132192.168.154.133 133 本地ip是1 ...

  8. HTTP权威指南-基础知识

    1.URL,URI 统一资源标识符?统一标识定位符?   2.http,https,ftp http://<host>:<port>/<path>/?<que ...

  9. VS2013：Unit Test 单元测试入门

    一.打开VS ,找到工具栏的“工具->扩展和更新”,添加图片内容 二.新建控制台应用程序: CalculatorDemo 三.新建类:Operation.cs,并添加方法 namespace C ...

  10. 一个可随意定位置的带色Toast——开源代码Crouton的简单使用

    今天在公司要求的代码中,要求显示的提示能够更加具有多样化,而不是简单的Toast字样,第一想法肯定是自定义View呀,结果在浏览中发现还有这样的一个开源代码——Crouton. 几经折腾,发现这个东西 ...