three绘制一个三维铁塔效果代码
代码语言:html
所属分类:三维
代码描述:three绘制一个三维铁塔效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background-image: radial-gradient(ellipse at left, #000000, #000000), radial-gradient(ellipse at right, #000000, #000000); } </style> </head> <body> <div id="myCanvas"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script> <script> 'use strict'; /** * default **/ let scene = null, camera = null, renderer = null, controls = null, tokyotower = null, width = 0, height = 0; /** * init **/ function init() { width = window.innerWidth, height = window.innerHeight; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, width / height); camera.position.set(0, 160, 1500); renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setPixelRatio( window.devicePixelRatio); renderer.setSize(width, height); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; controls = new THREE.OrbitControls(camera, renderer.domElement); addLights(); drawTokyotower(); document.getElementById('myCanvas').appendChild(renderer.domElement); window.addEventListener('resize', onResize, false); } /** * lights **/ function addLights() { const directLight1 = new THREE.DirectionalLight(0xffffff); directLight1.castShadow = true; directLight1.position.set(0, 1, 1); scene.add(directLight1); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0