第二次修改代码加入了光源材质变得酷炫了哟没有
2016-11-13 09:24
176 查看
/** * Created by 12204 on 2016/11/12. */ function init() { //创建一个场景 var scene = new THREE.Scene(); // 创建一个相机 var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 创建一个渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(); renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true;//告诉渲染器我需要影子 // 把坐标轴显示出来 var axes = new THREE.AxisHelper(20); scene.add(axes); // 创建一个平面 var planeGeometry = new THREE.PlaneGeometry(60, 20); var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});//新的材质对光源有反应 var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.receiveShadow = true;//我接受影子照在我身上 //旋转平面的位置因为默认是与x轴平行的 plane.rotation.x = 1.5 * Math.PI;//-1.5到到0.5其实是一样的反向的问题 plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; // 添加到场景中去 scene.add(plane); // 创建一个方块 var cubeGeometry = new THREE.BoxGeometry(4, 4, 4); var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.castShadow = true;//方块需要影子 // 方块的位置 cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; // 将它添加到场景中去 scene.add(cube); // 创建一个球球 var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff}); var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.castShadow = true;//球球也要 // 球球的位置· sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; //添加一个球球 scene.add(sphere); // 相机放在哪里其实就是从哪个位置看 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); // 添加光照效果但是没有材质的话没啥区别 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); // 获取上下问创建一个渲染的位置 document.getElementById("WebGL-output").appendChild(renderer.domElement); //渲染场景 renderer.render(scene, camera); } window.onload = init;
相关文章推荐
- 使用简单的javascript代码避免页面的重复提交(没有加入提交代码)
- 修改【列表分页】样式及加入收藏代码
- Eclipse, jsp代码修改之后,页面却没有变化!解决思路
- Java JFrame 表格内容是否允许修改,加入下列代码
- 写个Cache类,其中加入一个字典,于是找到了这样一块代码,初步看了一下代码没有问题,于是Copy上
- Delphi/C++Builder在没有做任何代码修改,重新编译后CRC不一致的解决方案。
- storyboard自动布局时,代码修改 constraint 的值,没有反应
- 在storyboard中设置一个一个button,只进行了位置设置,没有使用约束,发现用代码修改不了如何解决
- 修改【列表分页】样式及加入收藏代码
- 拷贝代码时没有仔细检查,导致误修改了函数参数
- 关于修改web app项目java代码后Eclipse没有重新编译的问题
- c++第二次上机实验(代码没有输出)
- VC++ 修改代码改变界面布局,可是编译后界面没有改变的解决方法
- 代码修改了运行结果却没有变化
- Eclipse代码补全 .没有提示的修改
- myeclipse编译无效,debug下一步执行不正确,修改的代码没有起作用
- Android studio修改代码以后重新运行,没有产生修改的效果
- 使用代码修改材质的属性
- eclipse修改代码后,发现web工程没有做相应修改,除非要project->clean之后界面才做出相应反应
- 网页调试:myeclipse修改javascript代码后,执行没有变化呀