three.js实现简单功能

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Three.js是一个用于创建和展示3D图形的JavaScript库。它提供了丰富的功能和工具,可以轻松地在Web浏览器中创建各种类型的3D场景,包括曲面。 要使用Three.js实现3D曲面,你可以按照以下步骤进行操作: 1. 引入Three.js库:首先,在你的HTML文件中引入Three.js库。你可以从官方网站(https://threejs.org/)下载最新版本的库文件,并将其包含在你的项目中。 2. 创建场景和相机:使用Three.js创建一个场景和一个相机。场景是所有3D对象的容器,而相机定义了观察者的视角。 3. 创建曲面几何体:使用Three.js的几何体类之一来创建曲面几何体。例如,你可以使用Three.js的`PlaneGeometry`类来创建一个平面曲面,或者使用`SphereGeometry`类来创建一个球体曲面。 4. 创建材质:为曲面几何体创建一个材质。Three.js提供了各种类型的材质,包括基本材质、纹理材质和光线材质等。你可以根据需要选择合适的材质类型,并设置其属性。 5. 创建网格对象:将曲面几何体和材质结合起来,创建一个网格对象。网格对象是Three.js中用于渲染3D对象的基本单元。 6. 添加网格对象到场景:将网格对象添加到场景中,以便在渲染时显示出来。 7. 渲染场景:使用Three.js的渲染器类来渲染场景和相机。将渲染结果显示在HTML页面上。 下面是一个简单的示例代码,演示了如何使用Three.js创建一个平面曲面: ```javascript // 引入Three.js库 import * as THREE from 'three'; // 创建场景和相机 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建平面曲面几何体 const geometry = new THREE.PlaneGeometry(2, 2); // 创建材质 const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建网格对象 const plane = new THREE.Mesh(geometry, material); // 将网格对象添加到场景中 scene.add(plane); // 创建渲染器 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 渲染场景和相机 function animate() { requestAnimationFrame(animate); plane.rotation.x += 0.01; plane.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 这是一个简单的示例,你可以根据自己的需求进行修改和扩展。通过使用Three.js的各种几何体和材质,你可以实现各种类型的3D曲面效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值