最近项目需要折腾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. WebStorm 2016 最新版激活(activation code方式)

    WebStorm 2016 最新版激活(activation code方式) WebStorm activation code WebStorm 最新版本激活方式: 今天下载最新版本的WebStorm ...

  2. Crystal Clear Applied: The Seven Properties of Running an Agile Project (转载)

    作者Alistair Cockburn, Crystal Clear的7个成功要素,写得挺好. 敏捷方法的关注点,大家可以参考,太激动所以转载了. 原文:http://www.informit.com ...

  3. （一）Spark简介-Java&Python版Spark

    Spark简介 视频教程: 1.优酷 2.YouTube 简介: Spark是加州大学伯克利分校AMP实验室,开发的通用内存并行计算框架.Spark在2013年6月进入Apache成为孵化项目,8个月 ...

  4. 如何搭建git服务器

    一.前言 现在越来越多的公司用git进行版本控制,不过git是默认是开源的,如果私有的话是需要付费的,如果不想付费自己可以搭建一个git服务器用来版本控制. 二.服务器端操作 1.安装git sudo ...

  5. Linux-Rhel6 恢复误删文件

    需要工具extundelete(可通过xshell上传下载到linux)知识点:ifconifig eth0             查看ipfdisk /dev/sda          管理磁盘m ...

  6. [LeetCode] Longest Substring with At Least K Repeating Characters 至少有K个重复字符的最长子字符串

    Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...

  7. AngularJS实例实战

    学习了这么多天的AngularJS,今天想从实战的角度和大家分享一个简单的Demo--用户查询系统,以巩固之前所学知识.功能需求需要满足两点 1.查询所有用户信息,并在前端展示 2.根据id查询用户信 ...

  8. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  9. C# 线程同步的三类情景

    C# 已经提供了我们几种非常好用的类库如 BackgroundWorker.Thread.Task等,借助它们,我们就能够分分钟编写出一个多线程的应用程序. 比如这样一个需求:有一个 Winform ...

  10. C# OracleDBhelper

    引用 using System.Configuration;using System.Data.OracleClient; 连接字符串 <connectionStrings> <ad ...