three实现三维变色龙变色和苍蝇飞行动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维变色龙变色和苍蝇飞行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; } #world { position: absolute; overflow: hidden; width: 100%; height: 100%; } </style> </head> <body> <div id='world'></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script> 'use strict'; let scene, camera, renderer, raycaster, controls, mouse; let chameleon, branch, fly; let width, height; function init() { width = window.innerWidth, height = window.innerHeight; scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.set(30, 0, 10); camera.lookAt(scene.position); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); renderer.setClearColor(0xF2A9B4); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // controls = new THREE.OrbitControls(camera, renderer.domElement); raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); addLights(); drawChameleon(); drawBranch(); drawFly(); document.getElementById('world').appendChild(renderer.domElement); document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchmove', onTouchMove); window.addEventListener('resize', onResize, false); } function addLights() { const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); sce.........完整代码请登录后点击上方下载按钮下载查看
网友评论0