three.js实现简单功能

最新推荐文章于 2024-05-30 18:09:07 发布

戴帽子的猫

最新推荐文章于 2024-05-30 18:09:07 发布

阅读量4.4k

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/cong_wa/article/details/52442398

版权

three.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>love</title>
        <script src="./three/build/Three.js"></script>
        <script src="./three/examples\js\libs/stats.min.js"></script>
		<script src="./three/examples\js\libs/tween.min.js"></script>
		<script src="./three/examples/js/Detector.js"></script>
		<script src="./three/examples/js/controls/OrbitControls.js"></script>
		


        <style type="text/css">
            div#canvas-frame {
                border: none;
                cursor: pointer;
                width: 100%;
                height: 100%;
                background-color: #330000;
            }

        </style>
            <script>
            var renderer;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(000000, 1.0);
            }

            var camera;
            var controls;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 600;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });


                controls = new THREE.OrbitControls( camera );
				controls.target.set( 0, 0, 0 );
				controls.update();
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);
            }

            var cube;
            function initObject() {
                var geometry = new THREE.CubeGeometry( 200, 100, 50,4,4);
                var material = new THREE.MeshLambertMaterial( { color:0x880000} );
                var mesh = new THREE.Mesh( geometry,material);
                mesh.position = new THREE.Vector3(0,0,0);
                scene.add(mesh);
            }
			
			function cube1()
			{
				/*
				//var manager = new THREE.LoadingManager();
				var texture = new THREE.Texture();
				var loader = new THREE.ImageLoader(  );
				var tex = loader.load("cat.jpg",function ( image ) {

					texture.image = image;
					texture.needsUpdate = true;
			});

*/
				/*
				var manager = new THREE.LoadingManager();
				manager.onProgress = function ( item, loaded, total ) {

					console.log( item, loaded, total );

				};

				var texture = new THREE.Texture();

				var onProgress = function ( xhr ) {
					if ( xhr.lengthComputable ) {
						var percentComplete = xhr.loaded / xhr.total * 100;
						console.log( Math.round(percentComplete, 2) + '% downloaded' );
					}
				};

				var onError = function ( xhr ) {
				};


				var loader = new THREE.ImageLoader( manager );
				loader.load( './4.png', function ( image ) {

					texture.image = image;
					texture.needsUpdate = true;

				} );
				
				*/

				var textureLoader = new THREE.TextureLoader();
				var texture = textureLoader.load('./q.png', function(texture) {

                });

                var cube1_geometr = new THREE.PlaneGeometry(200, 200, 1, 1);
					var cube1_material = new THREE.MeshBasicMaterial({
					map: texture,
					side: THREE.DoubleSide,
					//depthTest: true,
					//blending: THREE.AdditiveBlending,
					transparent: true

					});
					texture.needsUpdate = true;
					texture.anisotropy  = renderer.getMaxAnisotropy();
					texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
					//texture.repeat.set( 512, 512 );
					var cube1 = [];
					for(var i = 0; i < 6; i++){
						cube1.push(new THREE.Mesh(cube1_geometr, cube1_material));
						scene.add(cube1[i]);
						scene.needsUpdate = true;
					}
				
					var PIC2 = Math.PI/2;
				
					cube1[0].position.set(0, 0, 250);
			
					cube1[1].position.set(0, 0, -250);

					cube1[2].position.set(-250, 0, 0);
					cube1[2].rotation.set(0, PIC2, 0);
				
					cube1[3].position.set(250, 0, 0);
					cube1[3].rotation.set(0, PIC2, 0);
					
					cube1[4].position.set(0, 250, 0);
					cube1[4].rotation.set(PIC2, 0, 0);
					
					cube1[5].position.set(0, -250, 0);
					cube1[5].rotation.set(PIC2, 0, 0);

				
			}
			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}


            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
				cube1();
                renderer.clear();
               // onWindowResize();
                renderer.render(scene, camera);
                 //requestAnimationFrame( threeStart );
                 animate()
            }

            function animate() {
      		  	requestAnimationFrame( animate );
      		  	camera.lookAt( scene.position );
      		  	onWindowResize();
       			renderer.render( scene, camera );
   			 }

        </script>
    </head>

    <body onload ="threeStart();">
        <div id="canvas-frame"></div>
    </body>
</html>