Threejs_旋转

风雨飘摇中的石头

已于 2022-02-18 08:10:42 修改

阅读量2k

点赞数

分类专栏： weggl 文章标签： java

于 2022-01-26 13:23:10 首次发布

本文链接：https://blog.csdn.net/ydk001001/article/details/122699007

版权

weggl 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

mesh.position.z =-200;//啮合网状组织位置
（-5， - 20 -200）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Threejs运动</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
  <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
 <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
    <!--<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
  <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>
  <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/STLLoader.js"></script>-->
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>
<body>
  <script>
    //var camera;
	//var scene;
	//var renderer;
	var mesh_one;
 
	init_begin();
	animate_one();
  
	function init_begin() {
		//1 设置舞台、场景
		scene = new THREE.Scene();
		//1.1 舞台：相机(透视)Fov – 相机的视锥体的垂直视野角
		//Fov – 相机视锥体垂直视野角;Aspect视锥体长宽比；；Near视锥体近平面；Far 视锥体的远平面
		camera = new THREE.PerspectiveCamera( 150, window.innerWidth / window.innerHeight, 5, 1000);
		//1.2舞台：光
		//定向灯（directional lights），环境灯（ambient lights），点灯（point lights），聚光灯（spot lights）和半球灯（hemisphere lights）。

		var light = new THREE.DirectionalLight( 0xffffff,3 );//颜色、亮度
		light.position.set( 0, 1, 1 ).normalize();//光源位置
		scene.add(light);//舞台+灯光
	    
		//2 演员：几何体
		var geometry = new THREE.CubeGeometry( 10, 10, 10);
		<!-- var geometry_two = new THREE.CubeGeometry(10,10,10);/立方体 -->
        
		//2.1 演员服装：样式、材质、颜色
		//color颜色 默认白；emissive 材质本身发出颜色，默认为黑色；shininess	光滑度，高光部分的亮度 默认30
		//specular材料高光部分颜色，默认0x111111深灰色，设置=color 得到类金属材质，灰=像塑料
		var material = new THREE.MeshPhongMaterial( { ambient: 0x050515, shininess: 30,specular: 0x555555  ,color: 0x0033ff } );
		var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});//实例化一个蓝色的材质
		
		//3 合成演员=丝网
		mesh_one = new THREE.Mesh(geometry, material );
		mesh_one.position.z =-200;//啮合网状组织位置
		<!-- mesh_two = new THREE.Mesh(geometry_two, material ); -->
		
		//4 舞台：添加第1个合成物体
		scene.add( mesh_one );//
		<!-- scene.add( mesh_two );// -->
		
		//5渲染
		renderer = new THREE.WebGLRenderer();
		//5.1渲染尺寸
		renderer.setSize( window.innerWidth, window.innerHeight );
		//5.2文档主体+子对象
		document.body.appendChild( renderer.domElement );
		//文档监听,尺寸变化
		window.addEventListener( 'resize', onWindowResize, false );
	    //渲染表演
		render_begin();
		}
			
		//函数动作	
		function animate_one() {
			mesh_one.rotation.x += 100;//faster
			mesh_one.rotation.y += .02;//slow 
		  
			render_begin();//表演
			requestAnimationFrame( animate_one );
		}
		
		//函数表演	
		function render_begin() {
			renderer.render( scene, camera );
		}
		  
		//函数尺寸变化  
		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
			render();
		}
  </script>
</body>
</html>

风雨飘摇中的石头

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Threejs_旋转

mesh.position.z =-200;//啮合网状组织位置（-5， - 20 -200）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Threejs运动</title> <style> body { margin: 0; overflow: hidden; /*...
复制链接

扫一扫

专栏目录