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>