最近项目需要折腾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. SharePoint 2016 入门视频教程

    之前一直有朋友让自己录一些SharePoint的入门视频,之前没有太多时间,一个巧合的机会收到CSDN学院的邮件,可以在CSDN上发布视频教程,自己就录了一些.说起录视频也是蛮辛苦的,每天下班吃完饭要 ...

  2. 自建git node pm2 （不赘述，就说遇见的问题）

    //======================[git]部分 主题部分还是按照网上的办法进行安装. 安装的话  分为两个办法(一个是yum (contos办法)  或者sudo(ubuntu办法) ...

  3. Express 教程 01 - 入门教程之经典的Hello World

    目录: 前言 一.Express?纳尼?! 二.开始前的准备工作 三.测试安装之经典的Hello World 四.使用express(1)来生成一个应用程序 五.说明 前言: 本篇文章是建立在Node ...

  4. 数据库备份并分离日志表（按月）sh 脚本

    #!/bin/sh year=`date +%Y` month=`date +%m` day=`date +%d` hour=`date +%H` dir="/data/dbbackup/f ...

  5. BZOJ 3110: [Zjoi2013]K大数查询 [树套树]

    3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 6050  Solved: 2007[Submit][Sta ...

  6. 不得不知的CLR中的GC

    引言 GC 作为CLR的垃圾回收器,让程序员可以把更多的关注度放在业务上而不是垃圾回收(内存回收)上.其实很多语言也有类似的东东, 如Java也有JIT 等等 GC基本概念 垃圾回收机制的算法有好多种 ...

  7. xamarin MasterDetailPage点击Master时卡顿现象

    在很多项目中经常会使用到MasterDetailPage的布局方式,而且一般做为主页面来开发,在开发中,发现一个并不算Bug的问题,但是却发生了,以此记录下来,方便大家探讨. 现象是这样的,我开发了一 ...

  8. Jquary入门（添加 修改 表单元素）+ JSON+弹框

    字符串拼接 计算机语言 都是 对  数据的处理(获取/修改数据)  添加元素  除了  固定的方法添加 以外 都是   字符串拼接(拼接成固定格式即可执行). 1.表单添加元素  append() 方 ...

  9. Vue 给子组件传递参数

    Vue 给子组件传递参数 首先看个例子吧 原文 html <div class="container" id="app"> <div clas ...

  10. Android自定义控件之自定义组合控件

    前言: 前两篇介绍了自定义控件的基础原理Android自定义控件之基本原理(一).自定义属性Android自定义控件之自定义属性(二).今天重点介绍一下如何通过自定义组合控件来提高布局的复用,降低开发 ...