three实现简单三维建筑物鼠标灯光照射跟随阴影效果代码

代码语言:html

所属分类:三维

代码描述:three实现简单三维建筑物鼠标灯光照射跟随阴影效果代码

代码标签: 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