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(dire.........完整代码请登录后点击上方下载按钮下载查看

网友评论0