21-THREE.JS 将法线矢量映射到RGB颜色的材质
<!DOCTYPE html> <html> <head>
<title></title>
<script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
<script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
<script type="text/javascript" src="../libs/CanvasRenderer.js"></script>
<script type="text/javascript" src="../libs/Projector.js"></script> <style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body> <div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript"> // 初始化
function init() { var stats = initStats(); // 创建一个场景
var scene = new THREE.Scene(); // 创建一个相机
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建一个渲染器
var renderer;
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true; // 创建一个canvas渲染器
var canvasRenderer = new THREE.CanvasRenderer();
canvasRenderer.setSize(window.innerWidth, window.innerHeight);
renderer = webGLRenderer; // 创建一个地板
var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);
var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({color: 0x777777}));
groundMesh.rotation.x = -Math.PI / 2;
groundMesh.position.y = -20;
scene.add(groundMesh); var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);
var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4); var meshMaterial = new THREE.MeshNormalMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
var cube = new THREE.Mesh(cubeGeometry, meshMaterial);
var plane = new THREE.Mesh(planeGeometry, meshMaterial); // 设置圆球的坐标
sphere.position.x = 0;
sphere.position.y = 3;
sphere.position.z = 2; for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
var face = sphere.geometry.faces[f];
var centroid = new THREE.Vector3(0, 0, 0);
centroid.add(sphere.geometry.vertices[face.a]);
centroid.add(sphere.geometry.vertices[face.b]);
centroid.add(sphere.geometry.vertices[face.c]);
centroid.divideScalar(3); var arrow = new THREE.ArrowHelper(
face.normal,
centroid,
2,
0x3333FF,
0.5,
0.5);
sphere.add(arrow);
} cube.position = sphere.position;
plane.position = sphere.position; // 把正方体添加到场景中去
scene.add(cube); // 设置相机的坐标
camera.position.x = -20;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(new THREE.Vector3(10, 0, 0)); // 添加自然光
var ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight); // 添加聚光灯
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight); // 把渲染之后的结果放到DOM元素中去
document.getElementById("WebGL-output").appendChild(renderer.domElement); var step = 0;
var oldContext = null; var controls = new function () {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03; this.opacity = meshMaterial.opacity;
this.transparent = meshMaterial.transparent; this.visible = meshMaterial.visible;
this.side = "front"; this.wireframe = meshMaterial.wireframe;
this.wireframeLinewidth = meshMaterial.wireframeLinewidth; this.selectedMesh = "cube"; this.shadow = "flat"; }; var gui = new dat.GUI(); var spGui = gui.addFolder("Mesh");
spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {
meshMaterial.opacity = e
});
spGui.add(controls, 'transparent').onChange(function (e) {
meshMaterial.transparent = e
});
spGui.add(controls, 'wireframe').onChange(function (e) {
meshMaterial.wireframe = e
});
spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) {
meshMaterial.wireframeLinewidth = e
});
spGui.add(controls, 'visible').onChange(function (e) {
meshMaterial.visible = e
});
spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) {
console.log(e);
switch (e) {
case "front":
meshMaterial.side = THREE.FrontSide;
break;
case "back":
meshMaterial.side = THREE.BackSide;
break;
case "double":
meshMaterial.side = THREE.DoubleSide;
break;
}
meshMaterial.needsUpdate = true; });
spGui.add(controls, 'shadow', ["flat", "smooth"]).onChange(function (e) {
switch (e) {
case "flat":
// https://github.com/mrdoob/three.js/issues/1929
meshMaterial.shading = THREE.FlatShading;
break;
case "smooth":
meshMaterial.shading = THREE.SmoothShading;
break;
} var oldPos = sphere.position.clone();
scene.remove(sphere);
scene.remove(plane);
scene.remove(cube);
sphere = new THREE.Mesh(sphere.geometry.clone(), meshMaterial);
cube = new THREE.Mesh(cube.geometry.clone(), meshMaterial);
plane = new THREE.Mesh(plane.geometry.clone(), meshMaterial); sphere.position = oldPos;
cube.position = oldPos;
plane.position = oldPos; switch (controls.selectedMesh) {
case "cube":
scene.add(cube); break;
case "sphere":
scene.add(sphere); break;
case "plane":
scene.add(plane);
break; } meshMaterial.needsUpdate = true;
console.log(meshMaterial);
}); spGui.add(controls, 'selectedMesh', ["cube", "sphere", "plane"]).onChange(function (e) { scene.remove(plane);
scene.remove(cube);
scene.remove(sphere); switch (e) {
case "cube":
scene.add(cube); break;
case "sphere":
scene.add(sphere); break;
case "plane":
scene.add(plane);
break; } scene.add(e);
}); render(); function render() {
stats.update(); cube.rotation.y = step += 0.01;
plane.rotation.y = step;
sphere.rotation.y = step;
requestAnimationFrame(render);
renderer.render(scene, camera);
} function initStats() { var stats = new Stats(); stats.setMode(0); // 0: fps, 1: ms
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px'; document.getElementById("Stats-output").appendChild(stats.domElement); return stats;
}
}; window.onload = init; </script>
</body>
</html>
21-THREE.JS 将法线矢量映射到RGB颜色的材质的更多相关文章
- 21个js 技巧收藏
1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...
- 第21篇 js四种继承方式
js是一个很自由的语言,没有强类型的语言的那种限制,实现一个功能往往有很多做法.继承就是其中的一个,在js中继承大概可以分为四大类,上面一篇文章也提及过一些,下面开始详细说说js的继承. 1.原型继承 ...
- 21. Node.Js Buffer类（缓冲区）-（一）
转自:https://blog.csdn.net/u011127019/article/details/52512242
- js实现选中当前元素并改变颜色（js、jq的各种循环）
1.jq伪类选择器(:not)的使用 2.js jq运用数组循环 3.checkbox的选中循环事件 4.select的选中事件 <select class="ssss" o ...
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
- JS实现鼠标移入DIV随机变换颜色
今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...
- jquery.nicescroll.js可全屏可改滚动条颜色的滚动条插件-推荐
有一款很棒的插件 http://www.ijquery.cn/?p=666
- js方法实现rgb颜色转换成16进制格式的代码的方法
原文地址:http://www.cnblogs.com/vaal-water/archive/2013/04/08/3008880.html 自己试过很好用 function zero_fill_he ...
- JS怎么控制input框的背景颜色
$("input").css("background-color","red"); 参考:https://zhidao.baidu.com/ ...
随机推荐
- 我的Android进阶之旅------>解决AES加密报错:java.security.InvalidKeyException: Unsupported key size: 18 bytes
1.错误描述 今天使用AES进行加密时候,报错如下所示: 04-21 11:08:18.087 27501-27501/com.xtc.watch E/AESUtil.decryptAES:55: j ...
- Django - 权限（1）
一.权限表结构设计 1.认识权限 生活中处处有权限,比如,腾讯视频开会员才有观看某个最新电影的权限,你有房间钥匙就有了进入这个房间的权限,等等.同样,程序开发过程中也有权限,我们今天说的权限指的是we ...
- centos Docker安装前升级内核3.10的方法
首先我虚拟机系统都是Centos 6.5 .ESXI ,后安装devel .ESXI 后来 .ESXI 我所操作的都是虚拟机,但是在真实机上面如何我就不清楚了~~ 大家一定要记得安装步骤,,,不然就是 ...
- Mysql学习笔记—视图
1.什么是视图 视图(View)是一种虚拟存在的表.其内容与真实的表相似,包含一系列带有名称的列和行数据.但是视图并不在数据库中以存储的数据的形式存在.行和列的数据来自定义视图时查询所引用的基本表,并 ...
- python删除所有的中文字符、非ASCII或非英文字符，检查字符串是否包含非ASCII
Your ''.join() expression is filtering, removing anything non-ASCII; you could use a conditional exp ...
- go——标准命令
Go本身包含大量用户处理Go程序的命令和工具. 1.子命令 go命令的子命令:build:用于编译指定的代码包或Go语言源码文件. 命令源码文件会被编译成可执行文件,并存放到命令执行的目录或指定目录下 ...
- iOS程序的启动过程介绍
大家在学习iPhone开发时候,都会写HelloWorld程序.大家一般都是通过向导,生成项目,然后通过模拟器启动应用程序.但是大家知道其背后的启动过程吗?也就是当点击程序图标启动程序开始到退出程序整 ...
- 官方微信接口（全接口） - 微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI
微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.微信支付.微信红包.微信卡券.微信小店. 微信开发探讨群 330393916 <?php /** * Description o ...
- 关于Webpage Not Found问题解决~~~
还是外文网站好,以下解决办法: IIS6.0 UI vs. IIS 7.x UI Series: More about Web Service Extensions This week in the ...
- Spring 之定义切面尝试（基于注解）
[Spring 之定义切面尝试] 1.标记为深红色的依赖包是必须的 <dependency> <groupId>org.springframework</groupId& ...