three实现三维点线灯光效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维点线灯光效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body, #stage { width: 100%; height: 100%; margin: 0; padding: 0; } body { background-color: #000; } </style> </head> <body> <!-- partial:index.partial.html --> <div id="stage" data-js="stage"></div> <!-- 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 type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script><script > var scene, camera, renderer, light; init(); render(); function init() { // S C E N E scene = new THREE.Scene(); // C A M E R A camera = new THREE.PerspectiveCamera( 10, window.innerWidth / window.innerHeight, 0.0001, 1000 ); camera.lookAt( scene.position ); camera.position.set( 0, 0, 150 ); scene.add( camera ); // R E N D E R E R renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.querySelector('[data-js="stage"]').appendChild(renderer.domElement); debugControls(); } // ______________ L I G H T var bulp = new THREE.PointLight( 0xff0000, 1, 10000 ); bulp.position.set( 0, 0, 5 ); scene.add( bulp ); // ______________ M E S H // SYSTEM wraps gem and points var system = new THREE.Group(); scene.add( system ); // GEM var gemMaterial = new THREE.MeshBasicMaterial({ wireframe: t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0