用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

three.js添加天空盒代码

2018-03-26 作者:云代码会员举报

[javascript]代码库

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/three.min.js"></script>
	<script src='js/OrbitControls.js'></script>
	<script src='js/Detector.js'></script>
	<script src="js/BinaryLoader.js"></script>
	<script src="js/stats.min.js"></script>
	<div id="onGeometry" style="width:500px; height: 500px;">
</head>
<body>
	<script type="text/javascript">
		var scene = new THREE.Scene();//创建场景

		var textureCube = new THREE.CubeTextureLoader()
			.setPath( 'images/')
			.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );//添加天空盒子背景图

			scene.background = textureCube;
        
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//添加相机
            camera.position.z = 5;

        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        
        var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);

        var container=document.getElementById('onGeometry').appendChild(renderer.domElement);

        var orbit = new THREE.OrbitControls( camera, container );
			orbit.addEventListener( 'change', render );
        
        function render() {
            requestAnimationFrame(render);
            // cube.rotation.x += 0.1;
            // cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();

	</script>
</body>
</html>


分享到:
更多

网友评论    (发表评论)

共1 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。