Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { background: linear-gradient(to top, #070d52, #000); height:100%; overflow: hidden; }
JavaScript
var scene, camera, renderer, sphere, sphere2, torus, torus2; var shape = []; function init () { var t = THREE; scene = new t.Scene(); camera = new t.PerspectiveCamera(105,window.innerWidth/window.innerHeight, 1,5000); camera.position.z = 2000; renderer = new t.WebGLRenderer({alpha:true}); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setClearColor( 0xffffff, 0); renderer.shadowMapSoft = true; renderer.autoClear = false; document.body.appendChild(renderer.domElement); window.addEventListener("resize", function (argument) { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); }) var controls = new THREE.OrbitControls( camera ); } function createObj() { var sphereMaterial = new THREE.MeshPhongMaterial({ color : new THREE.Color("#fff"), emissive : new THREE.Color("#3c0752"), shininess : new THREE.Color("#fc6bcf"), shininess : 10, shading : THREE.FlatShading, transparent: 1, opacity : 1, side : THREE.DoubleSide }); var geometry = new THREE.DodecahedronGeometry( 500, 1); sphere = new THREE.Mesh( geometry, sphereMaterial ); sphere.receiveShadow = true; sphere.castShadow = true; scene.add(sphere ); var sphereMaterial2 = new THREE.MeshPhongMaterial({ color : new THREE.Color("#fff"), emissive : new THREE.Color("#fc6bcf"), shininess : new THREE.Color("#fff"), shininess : 10, shading : THREE.SmoothShading, transparent: 1, opacity : 1, wireframe: true }); var geometry2 = new THREE.DodecahedronGeometry( 650, 1); sphere2 = new THREE.Mesh( geometry2, sphereMaterial2 ); sphere2.receiveShadow = true; sphere2.castShadow = true; // scene.add( sphere2 ); var torusMaterial = new THREE.MeshPhongMaterial({ color : new THREE.Color("#fff"), emissive : new THREE.Color("#fc6bcf"), shininess : new THREE.Color("#fff"), shininess : 10, shading : THREE.FlatShading, transparent: 1, opacity : 1, wireframe : true }); var geometry3 = new THREE.TorusGeometry( 580, 100, 5, 40 ); torus = new THREE.Mesh( geometry3, torusMaterial ); torus.receiveShadow = true; torus.castShadow = true; scene.add( torus ); var torusM = new THREE.MeshPhongMaterial({ color : new THREE.Color("#fff"), emissive : new THREE.Color("#c256c3"), shininess : new THREE.Color("#fff"), shininess : 10, shading : THREE.FlatShading, transparent: 1, opacity : 1, wireframe : true }); var geometry4 = new THREE.TorusGeometry( 580, 80, 5, 40 ); torus2 = new THREE.Mesh( geometry4, torusM); torus2.receiveShadow = true; torus2.castShadow = true; scene.add( torus2 ); } function render() { requestAnimationFrame(render); renderer.render(scene, camera); sphere2.rotation.y += 0.002 sphere2.rotation.x += 0.002 sphere2.rotation.z += 0.002 // sphere.rotation.y += 0.002 // sphere.rotation.x += 0.002 // sphere.rotation.z += 0.002 torus.rotation.y += 0.05 torus.rotation.x += 0.01 torus.rotation.z += 0.05 torus2.rotation.y += 0.01 torus2.rotation.x += 0.05 torus2.rotation.z += 0.01 for(var x = 0; x< shape.length;x++) { shape[x].position.z -= 5 if(shape[x].position.z < -1000) { shape[x].position.z = getRandomArbitrary(0,2000) } } } function createSpotlights() { var sp = []; var helper = []; var spProps = [ [0xfc6bcf , 1, 2000,128,0], [0x6bd6ff , 1, 2000,120,0,1], [0x6bd6ff , 1, 2000,100,0,1], [0x6bd6ff , 0.8, 2500,128,0,1] ] var spPos = [ [0,800,800], [700,1000,1000], [700,1000,-1000], [0,-1300, 1200] ] for(var x = 0;x < spPos.length; x++) { // === spotlight sp[x] = new THREE.SpotLight(...spProps[x]); sp[x].position.set(...spPos[x]) sp[x].castShadow = true; scene.add(sp[x]); sp[x].shadow.mapSize.width = 1024; sp[x].shadow.mapSize.height = 1024 // === spotlight helper helper[x] = new THREE.SpotLightHelper( sp[x] ); // scene.add( helper[x] ); } } function randomStars() { var material; var rs = []; var pos = { x : 0, y : 0, z : 0 } var color = "#fc6bcf"; for(var x = 0; x < 200; x++) { material = new THREE.MeshPhongMaterial({ color : new THREE.Color("#fff"), emissive : new THREE.Color("#35bad8"), shininess : new THREE.Color("#fff"), shininess : 100, shading : THREE.FlatShading, }); if(x %2 == 0) { material.emissive = new THREE.Color(color); } pos.x = getRandomArbitrary(-(window.innerWidth+500),window.innerWidth+500); pos.y = getRandomArbitrary(-(window.innerHeight+1000),window.innerHeight+1000); pos.z = getRandomArbitrary(-1000,2000); rs[x] = new THREE.TetrahedronGeometry(getRandomArbitrary(2,20),1); shape[x] = new THREE.Mesh(rs[x], material); shape[x].castShadow = true; shape[x].position.set(pos.x,pos.y,pos.z); scene.add(shape[x]) } } function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; } init(); createObj(); createSpotlights(); randomStars(); render();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>three.js行星-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号