<!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: 0x555555}));
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.MeshLambertMaterial({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; // 设置正方体和平面的坐标
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(-30, 60, 60);
spotLight.castShadow = true;
scene.add(spotLight); // 把渲染后的结果放到DOM元素中去
document.getElementById("WebGL-output").appendChild(renderer.domElement); var step = 0; var controls = new function () {
this.rotationSpeed = 0.02;
this.bouncingSpeed = 0.03; this.opacity = meshMaterial.opacity;
this.transparent = meshMaterial.transparent;
this.overdraw = meshMaterial.overdraw;
this.visible = meshMaterial.visible;
this.emissive = meshMaterial.emissive.getHex();
this.ambient = meshMaterial.ambient.getHex();
this.side = "front"; this.color = meshMaterial.color.getStyle();
this.wrapAround = false;
this.wrapR = 1;
this.wrapG = 1;
this.wrapB = 1; this.selectedMesh = "cube"; }; 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, 'visible').onChange(function (e) {
meshMaterial.visible = e
});
spGui.addColor(controls, 'ambient').onChange(function (e) {
meshMaterial.ambient = new THREE.Color(e)
});
spGui.addColor(controls, 'emissive').onChange(function (e) {
meshMaterial.emissive = new THREE.Color(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.addColor(controls, 'color').onChange(function (e) {
meshMaterial.color.setStyle(e)
});
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);
}); spGui.add(controls, 'wrapAround').onChange(function (e) { meshMaterial.wrapAround = e;
meshMaterial.needsUpdate = true;
}); spGui.add(controls, 'wrapR', 0, 1).step(0.01).onChange(function (e) {
meshMaterial.wrapRGB.x = e;
}); spGui.add(controls, 'wrapG', 0, 1).step(0.01).onChange(function (e) {
meshMaterial.wrapRGB.y = e;
}); spGui.add(controls, 'wrapB', 0, 1).step(0.01).onChange(function (e) {
meshMaterial.wrapRGB.z = 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>

  

23-THREE.JS 光照材质的更多相关文章

  1. Three.js开发指南---使用three.js的材质(第四章)

    材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等 一 材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基 ...

  2. three.js各种材质的实现源码

    three.js常用材质:基本材质.兰伯特材质.冯氏材质.标准材质. 我们可以自己使用着色器实现这些材质,用于批量渲染等用途. 为了简单,假设物体只有一张漫反射贴图,场景中只存在一个环境光和一个平行光 ...

  3. 使用Three.js的材质

    1.three.js提供哪些材质? MeshBasicMaterial(网格基础材质)/基础材质,,可以用它富裕几何体一种简单的亚瑟,或者显示几何体的线框 MeshDepthMaterial(网格深度 ...

  4. three.js - 添加材质 灯光 阴影

    看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. 20-THREE.JS 混合材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

  6. 2015年10月23日JS笔记

    ECMAScript标准:JavaScript核心语法 微软:Jscript ECMAScript标准:一纸空文 JavaScript和JScritp都号称完全实现了 ECMAScript标准 W3C ...

  7. 第23篇 js快速学习知识

    前面说了js的一些高级方面的基础知识,这些都是比较容易出错的和比较难理解的东西,除了这些之外其它的知识都比较简单了,基础学好了,扩展起来就是小意思.今天说说js方面可以快速学习和入门的知识. 1.闭包 ...

  8. 22-THREE.JS 面材质

    <!DOCTYPE html> <html> <head> <title>Example 04.05 - Mesh face material</ ...

  9. 19-THREE.JS 深度材质

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...

随机推荐

  1. 基本数据类型补充、set集合、深浅拷贝

    一.基本数据类型补充 1,关于int和str在之前的学习中已经介绍了80%以上了,现在再补充一个字符串的基本操作 str.join(可迭代对象): li = ['李嘉诚','何炅','海峰','刘嘉玲 ...

  2. tomcat 是如何处理jsp和servlet请求

    我们以一个具体的例子,来跟踪TOMCAT, 看看它是如何把Request一层一层地递交给下一个容器, 并最后交给Wrapper来处理的. 以http://localhost:8080/web/logi ...

  3. Java集合类学习记录

    被标记为transient的属性在对象被序列化的时候不会被保存int[] arr1 = {1, 2, 3, 4, 5}; int[] arr2 = Arrays.copyOf(arr1, new_le ...

  4. 前端 CSS 边框

    border 边框 solid 实体的 red 边框什么颜色 <!DOCTYPE html> <html lang="en"> <head> & ...

  5. 10046 trace详解(2)--tkprof

      10046或10053生成的文件格式比较乱,直接查看有一定的困难,ORACLE自带的一个格式化命令工具tkprof可以将生成的.trc文件进行格式化,具体用说如下: 一.直接输入tkprof不带任 ...

  6. c++ 模板 不能 分离编译

    C++Template头文件和定义分开编译的问题 (1) // Foo.htemplate<typename T>class Foo{public:void f();}; // Foo.c ...

  7. Flask 请求源码分析

    执行app.run()方法: def run(self, host=None, port=None, debug=None, **options): from werkzeug.serving imp ...

  8. Python-装饰器、生成器

    python中的for循环 for i in [1,2,3,4]: print(i) 正常可运行的,但是如下运行呢? for i in 1234 print(i) 结果: Traceback (mos ...

  9. Wannafly交流赛1_B_硬币【数学】

    Wannafly交流赛1_B_硬币[数学] 链接:https://www.nowcoder.com/acm/contest/69/B 来源:牛客网 题目描述 蜥蜴的生日快到了,就在这个月底! 今年,蜥 ...

  10. HDOJ 1501 Zipper 【简单DP】

    HDOJ 1501 Zipper [简单DP] Problem Description Given three strings, you are to determine whether the th ...