threejs布局实现一个羊圈效果
代码语言:html
所属分类:三维
代码描述:threejs布局实现一个羊圈效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; background: #d3dfdd; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; align-content: center; } div#smoke { position: fixed; bottom: 0; width: 100vw; height: 30vh; background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(211, 223, 221, 0)), color-stop(65%, rgba(211, 223, 221, 0.8)) ); background-image: linear-gradient( rgba(211, 223, 221, 0) 0%, rgba(211, 223, 221, 0.8) 65% ); } /* Name Badge */ html, body { margin: 0; padding: 0; overflow: hidden; } #name-card-container { position: fixed; bottom: 0px; height: 38px; width: 100%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } #name-card { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; font-family: Avenir; font-size: 14px; font-weight: 500; line-height: 38px; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), 0 0 2px rgba(0, 0, 0, 0.2); } #name-card > div.dark-background { background: #1d1e22; padding: 0 10px 0 20px; height: 100%; color: #fff; } #name-card > div.light-background { background: #fff; padding: 0 20px 0 10px; height: 100%; } #name-card span.emoji { font-size: 18px; } #name-card a { text-decoration: none; } #name-card a:hover { text-decoration: underline; } #name-card a:visited { text-decoration: none; } #name-card div.dark-background a { color: #fff; } #name-card div.light-background a { color: #000; } </style> </head> <body translate="no"> <canvas id="artboard"></canvas> <div id="smoke"></div> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script> // for convenience var pi = Math.PI; var scene = new THREE.Scene(); var h = window.innerHeight, w = window.innerWidth; var aspectRatio = w / h, fieldOfView = 45, nearPlane = 1, farPlane = 1000; var camera = new THREE.PerspectiveCamera( fieldOfView, aspectRatio, nearPlane, farPlane); var renderer = new THREE.WebGLRenderer({ canvas: artboard, alpha: true, antialias: true }); renderer.setSize(w, h); renderer.shadowMapEnabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; document.body.appendChild(renderer.domElement); //camera camera.position.set(25, 5, 0); camera.lookAt(new THREE.Vector3(0, 4, 0)); //lights, 3 point lighting var col_light = 0xffffff; // set var light = new THREE.AmbientLight(col_light, 0.6); var keyLight = new THREE.DirectionalLight(col_light, 0.6); keyLight.position.set(20, 30, 10); keyLight.castShadow = true; // var shadowHelper = new THREE.CameraHelper( keyLight.shadow.camera ); // scene.add( shadowHelper ); var fillLight = new THREE.DirectionalLight(col_light, 0.3); fillLight.position.set(-20, 20, 20); var backLight = new THREE.DirectionalLight(col_light, 0.1); backLight.position.set(10, 0, -20); scene.add(light); scene.add(keyLight); scene.add(fillLight); scene.add(backLight); // axis // var axesHelper = new THREE.AxesHelper(50); // scene.add(axesHelper); //materials var mat_orange = new THREE.MeshLambertMaterial({ color: 0xff8c75 }); var mat_grey = new THREE.MeshLambertMaterial({ color: 0xf3f2f7 }); var mat_yellow = new THREE.MeshLambertMaterial({ color: 0xfeb42b }); var mat_dark = new THREE.MeshLambertMaterial({ color: 0x5a6e6c }); var mat_brown = new THREE.MeshLambertMaterial({ color: 0xa3785f }); var mat_stone = new THREE.MeshLambertMaterial({ color: 0x9eaeac }); //-------------------------------------ground------------------------------------- var layers = []; var ground = new THREE.Group(); for (var i = 0; i < 5; i++) { var h = 0.1; var geometry = new THREE.CylinderGeometry(8 - i - 0.01, 8 - i, h, 9); layers.push(new THREE.Mesh(geometry, mat_orange)); layers[i].position.y.........完整代码请登录后点击上方下载按钮下载查看
网友评论0