three实现三维天空下的草坪树木景色效果代码-html代码-BFW代码库

three实现三维天空下的草坪树木景色效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维天空下的草坪树木景色效果代码，可用鼠标旋转放大缩小，绿意浓浓。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    * {
  margin: 0;
  box-sizing: border-box;
}

body {
    background: url("//repo.bfw.wiki/bfwrepo/image/60fe037d081bf.png");
  #background: linear-gradient(#00ADFF 0%, #eee 100%);
  background-size: cover;
}

img {
  display: none;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <img src="//repo.bfw.wiki/bfwrepo/threemodel/plant/map.png" crossorigin="anonymous" id="map">
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.72.js"></script>
    <script >
    //____ FIRE
init();


//_______________ 
function init(){
  var models = {};
  var plantRadius = 30;
  var canvas_height = window.innerHeight;
  var canvas_width = window.innerWidth;
  
  //Workaround for Texture
  //Codepen doesn't allow cross-origin
  //so we have to load it in the html
  //and get by the id
  
  // texture = new THREE.Texture(map);
  
  var img_tex = document.getElementById('map');
  
//__________________________________________ Helper Functions

function randNum(min,max,bool){
  // this will get a number between min and max;
  var num = Math.floor(Math.random()*max) + min; 
  if(bool || typeof bool == "undefined"){
    num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
  }
  return num;
}

// Check of point is in radius
function pointInCircle(point,target, radius) {
  var distsq = (point.x - target.x) * (point.x - target.x) + (point.y - target.y) * (point.y - target.y) + (point.z - target.z) * (point.z - target.z);
  // returns bool , distance to target origin 
  return [distsq <= radius * radius * radius,distsq];
}
  
// Get Random Point in Circle
function calculatePointInCircle(r) {
                        x = Math.random() * 2 * r - r;
                        zlim = Math.sqrt(r * r - x * x);
                        z = Math.random() * 2 * zlim - zlim;
    return [x,z];
}
//__________________________________________ Renderer Setup

var renderer = new THREE.WebGLRenderer({ 
  alpha: true,
  transparent : true,
  antialias:true 
});
    
    renderer.setSize( canvas_width, canvas_height );
    renderer.shadowMap.enab.........完整代码请登录后点击上方下载按钮下载查看