threejs简单样例

最新推荐文章于 2024-08-14 14:05:02 发布

爱就是恒久忍耐

最新推荐文章于 2024-08-14 14:05:02 发布

阅读量856

点赞数

分类专栏：编程 threejs

本文链接：https://blog.csdn.net/whahu1989/article/details/105032311

版权

编程同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

threejs

6 篇文章 2 订阅

订阅专栏

本人读研时使用过一段时间threejs，毕业后就没用过这个东西了，也没有从事相关的工作，这里重新拾起，以回忆当年的读研时光。

运行环境

OS：win10
threejs版本：r112
浏览器：Chrome v80.0.3987.149

代码及运行

代码来自《Learning Three.js: The JavaScript 3D Library for WebGL, Second Edition》

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
</head>
<body>
	<script src="js/three.min.js"></script>
	<script type="text/javascript">
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight,
			0.1, 1000);

		var renderer = new THREE.WebGLRenderer();
		renderer.setClearColor(new THREE.Color(0xEEEEEE));
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild( renderer.domElement );

		var axes = new THREE.AxesHelper(20);
		scene.add(axes);

		var planeGeometry = new THREE.PlaneGeometry(60, 30, 1, 1);
		var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});
		var plane = new THREE.Mesh(planeGeometry, planeMaterial);

		plane.rotation.x = -0.5 * Math.PI;
		plane.position.x = 15;
		plane.position.y = -3;
		plane.position.z = 0;


		scene.add(plane);

		var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
		var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000, wireframe: true});
		var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

		cube.position.x = -4;
		cube.position.y = 3;
		cube.position.z = 0;

		scene.add(cube);

		var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
		var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
		var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

		sphere.position.x = 20;
		sphere.position.y = 4;
		sphere.position.z = 2;

		scene.add(sphere);

		camera.position.x = -30;
		camera.position.y = 40;
		camera.position.z = 30;
		camera.lookAt(scene.position);


		var animate = function () {
			requestAnimationFrame( animate );

			cube.rotation.x += 0.05;
			cube.rotation.y += 0.05;

			sphere.rotation.x += 0.05

			renderer.render( scene, camera );
		};

		animate();

	</script>
</body>
</html>