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.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild( renderer.domElement );
//_____________________ Create Scene

var scene = new THREE.Scene();
//______________________ Camera
var camera = new THREE.PerspectiveCamera( 55, canvas_width/canvas_height, 0.1, 1000 );
  camera.position.set(-10,2,22);
  camera.lookAt(new THREE.Vector3(0,50,0));
  scene.add(camera);

//______________________ Camera Helper for rotation
var helperGeo = new THREE.BoxGeometry(1,1,1);
var cam_helper = new THREE.Mesh(helperGeo);
    cam_helper.visible = false;

    scene.add(cam_helper);
    cam_helper.add(camera);
  
  
//____________________ Resizer

window.onresize = function(){
  canvas_height = window.innerHeight;
  canvas_width = window.innerWidth;
  camera.aspect = canvas_width / canvas_height;
  camera.updateProjectionMatrix();
  renderer.setSize( canvas_width, canvas_height );
}
//____________________ Controls

  controls = new THREE.OrbitControls( camera );

  controls.damping = 0.2;
  controls.minPolarAngle = 73 * Math.PI/180;
  controls.maxPolarAngle = 85 * Math.PI/180;
 	controls.minDistance = 15;
  controls.maxDistance = 25;
  
//______________________ Lights

  //____ Ambient
var ambient = new THREE.AmbientLight.........完整代码请登录后点击上方下载按钮下载查看