【three.js第六课】物体3D化
1.在【three.js第五课】的基础上引入AnaglyphEffect.js文件。
文件路径：
three源码包中进入【examples】文件夹；
进入【js】文件夹；
进入【effects】文件夹中即可看到AnaglyphEffect.js文件
我的引入如下：
<script src="../examples/js/effects/AnaglyphEffect.js"></script>
2.将自定义的材料更改为如下（此步骤只是为了让材料收到光线的影响，不做该步骤也可以）：
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//后
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide}) ];
3.将物体3D化。添加一下代码:
//物体3D化
var effect = new THREE.AnaglyphEffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);
4.并将渲染画面的方法进行修改，修改如下：
//绘画渲染
var render=function() {
//renderer.render(scene,camera);
effect.render(scene,camera);//渲染3D画面
}
5.源码如下：
<!DOCTYPE html>
<html>
<head>
<title>demo1</title>
</head>
<style type="text/css">
body{
margin:;
}
canvas{
width:%;
height:%;
}
</style>
<body>
<script src="jquery.min.js"></script>
<script src="../src/loaders/ObjectLoader.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="../examples/js/effects/AnaglyphEffect.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();//创建场景
//创建一个摄像机对象
var camera = new THREE.PerspectiveCamera(,window.innerWidth / window.innerHeight, 0.1, ); //创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);//渲染到浏览器 //加入事件监听器,窗口自适应
window.addEventListener('resize', function(){
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width/height;
camera.updateProjectionMatrix();
}) //轨道控制 镜头的移动
var controls = new THREE.OrbitControls(camera,renderer.document); //创建形状 BoxGeometry
var geometry = new THREE.BoxGeometry(,,); //自定义材料
//map:用于设置纹理贴图，也可以用16进制的颜色替换：color:0xFFFFFF
//side:用于设置显示面。属性可设置为双面DoubleSide，前面FontSide，后面BackSide
//MeshBasicMaterial：基础网孔材料，一个以简单着色（平面或线框）方式来绘制几何形状的材料。
//MeshLambertMaterial：兰伯特网孔材料，一种非发光材料（兰伯特）的表面
//MeshPhongMaterial：网孔材料，用于表面有光泽的材料，计算每个像素。
var cubeMaterial = [
//右
new THREE.MeshLambertMaterial({color:0xFFFFFF,side:THREE.DoubleSide}),
//左
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/2.png') ,side:THREE.DoubleSide}),
//上
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/3.png') ,side:THREE.DoubleSide}),
//下
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/4.png') ,side:THREE.DoubleSide}),
//前
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/5.png') ,side:THREE.DoubleSide}),
//后
new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load('images/6.png') ,side:THREE.DoubleSide}) ]; //创建材料 wireframe是否使用线条
//var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:true});
var material = new THREE.MeshFaceMaterial(cubeMaterial); //将材料和形状结合
var cube = new THREE.Mesh(geometry,material); //物体加入场景中
scene.add(cube); //添加光线
//注意：材料收到光线影响，即不同的材料对不同的光线表现出不同的特点，试着该表材料和光线，观测结果
//1. AmbientLight 环境光：这种光的颜色被应用到全局范围内的所有对象。
//AmbientLight(光线的颜色，光线的强度)
//var ambientLight = new THREE.AmbientLight(0xFFFFFF,3.0);
//scene.add(ambientLight);//光线加入场景中 //2. PointLight 点光源 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象
//var pointLight = new THREE.PointLight(0xFFFFFF,3.0);
//scene.add(pointLight);//光线加入场景中 //3. 平行光源（DirectionalLight）.影响使用 兰伯特网孔材料(MeshLambertMaterial) 或 Phong网孔材料(MeshPhongMaterial) 的对象。
//var directionalLight = new THREE.DirectionalLight(0xFFFFFF,3.0);
//scene.add(directionalLight);//光线加入场景中 //4. 聚光光源（SpotLight）一种能投射锥形阴影区域的点光源。 使用 MeshLambertMaterial 或 Phong网孔材料(MeshPhongMaterial) 来影响对象。
//var spotLight = new THREE.SpotLight(0xFFFFFF,3.0);
//scene.add(spotLight);//光线加入场景中 //5. 光（Light）光源的基类。
var light = new THREE.Light(0xFFFFFF,1.0);
scene.add(light);//光线加入场景中 //物体3D化
var effect = new THREE.AnaglyphEffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight); camera.position.z=;//设置相机的位置 //逻辑
var update=function(){
//物体随着XY轴旋转
//cube.rotation.x +=0.01;
//cube.rotation.y += 0.005;
} //绘画渲染
var render=function() {
//renderer.render(scene,camera);
effect.render(scene,camera);//渲染3D画面
} //循环运行update，render
var loop=function() {
requestAnimationFrame(loop);
update();
render();
} loop();//循环开始
</script>
</body>
</html>
【three.js第六课】物体3D化的更多相关文章
- vue.js第六课
class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...
- 潭州课堂25班：Ph201805201 WEB 之 JS 第六课 (课堂笔记)
上节补充方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 【three.js第七课】鼠标点击事件和键盘按键事件的使用
当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...
- webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课
序: 能源是文明和发展的重要保障,人类命运不可避开的话题,无论是战争还是发展,都有它存在的身影.从石器时代到现代文明,人类的能源应用在进步,也在面临能源枯竭的危机与恐惧,而开发与应用可再生能源才是解决 ...
- 如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课
文章前,先聊点啥吧. 最近元宇宙炒的挺火热,在所有人都争相定义元宇宙的时候,资本就开始着手入场了.当定义明确,全民皆懂之后,风口也就过去了. 前两天看到新闻,新世界CEO宣布购入最大的数字地块,这块虚 ...
- webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）
序: 还是要抽出时间看书的,迷上了豆豆的作品,最近在看<天幕红尘>,书中主人公的人生价值观以及修为都是让我惊为叹止.很想成为那样的人,但是再看看自己每天干的事,与时间的支配情况,真是十分的 ...
- vue.js 第十课-第十六课
第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...
- NeHe OpenGL教程 第三十六课：从渲染到纹理
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- NeHe OpenGL教程 第五课：3D空间
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
随机推荐
- 108. Convert Sorted Array to Binary Search [Python]
108. Convert Sorted Array to Binary Search Given an array where elements are sorted in ascending ord ...
- 优秀DevOps工程师必会的33个面试题
DevOps面试问题 01 您能告诉我们DevOps和Agile(敏捷)之间的根本区别吗? 答:尽管DevOps与敏捷方法(这是最流行的SDLC[Software Development Life C ...
- Mybatis在xml配置文件中处理SQL中的大于小于号的方法
之前在项目中遇到了在SQL中<=不识别的问题,在Navicat中语句正常,在xml中不识别,想起来就记录一下 项目用的是Mybatis,经过网上多次查询,验证,总结方法如下: 一.使用<! ...
- TensorFlow 模型优化工具包 — 训练后整型量化
模型优化工具包是一套先进的技术工具包,可协助新手和高级开发者优化待部署和执行的机器学习模型.自推出该工具包以来, 我们一直努力降低机器学习模型量化的复杂性 (https://www.tensorfl ...
- 常见Web安全漏洞--------CSRF
1,CSRF (Cross Site Request Forgery, 跨站域请求伪造),也可以说是模拟请求. 2,黑客获取到了token 令牌,发送恶意模拟请求,攻击网站,防御方法可以参考api 接 ...
- [算法]移除指定元素&strSr()的实现
移除指定元素 题目 给你一个数组 nums 和一个值 val,你需要 原地 移除所有数值等于 val 的元素,并返回移除后数组的新长度. 不要使用额外的数组空间,你必须仅使用 O(1) 额外空间并 原 ...
- 模块 序列化 json pickle shelv xml
序列化 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes. json 模块 json.dump(d,f) json.load(f ...
- 硬不硬你说了算！35 张图解被问千百遍的 TCP 三次握手和四次挥手面试题
每日一句英语学习,每天进步一点点: 前言 不管面试 Java .C/C++.Python 等开发岗位, TCP 的知识点可以说是的必问的了. 任 TCP 虐我千百遍,我仍待 TCP 如初恋. 遥想小林 ...
- 403 Invalid CORS request 跨域问题解决
这里使用springMVC自带的CORS解决跨域问题 什么是跨域问题 1.请求地址与当前地址不相同 2.端口号不相同 技术有限端口号不同还未发现 3.二级域名不相同 出现这种问题如何解决有很多种方法, ...
- Luogu 1008 三连击
题目背景 本题为提交答案题,您可以写程序或手算在本机上算出答案后,直接提交答案文本,也可提交答案生成程序. 题目描述 将1,2, \cdots ,91,2,⋯,9共99个数分成33组,分别组成33个三 ...