threejs：坐标系相关、嵌套或组合多个物体

1.物体旋转正方向：使用右手坐标系，紧握右手，大拇指与某个坐标轴重合，此时四指方向即为物体旋转的正方向。

2.世界坐标和本地坐标：世界坐标只一个，本地坐标则是每个物体都有一个，当物体旋转时，是围绕本地坐标旋转。

3.显示坐标轴：AxisHelper

	var axis = new THREE.AxisHelper(10);
	scene.add(axis);

4.坐标轴也可以旋转

		axis.rotation.y += 0.01;

5.嵌套或集合多个物体。比如这儿将坐标轴和一个立方体嵌套在一起，组成一个新的3D object。可以想象，旋转这个3D object，方块和坐标轴会一起旋转

	/*
	新建一个组合体object3D，加入创建的cube和axis
	注意，cube和axis不必再加入scene中，只需要
	将object3D加入场景即可。
	*/

	var object3D = new THREE.Object3D();
	object3D.add(cube);
	object3D.add(axis);

	scene.add(object3D);
	
	function render(){
		requestAnimationFrame(render);

		object3D.rotation.x += 0.01;
		object3D.rotation.y += 0.01;

		renderer.render(scene,camera);
	}

完整实例代码如下

<!DOCTYPE html>
<html>
<head>
	<title>第一个threejs</title>
	<script src="three.js"></script>
</head>
<body>

</body>

<script>
	//创建场景
	var scene = new THREE.Scene();
	var scene = new THREE.Scene();
	//创建相机
	var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
	//创建渲染器
	var renderer = new THREE.WebGLRenderer();
	//设置背景颜色
	renderer.setClearColor(0xffffff);

	renderer.setSize(window.innerWidth,window.innerHeight);
	//将场景选然后加入到html中
	document.body.appendChild(renderer.domElement);
	//产生一个几何体以及材质
	var geometry = new THREE.BoxGeometry();
	var material = new THREE.MeshBasicMaterial({color:0x00ff00});
	//组合几何体和材质
	var cube = new THREE.Mesh(geometry,material);

	// scene.add(cube);

	camera.position.z = 10;//近大远小
	//旋转
	var axis = new THREE.AxisHelper(10);
	// scene.add(axis);

	/*
	新建一个组合体object3D，加入创建的cube和axis
	注意，cube和axis不必再加入scene中，只需要
	将object3D加入场景即可。
	*/

	var object3D = new THREE.Object3D();
	object3D.add(cube);
	object3D.add(axis);

	scene.add(object3D);
	
	function render(){
		requestAnimationFrame(render);

		object3D.rotation.x += 0.01;
		object3D.rotation.y += 0.01;

		renderer.render(scene,camera);
	}

	render();
</script>

</html>
posted @ 2020-02-29 10:47  昨夜昙花  阅读(170)  评论(0)    收藏  举报