three实现简单三维建筑物鼠标灯光照射跟随阴影效果代码
代码语言:html
所属分类:三维
代码描述:three实现简单三维建筑物鼠标灯光照射跟随阴影效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body,html, canvas{width:100%;height:100%;padding:0;margin:0;overflow: hidden;} </style> </head> <body> <div id="stage"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.75.js"></script> <script> var renderer, scene, camera, geometry, mouse; var ww = window.innerWidth, wh = window.innerHeight; function init() { renderer = new THREE.WebGLRenderer(); renderer.setSize(ww, wh); renderer.setClearColor(0x000000); document.getElementById("stage").appendChild(renderer.domElement); scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x000000, 0.0010); camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000); camera.position.set(0, 500, 1000); camera.lookAt(new THREE.Vector3(0, 0, 0)); scene.add(camera); directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(0, 60, 600); directionalLight.castShadow = true; scene.add(directionalLight); console.log(directionalLight.position); var light = new THREE.AmbientLight(0x222222); scene.add(light); renderer.shadowMapEnabled = true; renderer.shadowMapSoft = false; renderer.shadowCameraNear = 3; renderer.shadowCameraFar = camera.far; renderer.shadowCameraFov = 50; renderer.shadowMapBias = 0.0039; renderer.shadowMapDarkness = 0.5; renderer.shadowMapWidth = 1024; mouse = new THREE.Vector2(0, 0); document.addEventListener("mousemove", mouseMove); document.addEventListener("mousewheel", mouseWheel); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0