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); const pointLight = new THREE.PointLight(0xffffff, 2, 1000); scene.add(pointLight); } /** * draw **/ function drawTokyotower() { tokyotower = new Tokyotower(); scene.add(tokyotower.group); } /** * resize **/ function onResize() { width = window.innerWidth; height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); } /** * degree **/ function degree(degrees) { return degrees * (Math.PI / 180); } /** * animate **/ function animate() { requestAnimationFrame(animate); render(); } /** * render **/ function render() { tokyotower.moveBody(); renderer.render(scene, camera); } /** * Tokyotower **/ class Tokyotower { constructor() { this.group = new THREE.Group(); this.group.position.set(0, -150, 0); this.group.rotation.set(degree(0), degree(45), degree(0)); this.wingangle = 0; this.bodyangle = 0; this.drawBody(); } drawBody() { function Root(tga, tgb, tgc, tgd, tge, px, py, pz, rx, ry, rz, group) { const branch_geometry = new THREE.TorusGeometry(tga, tgb, tgc, tgd, degree(tge)); const branch_material = new THREE.MeshPhongMaterial({ color: 0xf41322 }); const branch_mesh = new THREE.Mesh(branch_geometry, branch_material); branch_mesh.position.set(px, py, pz); branch_mesh.rotation.set(degree(rx), degree(ry), degree(rz)); group.add(branch_mesh); } Root(600, 5, 50, 50, 40, -650, 150, 0, 0, 0, -50, this.group); Root(600, 5, 50, 50, 40, 650, 150, 0, 0, 180, -50, this.group); Root(600, 5, 50, 50, 4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0