three.js 3D全景图之一

最新推荐文章于 2023-04-27 17:40:55 发布

侒然

最新推荐文章于 2023-04-27 17:40:55 发布

阅读量388

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/Janent168/article/details/117222467

版权

three.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>erath - three.js</title>
	<script src="js/three.min.js"></script>
	<script src="js/TrackballControls.js"></script>
	<script src="js/jquery.min.js"></script>
</head>
<style>
	* {
		padding: 0px;
		margin: 0px;
	}
		html,body,.main {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.main {
			position: relative;
		}
			.div {
				float: left;
				cursor: move;
				width:100%;
				height:100%
			}
</style>
<body>
	<div class="main">
		<div class="div div1"></div>
	</div>
</body>
</html>
<script>
	function Three(className) {
		this.off;
		this.width = $(className).width();
		this.height = $(className).height();
		this.renderer =  new THREE.WebGLRenderer({
            antialias : true   //开启锯齿，默认是false
        });
		this.renderer.setSize(this.width, this.height); // 给渲染区域设置宽高
	    this.renderer.setClearColor("white"); // 设置背景色
	    $(className).append(this.renderer.domElement); 
	}
	Three.prototype = {
		init:function(url) {
			var that = this;
			this.scence = new THREE.Scene();  // 创建舞台
			
			// 设置视角及参数
			this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 10000);
			this.camera.position.set(0,0,200);
            this.camera.lookAt(new THREE.Vector3(0, 0, 0));
	        this.controls = new THREE.TrackballControls(this.camera, this.renderer.domElement);
            // this.controls.minDistance = 200;
            this.controls.rotateSpeed = 1.0;
			this.controls.zoomSpeed = 1.2;
			this.controls.panSpeed = 0.8;
			this.controls.noZoom = true;
			this.controls.noPan = true;
			this.controls.staticMoving = true;
			this.controls.dynamicDampingFactor = 0.3;  

			// 设置灯光及参数
            this.light = new THREE.AmbientLight(0xDDDDDD);
            this.light.position.set(100, 100, 200);
            this.scence.add(this.light);

            // 创建角色
			var circle =  new THREE.SphereGeometry(900,50,50);
            var texture = new THREE.TextureLoader();
            
			var material = new THREE.MeshBasicMaterial();
			// 给circle添加背景图片
			material.map = texture.load("images/"+url,function(){
            	that.renderer.render(that.scence, that.camera);
			});
            that.mesh = new THREE.Mesh(circle,material);
            that.mesh.position.set(0,0,-260);
            that.mesh.scale.x = -1;
    		that.scence.add(that.mesh);
		},
		animate:function() {
			this.off = requestAnimationFrame(this.animate.bind(this));
				this.mesh.rotation.y += 0.003;
				this.controls.target.copy( this.mesh.position );
				this.controls.update();
				this.renderer.render(this.scence, this.camera);
		},
		
		start:function() {
			this.animate();
		}
	}
	
	function Dothree() {
      var three=new Three($(".div"));
      three.init("164409shep99yc3gm01c99.jpg")
      three.start()
	}
	Dothree();
</script>

侒然

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 3D全景图之一

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>erath - three.js</title> <script src="js/three.min.js"></script> <script src="js/TrackballControls.js"></script> <scr.
复制链接

扫一扫